Css mở rộng đường viền ngoài phần tử

Thuộc tính border-image-outset chỉ định mức độ mà khu vực hình ảnh đường viền mở rộng ra ngoài hộp đường viền

Mẹo. Ngoài ra, hãy xem thuộc tính hình ảnh đường viền (thuộc tính tốc ký để đặt tất cả các thuộc tính hình ảnh đường viền-*)

Đưa ra bản chạy thử ❯

Giá trị mặc định. 0Kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. mục tiêu. Phong cách. borderImageOutset="10px" Hãy dùng thử

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Thuộc tính Border-image-outset 15. 011. 015. 06. 015. 0

---

---

Cú pháp CSS

đường viền-hình ảnh-outset. chiều dài. số. ban đầu. thừa kế;

Ghi chú. Thuộc tính border-image-outset có thể nhận từ một đến bốn giá trị (bên trên, bên phải, bên dưới và bên trái). Nếu giá trị thứ tư bị bỏ qua, nó giống như giá trị thứ hai. Nếu cái thứ ba cũng bị bỏ qua, nó giống như cái đầu tiên. Nếu cái thứ hai cũng bị bỏ qua, nó giống như cái thứ nhất

Giá trị tài sản

Giá trịMô tảPlay itlengthMột đơn vị độ dài chỉ định khoảng cách từ các cạnh mà hình ảnh đường viền sẽ xuất hiện. Giá trị mặc định là 0Demo ❯số Biểu thị bội số của độ rộng đường viền tương ứngDemo ❯initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

Gần đây tôi đã nhận thấy một thay đổi thú vị trên CodePen. khi di bút trên trang chủ, có một hình chữ nhật với các góc tròn mở rộng ở phía sau

Mở rộng hiệu ứng hộp trên trang chủ CodePen

Là một sinh vật tò mò, tôi phải kiểm tra xem nó hoạt động như thế nào. Hóa ra, hình chữ nhật ở phía sau là một phần tử giả

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 được định vị tuyệt đối

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 phong cách ban đầu. Phần bù dương đi vào trong từ giới hạn

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

3 của cấp độ gốc, trong khi phần bù âm đi ra ngoài

Trên

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4, phần bù của nó bị ghi đè và kết hợp với

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

5, chúng tôi nhận được hiệu ứng hộp mở rộng

Phong cách

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 trên

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4

Thuộc tính

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

8 có cùng giá trị (

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

9) trong cả bộ quy tắc ban đầu và bộ quy tắc

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4, vì vậy không cần thiết phải ghi đè lên nó, nhưng tất cả các phần bù khác di chuyển theo ____10_______1 ra ngoài (từ

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

2 đến

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

9 đối với phần bù

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4 và

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

5 và từ

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

9

Một điều cần lưu ý ở đây là phần tử giả

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 có

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

0 của

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

1 được giữ nguyên khi nó mở rộng. Điều đó khiến tôi phải suy nghĩ về những phương pháp chúng ta có để mở rộng/thu nhỏ các phần tử (giả-) trong khi vẫn giữ nguyên

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

0 của chúng. Bạn có thể nghĩ ra bao nhiêu?

Thay đổi độ lệch

Đây là phương pháp được sử dụng trên CodePen và nó hoạt động rất tốt trong tình huống cụ thể này vì nhiều lý do. Trước hết, nó có sự hỗ trợ tuyệt vời. Nó cũng hoạt động khi phần tử mở rộng (giả) đáp ứng, không có kích thước cố định, đồng thời, mức độ mở rộng của nó là cố định (giá trị

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

3). Nó cũng hoạt động để mở rộng theo nhiều hướng (_______10_______4,

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

8 và

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

5 trong trường hợp cụ thể này)

Tuy nhiên, có một vài lưu ý chúng ta cần lưu ý

Đầu tiên, phần tử mở rộng của chúng ta không thể có

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

7. Đây không phải là vấn đề trong ngữ cảnh của trường hợp sử dụng CodePen vì phần tử giả

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 dù sao cũng cần được định vị tuyệt đối để được đặt bên dưới phần còn lại của nội dung gốc này

Thứ hai, quá nhiệt tình với hoạt ảnh bù đắp (cũng như nói chung, tạo hoạt ảnh cho bất kỳ thuộc tính nào ảnh hưởng đến bố cục với thuộc tính hộp theo cách mà hiệu suất, lề, độ rộng đường viền, phần đệm hoặc kích thước thực hiện) có thể tác động tiêu cực đến hiệu suất. Một lần nữa, đây không phải là điều đáng lo ngại ở đây, chúng tôi chỉ có một chút

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

5 trên

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4, không có gì to tát

Thay đổi kích thước

Thay vì thay đổi độ lệch, chúng ta có thể thay đổi kích thước. Tuy nhiên, đây là một phương pháp hoạt động nếu chúng ta muốn phần tử (giả-) của mình mở rộng theo nhiều nhất là hai hướng. Mặt khác, chúng ta cũng cần thay đổi độ lệch. Để hiểu rõ hơn về điều này, hãy xem xét tình huống CodePen mà chúng ta muốn các phần tử giả

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 của mình mở rộng theo ba hướng (

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4,

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

8 và

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

5)

Thông tin kích thước ban đầu có liên quan như sau

.single-item::after {
  top: 1rem;
  right: -1rem;
  bottom: -1rem;
  left: 1rem;
}

Vì các độ lệch đối lập (các cặp

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4–

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

8 và

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

5–

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

8) triệt tiêu lẫn nhau (

.single-item:hover::after { margin: 0 }

9), kết quả là kích thước của phần tử giả bằng với kích thước của phần tử gốc của nó (hoặc

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

0 kích thước của phần tử gốc)

Vì vậy, chúng ta có thể viết lại ở trên như

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

Vào ngày

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4, chúng tôi tăng

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

2 lên __10_______1 lên _______10_______5 và _______40_______5 lên _______40_______6, _______10_______1 lên _______10_______4 và _______10_______1 lên _________8. Tuy nhiên, chỉ viết

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

…là không đủ, vì điều này làm cho

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

5 tăng hướng đi xuống bởi

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

6 thay vì tăng nó lên bằng cách

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 lên và

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 xuống. Bản trình diễn sau đây minh họa điều này (đặt

.single-item:hover::after { font-size: 0 }

5 trên hoặc di chuột qua các mục để xem phần tử giả

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 mở rộng như thế nào)

Xem Bút của thebabydino (@thebabydino) trên CodePen

Chúng tôi cũng cần cập nhật thuộc tính

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4 để có được hiệu quả mong muốn

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

Cái nào hoạt động, như nó có thể được nhìn thấy dưới đây

Xem Bút của thebabydino (@thebabydino) trên CodePen

Nhưng, thành thật mà nói, điều này cảm thấy ít mong muốn hơn là chỉ thay đổi hiệu số

Tuy nhiên, thay đổi kích thước là một giải pháp tốt trong một tình huống khác, chẳng hạn như khi chúng ta muốn có một số thanh có các góc tròn mở rộng/thu nhỏ theo một hướng

Xem Bút của thebabydino (@thebabydino) trên CodePen

Lưu ý rằng, nếu chúng ta không có các góc tròn để bảo toàn, giải pháp tốt hơn sẽ là sử dụng tỷ lệ định hướng thông qua thuộc tính

.single-item:hover::after { font-size: 0 }

8

Thay đổi phần đệm/độ rộng đường viền

Tương tự như thay đổi kích thước, chúng ta có thể thay đổi

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

3 hoặc

.single-item::after {
  top: calc(2em - 1rem);
  right: -1rem;
  bottom: calc(2em - 3rem);
  left: calc(2em - 1rem);
  font-size: 1rem;
}

.single-item:hover::after { font-size: 0 }

0 (đối với

.single-item::after {
  top: calc(2em - 1rem);
  right: -1rem;
  bottom: calc(2em - 3rem);
  left: calc(2em - 1rem);
  font-size: 1rem;
}

.single-item:hover::after { font-size: 0 }

1 đó là

.single-item::after {
  top: calc(2em - 1rem);
  right: -1rem;
  bottom: calc(2em - 3rem);
  left: calc(2em - 1rem);
  font-size: 1rem;
}

.single-item:hover::after { font-size: 0 }

2). Lưu ý rằng, giống như việc thay đổi kích thước, chúng tôi cũng cần cập nhật độ lệch nếu mở rộng hộp theo nhiều hơn hai chiều

Xem Bút của thebabydino (@thebabydino) trên CodePen

Trong bản demo ở trên, hộp màu hồng đại diện cho ____63_______3 của phần tử giả __________1 và bạn có thể thấy nó giữ nguyên kích thước, điều này rất quan trọng đối với phương pháp này

Để hiểu tại sao nó lại quan trọng, hãy xem xét giới hạn khác này. chúng ta cũng cần có kích thước hộp được xác định bởi hai độ lệch cộng với

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

2 và

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

5 thay vì sử dụng cả bốn độ lệch. Điều này là do

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

3/

.single-item::after {
  top: calc(2em - 1rem);
  right: -1rem;
  bottom: calc(2em - 3rem);
  left: calc(2em - 1rem);
  font-size: 1rem;
}

.single-item:hover::after { font-size: 0 }

0 sẽ chỉ phát triển vào bên trong nếu chúng ta sử dụng bốn độ lệch thay vì hai cộng với

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

2 và

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

5

Xem Bút của thebabydino (@thebabydino) trên CodePen

Vì lý do tương tự, chúng tôi không thể có

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

1 trên phần tử giả

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 của chúng tôi

Xem Bút của thebabydino (@thebabydino) trên CodePen

Bất chấp những hạn chế này, phương pháp này có thể hữu ích nếu phần tử mở rộng (giả) của chúng ta có nội dung văn bản mà chúng ta không muốn nhìn thấy di chuyển trên

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4 như được minh họa bởi Bút bên dưới, trong đó hai ví dụ đầu tiên thay đổi độ lệch/kích thước

Xem Bút của thebabydino (@thebabydino) trên CodePen

Thay đổi lề

Sử dụng phương pháp này, trước tiên, chúng tôi đặt độ lệch thành giá trị trạng thái

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4 và

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

5 để bù và cung cấp cho chúng tôi kích thước trạng thái ban đầu

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

Sau đó, chúng tôi zero cái này

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

5 trên

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4

.single-item:hover::after { margin: 0 }

Xem Bút của thebabydino (@thebabydino) trên CodePen

Đây là một cách tiếp cận khác phù hợp với tình huống CodePen, mặc dù tôi thực sự không thể nghĩ ra các trường hợp sử dụng khác. Cũng lưu ý rằng, giống như thay đổi độ lệch hoặc kích thước, phương pháp này ảnh hưởng đến kích thước của

.single-item::after {
  top: calc(2em - 1rem);
  right: -1rem;
  bottom: calc(2em - 3rem);
  left: calc(2em - 1rem);
  font-size: 1rem;
}

.single-item:hover::after { font-size: 0 }

3, do đó, bất kỳ nội dung văn bản nào chúng tôi có thể đã được di chuyển và sắp xếp lại

Thay đổi kích thước phông chữ

Đây có lẽ là cách khó nhất và có rất nhiều hạn chế, trong đó quan trọng nhất là chúng ta không thể có nội dung văn bản trên phần tử thực (giả-) mở rộng/thu nhỏ — nhưng đó là một phương pháp khác sẽ hoạt động tốt trong trường hợp CodePen

Ngoài ra, bản thân

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

9 không thực sự làm bất cứ điều gì để làm cho hộp mở rộng hoặc thu nhỏ. Chúng ta cần kết hợp nó với một trong những thuộc tính đã thảo luận trước đó

Ví dụ: chúng ta có thể đặt

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

9 trên

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 bằng với

.single-item::after {
  top: -1rem;
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

2, đặt phần bù cho trường hợp mở rộng và đặt lề

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

03 tương ứng với sự khác biệt giữa trạng thái mở rộng và trạng thái ban đầu

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2em 0 2em 2em;
  font-size: 1rem;
}

Sau đó, vào ngày

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4, chúng tôi đưa

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

9 đến

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

06

.single-item:hover::after { font-size: 0 }

Xem Bút của thebabydino (@thebabydino) trên CodePen

Chúng ta cũng có thể sử dụng

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

9 với hiệu số, mặc dù nó phức tạp hơn một chút

.single-item::after {
  top: calc(2em - 1rem);
  right: -1rem;
  bottom: calc(2em - 3rem);
  left: calc(2em - 1rem);
  font-size: 1rem;
}

.single-item:hover::after { font-size: 0 }

Tuy nhiên, điều quan trọng là nó hoạt động, như có thể thấy bên dưới

Xem Bút của thebabydino (@thebabydino) trên CodePen

Kết hợp

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

9 với kích thước thậm chí còn phức tạp hơn, vì chúng ta cũng cần thay đổi giá trị bù dọc trên

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4 trên tất cả mọi thứ

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

Oh, tốt, ít nhất nó hoạt động

Xem Bút của thebabydino (@thebabydino) trên CodePen

Điều tương tự cũng xảy ra khi sử dụng

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: calc(100% + 2em);
  height: calc(100% + 4em);
  font-size: 0;
}

