CSS border-image-outset 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

border-image-outset是 CSS 中用于控制边框图像向外扩展的属性，它定义了边框图像区域超出边框盒的量。

border-image-outset需要与border-image-source和border-image-slice等边框图像属性一起使用。

border-image-outset不会影响布局，扩展的部分会绘制在其他内容之上

默认值：	0
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderImageOutset="10px"Demo ❯

演示实例

下面通过演示实例，让你更直观地了解border-image-outset属性的用法。

实例代码运行代码

复制

.example {
    border-image-source: url(border.png)
                            
    /* 所有边扩展 10px */
    border-image-outset: 10px;

    /* 上下边扩展 1em，左右边扩展 2em */
    border-image-outset: 1em 2em;

    /* 上边扩展 10px，左右边扩展 20px，下边扩展 30px */
    border-image-outset: 10px 20px 30px;

    /* 上边扩展 10px，右边扩展 0，下边扩展 15px，左边扩展 5px */
    border-image-outset: 10px 0 15px 5px;

    /* 使用数字（边框宽度的倍数） */
    border-image-outset: 1; /* 1倍边框宽度 */
    border-image-outset: 0.5 1; /* 上下0.5倍，左右1倍 */
}

CSS 语法

border-image-outset: length|number|initial|inherit;

属性值

值	描述
`length`	一个长度单位，用于指定边框图像从边缘向外延伸的距离（默认值为 0）。
`number`	表示对应边框宽度（`border-width`）的倍数。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。