CSS边框图像属性用于将图片边框添加到某些元素.您不需要使用任何HTML代码来调用边框图像.边框图像的示例语法如下 :
#borderimg {
border: 10px solid transparent;
padding: 15px;
}最常用的值显示如下 :
| Sr.No. | Value&说明 |
|---|---|
| 1 | border-image-source 用于设置图像路径 |
| 2 | border-image-slice 二手切割边界图像 |
| 3 | border-image-width 用于设置边框图像宽度 |
| 4 | border-image-repeat 用于将边界图像设置为四舍五入，重复和拉伸 |
以下是将图像设置为元素边框的示例.
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 20px;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style>
</head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg2">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body>
</html>
