border-image-outset
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-outset trong CSS đặt khoảng cách mà hình ảnh đường viền của một phần tử được đẩy ra ngoài hộp đường viền.
Các phần của hình ảnh đường viền được hiển thị bên ngoài hộp đường viền của phần tử với border-image-outset sẽ không kích hoạt thanh cuộn tràn và không bắt các sự kiện chuột.
Try it
border-image-outset: 0;
border-image-outset: 15px;
border-image-outset: 30px;
border-image-outset: 40px;
<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ị <length> */
border-image-outset: 1rem;
/* Giá trị <number> */
border-image-outset: 1.5;
/* trên và dưới | trái và phải */
border-image-outset: 1 1.2;
/* trên | trái và phải | dưới */
border-image-outset: 30px 2 45px;
/* trên | phải | dưới | trái */
border-image-outset: 7px 12px 14px 5px;
/* Giá trị toàn cục */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;
Thuộc tính border-image-outset có thể được chỉ định với một, hai, ba hoặc bốn giá trị. Mỗi giá trị là <length> hoặc <number>. Giá trị âm không hợp lệ và sẽ khiến khai báo border-image-outset bị bỏ qua.
- Nếu chỉ định một giá trị, nó áp dụng cho cả bốn cạnh.
- Nếu chỉ định hai giá trị, giá trị đầu tiên áp dụng cho trên và dưới, giá trị thứ hai cho trái và phải.
- Nếu chỉ định ba giá trị, giá trị đầu tiên áp dụng cho trên, giá trị thứ hai cho trái và phải, giá trị thứ ba cho dưới.
- Nếu chỉ định bốn giá trị, chú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>-
Kích thước của outset
border-imagedưới dạng kích thước — một số kèm đơn vị. <number>-
Kích thước của outset
border-imagedưới dạng bội số củaborder-widthtương ứng của phần tử. Ví dụ, nếu một phần tử cóborder-width: 1em 2px 0 1.5remvàborder-image-outset: 2, thìborder-image-outsetcuối cùng sẽ được tính là2em 4px 0 3rem.
Định nghĩa hình thức
| Initial value | 0 |
|---|---|
| Applies to | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| Inherited | no |
| 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-outset =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
Ví dụ
Đẩy hình ảnh đường viền ra ngoài
HTML
<div id="outset">This element has an outset border image!</div>
CSS
#outset {
width: 10rem;
background: #cceeff;
border: 1.4rem solid;
border-image: radial-gradient(#ffff22, #5555ff) 40;
border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
margin: 2.1rem;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-outset |