border-image-outset
border-image-outset CSS 属性设置元素边框图片从其边框盒向外延伸的距离。
通过 border-image-outset 在元素边框盒外部渲染的边框图片部分不会触发溢出滚动条，也不会捕获鼠标事件。
试一试
border-image-outset: 0;
border-image-outset: 15px;
border-image-outset: 30px;
border-image-outset: 40px;
<section id="default-example">
<div id="example-element">This is a box with a border around it.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: black;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
语法
css
/* <length> value */
border-image-outset: 1rem;
/* <number> value */
border-image-outset: 1.5;
/* top and bottom | left and right */
border-image-outset: 1 1.2;
/* top | left and right | bottom */
border-image-outset: 30px 2 45px;
/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;
/* Global values */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;
border-image-outset 属性可以指定一个、两个、三个或四个值。每个值都是一个 <length> 或 <number>。负值无效，会导致 border-image-outset 声明被忽略。
- 如果指定了一个值，则应用于所有四个边。
- 如果指定了两个值，则第一个应用于顶部和底部，第二个应用于左侧和右侧。
- 如果指定了三个值，则第一个应用于顶部，第二个应用于左侧和右侧，第三个应用于底部。
- 如果指定了四个值，它们依次（顺时针）应用于顶部、右侧、底部和左侧。
值
<length>-
border-image外延尺寸——一个带单位的数值。 <number>-
border-image外延尺寸，作为元素相应border-width的倍数。例如，如果一个元素的border-width: 1em 2px 0 1.5rem，并且border-image-outset: 2，那么最终的border-image-outset将被计算为2em 4px 0 3rem。
正式定义
| 初始值 | 0 |
|---|---|
| 应用于 | 所有元素，但在 border-collapse 为 collapse 时，内部表格元素除外。该属性也适用于 ::first-letter。 |
| 继承性 | 否 |
| 计算值 | 按指定值，但相对长度会转换为绝对长度。 |
| 动画类型 | 按计算值类型 |
正式语法
border-image-outset =
[ <length [0,∞]> | <number [0,∞]> ]{1,4}
示例
外延边框图像
HTML
html
<div id="outset">This element has an outset border image!</div>
CSS
css
#outset {
width: 10rem;
background: #cceeff;
border: 1.4rem solid;
border-image: radial-gradient(#ffff22, #5555ff) 40;
border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */
margin: 2.1rem;
}
结果
规范
| 规范 |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-outset |
浏览器兼容性
加载中…
另见
- 背景和边框
- 学习 CSS：背景和边框
- MDN 博客上的《CSS 中的边框图像：Interop 2023 的一个重点关注领域》（2023 年）