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