CSS border-image-outset 属性值说明
| 值 | 说明 |
|---|---|
| length | 指定边框图像将显示在距边的距离处。默认值为0。 |
| number | 边框图像的大小从元素相应边框宽度的倍数开始。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
border-image-outset: length | number | initial | inherit;
border-image-outset 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/bg.jpg");
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 10px 0 15px;
}
</style>
</head>
<body>
<h2>Border-image-outset 属性示例</h2>
<p class="border">Hello World!</p>
<p>Here is the oroirnal image:</p>
<img src="/bg.jpg" alt="Border Image" style="width:50%">
</body>
</html>
CSS border-image-outset 属性指定边框图像超出元素边框的量。
它是 CSS3 属性之一。
border-image-outset 属性取一到四个值。
- 当指定一个值时，它指定所有四个起点。
- 当指定两个值时，第一个指定顶部和底部的起点，第二个指定右侧和左侧的起点。
- 当指定三个值时，第一个指定顶部开始，第二个指定左右开始，第三个指定底部开始。
- 当指定四个值时，开始按顺序设置在顶部、右侧、底部和左侧。
| 初始值 | 0 |
|---|---|
| 应用于 | 所有元素，除了边框折叠为“collapse”时的内部表元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.borderImageStart=“20px”； |
日期：2020-06-02 22:14:18 来源：oir作者：oir