border-image-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính border-image-width CSS đặt chiều rộng của hình ảnh đường viền của phần tử.
Nếu giá trị của thuộc tính này lớn hơn border-width của phần tử, hình ảnh đường viền sẽ mở rộng ra ngoài cạnh padding (và/hoặc nội dung).
Try it
border-image-width: 30px;
border-image-width: 15px 40px;
border-image-width: 2.6rem;
border-image-width: 20% 8%;
<section id="default-example">
<div id="example-element">This is a box with a border around it.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: black;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
Cú pháp
/* Giá trị từ khóa */
border-image-width: auto;
/* Giá trị <length> */
border-image-width: 1rem;
/* Giá trị <percentage> */
border-image-width: 25%;
/* Giá trị <number> */
border-image-width: 3;
/* trên và dưới | trái và phải */
border-image-width: 2em 3em;
/* trên | trái và phải | dưới */
border-image-width: 5% 15% 10%;
/* trên | phải | dưới | trái */
border-image-width: 5% 2em 10% auto;
/* Giá trị toàn cục */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;
Thuộc tính border-image-width có thể được chỉ định bằng một, hai, ba hoặc bốn giá trị được chọn từ danh sách các giá trị bên dưới.
- Khi chỉ định một giá trị, nó áp dụng cùng chiều rộng cho cả bốn cạnh.
- Khi chỉ định hai giá trị, chiều rộng đầu tiên áp dụng cho trên và dưới, chiều rộng thứ hai cho trái và phải.
- Khi chỉ định ba giá trị, chiều rộng đầu tiên áp dụng cho trên, chiều rộng thứ hai cho trái và phải, chiều rộng thứ ba cho dưới.
- Khi chỉ định bốn giá trị, các chiều rộng áp dụng cho trên, phải, dưới, và trái theo thứ tự đó (theo chiều kim đồng hồ).
Giá trị
<length-percentage>-
Chiều rộng của đường viền, được chỉ định là
<length>hoặc<percentage>. Phần trăm tương đối với chiều rộng của vùng hình ảnh đường viền cho các độ lệch ngang và chiều cao của vùng hình ảnh đường viền cho các độ lệch dọc. Không được âm. <number>-
Chiều rộng của đường viền, được chỉ định là bội số của
border-widthtương ứng. Không được âm. auto-
Chiều rộng của đường viền được đặt bằng chiều rộng hoặc chiều cao nội tại (tùy theo cái nào áp dụng) của
border-image-slicetương ứng. Nếu hình ảnh không có kích thước nội tại cần thiết,border-widthtương ứng sẽ được sử dụng thay thế.
Định nghĩa hình thức
| Initial value | 1 |
|---|---|
| Applies to | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| Inherited | no |
| Percentages | refer to the width or height of the border image area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |
Cú pháp hình thức
border-image-width =
[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
Ví dụ
Xếp ô hình ảnh đường viền
Ví dụ này tạo một hình ảnh đường viền sử dụng tệp ".png" sau, có kích thước 90 x 90 pixel:
Do đó, mỗi hình tròn trong hình ảnh nguồn có kích thước 30 x 30 pixel.
HTML
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
CSS
p {
border: 20px solid;
border-image: url("border.png") 30 round;
border-image-width: 16px;
padding: 40px;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-width |