1、border-image边框图片
属性 | 描述 | CSS |
---|---|---|
border-image | 简写属性,设置所有 border-image-* 属性。 | 3 |
border-image-outset | 规定边框图像区域超出边框的量。 | 3 |
border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 | 3 |
border-image-slice | 规定图像边框的向内偏移。 | 3 |
border-image-source | 规定用作边框的图片。 | 3 |
border-image-width | 规定图片边框的宽度。 | 3 |
border-image 定义和用法
border-image 属性是一个简写属性,用于设置以下属性:
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
如果省略值,会设置其默认值。
提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!
2、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 边框图片</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
background-color:blue;
border:20px solid red;
border-image-source: url(../images/border_image_5.png);
border-image-slice: 19;
/*拉伸图像来填充区域*/
/*border-image-repeat: stretch;*/
/*平铺(重复)图像来填充区域。可能与四个角的图像存在重合的部分*/
/*border-image-repeat: repeat;*/
/*如果无法完整平铺所有图像,则对图像进行缩放以适应区域。推荐使用这个值*/
border-image-repeat: round;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用的图片:
显示效果: