HTML Dog
跳至导航

CSS 属性:border-image-outset

边框图像的边缘溢出。边框图像可以超出边框区域边缘的程度。

通过从边框的顶部、右侧、底部和左侧边缘建立偏移量来设置,将绘制区域向外推。任何超出标准边框区域的边框部分都不会影响周围的任何内容——它不会将另一个框从其初始位置推开,不会触发滚动,也不会响应鼠标事件。

可能的值

描述示例
[length]顶部、右侧、底部和左侧偏移量。不应为负数。10px
[数字]顶部、右侧、底部和左侧偏移量。计算出的边框宽度的倍数。不应为负数。1.2
[值] [值]第一个值为顶部和底部偏移量。第二个值为右侧和左侧偏移量。5px 10px
[值] [值] [值]第一个值为顶部偏移量。第二个值为右侧和左侧偏移量。第三个值为底部偏移量。1.2 0.8 0.5
[值] [值] [值] [值]第一个值为顶部偏移量。第二个值为右侧偏移量。第三个值为底部偏移量。第四个值为左侧偏移量。5px 10px 15px 20px
inherit
initial
unset

示例


aside {
    border: 10px solid fuchsia;
    border-image-source: url("fluffy.png");
    border-image-outset: 0.5;
}
/* - Sets "fluffy.png" as the border image on a 10-pixel wide border with a solid fuchsia-colored fallback.
   - The border is pushed outwards, overhanging the border edge, by 50% of the border width. */

浏览器支持

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