.single-item:hover::after {
  top: -1rem;
  font-size: 1rem
}

9 với

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

3/

.single-item::after {
  top: calc(2em - 1rem);
  right: -1rem;
  bottom: calc(2em - 3rem);
  left: calc(2em - 1rem);
  font-size: 1rem;
}

.single-item:hover::after { font-size: 0 }

0

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

0

Xem Bút của thebabydino (@thebabydino) trên CodePen

Thay đổi quy mô

Nếu bạn đã đọc các phần về hiệu suất của

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

13, thì có lẽ bạn đã đọc rằng tốt hơn là nên tạo hiệu ứng chuyển đổi thay vì các thuộc tính ảnh hưởng đến bố cục, như độ lệch, lề, đường viền, phần đệm, kích thước - gần như những gì chúng tôi đã sử dụng cho đến nay

Vấn đề đầu tiên nổi bật ở đây là việc chia tỷ lệ một phần tử cũng chia tỷ lệ làm tròn góc của nó, như minh họa bên dưới

Xem Bút của thebabydino (@thebabydino) trên CodePen

Chúng ta có thể giải quyết vấn đề này bằng cách nhân rộng

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

0 theo cách khác

Giả sử chúng tôi chia tỷ lệ một phần tử theo hệ số

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

15 dọc theo trục x và theo hệ số

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

