边框图像开始 | border-image-outset
边界-形象-开始
border-image-outset属性定义边框图像可超出边框盒的大小。
/* border-image-outset: sides */
border-image-outset: 1.5;
/* border-image-outset: vertical horizontal */
border-image-outset: 1 1.2;
/* border-image-outset: top horizontal bottom */
border-image-outset: 30px 2 45px;
/* border-image-outset: top right bottom left */
border-image-outset: 7px 12px 14px 5px;
border-image-outset: inherit;
由于此属性而在边框外部呈现的边框图像的部分不会导致滚动被触发。这些区域也不会捕获鼠标事件，也不会以边界元素的名义发生鼠标事件。
| 初始值 | 0s |
|---|---|
| 适用元素 | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| 是否是继承属性 | no |
| 适用媒体 | visual |
| 计算值 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
当一个值被指定为无单位时<number>，该值乘以相应的计算border-width来确定border-image-outset。负值无效。
sides边框图像在四个方向超出边框盒的<length>或<number>数量。horizontal边框图像在水平方向（左和右）超出边框盒的<length>或<number>数量.vertical边框图像在垂直方向（上和下）超出边框盒的<length>或<number>数量.top边框图像在上方超出边框盒的<length>或<number>数量.bottom边框图像在下方超出边框盒的<length>或<number>数量.right边框图像在右方超出边框盒的<length>或<number>数量.left边框图像在左方超出边框盒的<length>或<number>数量.inherit四个方向的值都继承于父元素的该属性计算后值。
正式语法
[ <length> | <number> ]{1,4}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3The definition of 'border-image-outset' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 15.0 | (Yes) | 15.0 (15.0) | 11 | 15 | 6 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | 15.0 (15.0) | No support | ? | ? |
