Rumah > Artikel > hujung hadapan web > CSS3 border-image-outset属性怎么用？
CSS3 border-image-outset属性怎么用？
- 青灯夜游asal
- 2019-02-12 13:49:433366semak imbas
border-image-outset属性用于指定在边框外部绘制 边框图像区域的量，即边框图像超过边框盒的量。
CSS3 border-image-outset 属性
作用：规定边框图像超过边框盒的量。
语法：
border-image-outset: length|number;
length：表示设置边框图像（border-image）与边框的距离，默认为0。
number：代表相应的 border-width 的倍数。
说明：
1、border-image-outset 属性规定边框图像超出边框盒的量，包括上下部和左右部分。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。
2、border-image-outset属性不允许使用任何负值。
CSS3 border-image-outset 属性的使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
width: 600px;
margin: 100px auto;
border: 1px solid red;
}
p{
border:15px solid;
padding: 30px;
border-image:url(1.jpg) 100 round;
border-image-outset: 1px 10px 8px;
}
</style>
</head>
<body>
<div class="box">
<p>PHP中文网</p>
</div>
</body>
</html>效果图：
没有添加border-image-outset属性：
添加border-image-outset属性后：
Atas ialah kandungan terperinci CSS3 border-image-outset属性怎么用？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS文件中如何引入另一个CSS文件？（代码示例）Artikel seterusnya：border-image-repeat属性怎么用