16 dọc theo trục y và chúng tôi muốn giữ giá trị

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

0 của nó ở một giá trị không đổi

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

18

Điều này có nghĩa là chúng ta cũng cần chia

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

18 cho hệ số tỷ lệ tương ứng dọc theo mỗi trục

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

1

Xem Bút của thebabydino (@thebabydino) trên CodePen

Tuy nhiên, lưu ý rằng với phương pháp này, chúng tôi cần sử dụng các hệ số tỷ lệ chứ không phải số lượng mà chúng tôi mở rộng phần tử (giả-) của mình theo hướng này hoặc hướng kia. Có thể lấy các hệ số tỷ lệ từ thứ nguyên và lượng mở rộng, nhưng chỉ khi chúng được biểu thị bằng các đơn vị có mối quan hệ cố định nhất định giữa chúng. Mặc dù bộ tiền xử lý có thể kết hợp các đơn vị như

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

20 hoặc

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

21 do thực tế là

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

22 luôn là

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

23, nhưng chúng không thể giải quyết được bao nhiêu

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

24 hoặc

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

25 hoặc

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

26 hoặc

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

27 trong

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

21 vì chúng thiếu ngữ cảnh. Và

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

29 cũng không phải là một giải pháp, vì nó không cho phép chúng tôi chia một giá trị độ dài cho một giá trị độ dài khác để có được hệ số tỷ lệ không có đơn vị

Đây là lý do tại sao chia tỷ lệ không phải là một giải pháp trong trường hợp CodePen, trong đó các hộp

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 có kích thước phụ thuộc vào chế độ xem, đồng thời, mở rộng theo lượng

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

3 cố định

Nhưng nếu số lượng tỷ lệ của chúng tôi được cung cấp hoặc chúng tôi có thể dễ dàng tính toán nó, thì đây là một tùy chọn để xem xét, đặc biệt là vì việc tạo các thuộc tính tùy chỉnh cho các yếu tố tỷ lệ mà chúng tôi sau đó tạo hiệu ứng bằng một chút phép thuật Houdini có thể đơn giản hóa mã của chúng tôi rất nhiều

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

