CSS border-image 属性

主题

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

定义和用法

border-image是 CSS 中用于创建复杂边框的属性，它允许你使用图像作为元素的边框。

border-image在使用时，需要同时设置border-style或border-width以确保有足够的空间显示边框图像。

默认值：	none 100% 1 0 stretch
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderImage="url(border.png) 30 round"Demo ❯

演示实例

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

实例代码运行代码

复制

#round {
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image: url(border.png) 30 round;
}

#stretch {
    -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
    -o-border-image:url(border.png) 30 30 stretch; /* Opera */
    border-image: url(border.png) 30 stretch;
}

CSS 语法

border-image: source slice width outset repeat|initial|inherit;

属性值

值	描述
border-image-source	用作边框的图片路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)、拉伸(stretch)或分散平铺(space)。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。