HTML Dog
跳至导航

CSS 属性:border-image-width

边框图片的绘制区域。在边框内绘制图片的宽度。

通过从边框的顶部、右侧、底部和左侧边缘设置内偏移来确定。如果边框图片的宽度大于(由 border-width 设置的)边框本身的宽度,则边框图片将溢出边框边界,渗入框的内边距和内容区域。

可能的值

描述示例
[length]顶部、右侧、底部和左侧偏移量。不应为负值。10px
[percentage]顶部、右侧、底部和左侧偏移量。相对于边框图片区域计算。不应为负值。25%
[数字]顶部、右侧、底部和左侧偏移量。是计算出的边框宽度的倍数。不应为负值。1.2
auto顶部、右侧、底部和左侧偏移量。相当于对应 border-image-slice 的宽度。如果此值不适用,则相当于边框宽度。
[值] [值]第一个值为顶部和底部偏移量。第二个值为右侧和左侧偏移量。25% 10%
[值] [值] [值]第一个值为顶部偏移量。第二个值为右侧和左侧偏移量。第三个值为底部偏移量。1.2 0.8 0.5
[值] [值] [值] [值]第一个值为顶部偏移量。第二个值为右侧偏移量。第三个值为底部偏移量。第四个值为左侧偏移量。5px 10px 15px 20px
inherit

示例


aside {
    border: 10px solid fuchsia;
    border-image-source: url("fluffy.png");
    border-image-width: 5px;
}
/* - Sets "fluffy.png" as the border image on a 10-pixel wide border with a solid fuchsia-colored fallback.
   - The border image is painted in the outer 5 pixels of the border area. */

浏览器支持

Can I Use border-image? 来自 caniuse.com 的关于 border-image 功能在主流浏览器中的支持情况的数据。