主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

定义和用法

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

border-image-outset需要与border-image-sourceborder-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 浏览器 EDGE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
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 评论
教程目录

CSS 参考手册

CSS 属性(字母排序) CSS 属性(功能排序) CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 可动画性 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值

CSS 属性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size block-size border border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end-end-radius border-end-start-radius border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-inline border-inline-color border-inline-end border-inline-end-color border-inline-end-style border-inline-end-width border-inline-start border-inline-start-color border-inline-start-style border-inline-start-width border-inline-style border-inline-width border-left border-left-color border-left-style border-right-style border-top-left-radius border-top-right-radius border-top-style