2

Lưu ý rằng Houdini chỉ hoạt động trong trình duyệt Chromium có bật cờ tính năng Nền tảng web thử nghiệm

Ví dụ: chúng ta có thể tạo hoạt ảnh lưới ô vuông này

Hoạt ảnh lưới ô xếp vòng lặp (Bản trình diễn, chỉ dành cho Chrome có cờ)

Các viên gạch hình vuông có chiều dài cạnh là

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

32 và góc làm tròn là

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

33

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

3

Chúng tôi đăng ký hai thuộc tính tùy chỉnh của chúng tôi

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

4

Và sau đó chúng ta có thể làm động chúng

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

5

Cuối cùng, chúng tôi thêm độ trễ tùy thuộc vào chỉ số lưới ngang (

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

34) và dọc (

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

35) để tạo hiệu ứng

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

13 so le

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

6

Một ví dụ khác là ví dụ sau, trong đó các dấu chấm được tạo với sự trợ giúp của các phần tử giả

Hình ảnh động tăng đột biến của vòng lặp (Bản trình diễn, chỉ dành cho Chrome có cờ)

Vì các phần tử giả được chia tỷ lệ cùng với cha mẹ của chúng, nên chúng ta cũng cần đảo ngược biến đổi tỷ lệ trên chúng

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

7

Thay đổi… clip-path?

Đây là một phương pháp tôi thực sự thích, mặc dù nó không hỗ trợ trước Chromium Edge và Internet Explorer

Gần như mọi ví dụ sử dụng của

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

37 đều có giá trị

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

38 hoặc giá trị tham chiếu SVG. Tuy nhiên, nếu bạn đã xem một số bài viết trước đây của tôi, thì bạn có thể biết có những hình dạng cơ bản khác mà chúng ta có thể sử dụng, chẳng hạn như

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

39, hoạt động như minh họa bên dưới

Cách thức hoạt động của hàm

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

39. (Thử nghiệm)

Vì vậy, để tái tạo hiệu ứng CodePen bằng phương pháp này, chúng tôi đặt giá trị bù đắp

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

1 thành các giá trị trạng thái được mở rộng và sau đó cắt bỏ những gì chúng tôi không muốn thấy với sự trợ giúp của

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

37

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

8

Và sau đó, ở trạng thái

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

4, chúng tôi bỏ tất cả các phần phụ

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

9

Điều này có thể được nhìn thấy trong hành động dưới đây

Xem Bút của thebabydino (@thebabydino) trên CodePen

Được rồi, cách này hiệu quả, nhưng chúng tôi cũng cần làm tròn một góc. May mắn thay,

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

39 cũng cho phép chúng tôi chỉ định giá trị đó là bất kỳ giá trị

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

0 nào mà chúng tôi có thể muốn

Ở đây, một

.single-item::after {
  top: -1rem;
  right: -1rem;
  bottom: -3rem;
  left: -1rem;
  margin: 2rem 0 2rem 2rem;
}

1 cho tất cả các góc dọc theo cả hai hướng sẽ làm được

.single-item::after {
  width: calc(100% + 2rem);
  height: calc(100% + 4rem);
}

0

Và điều này mang lại cho chúng tôi chính xác những gì chúng tôi đang làm

Xem Bút của thebabydino (@thebabydino) trên CodePen

Hơn nữa, nó không thực sự phá vỡ bất cứ thứ gì trong các trình duyệt không hỗ trợ, nó chỉ luôn ở trạng thái mở rộng

Tuy nhiên, mặc dù đây là phương pháp hoạt động tốt cho nhiều tình huống — bao gồm cả trường hợp sử dụng CodePen — nhưng nó không hoạt động khi các phần tử mở rộng/thu nhỏ của chúng ta có các phần tử con nằm bên ngoài phần tử mẹ bị cắt bớt của chúng

.single-item::after {
  top: 1rem;
  right: -1rem;
  width: 100%;
  height: 100%;
}

47, vì đây là trường hợp cuối cùng

Chúng ta có thể cung cấp chiều cao cho đường viền trong CSS không?

Bạn có thể thêm phần đệm vào đường viền không?