定义和用法
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。 |
浏览器支持
表中的数字指定了完全支持border-image
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
16.0 4.0 -webkit- |
11.0 | 15.0 3.5 -moz- |
6.0 3.1 -webkit- |
15.0 11.0 -o- |
相关页面
CSS 教程:CSS 边框图像
CSS 参考手册:CSS border-image-source 属性
CSS 参考手册:CSS border-image-slice 属性
CSS 参考手册:CSS border-image-width 属性
CSS 参考手册:CSS border-image-outset 属性
CSS 参考手册:CSS border-image-repeat 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
87
章节
21
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