CSS3 border-image-repeat 属性
CSS3 border-image-repeat 属性
CSS3 border-image-repeat 属性定义了用于边框图像的平铺方式。可以使用一些关键字和属性值作为背景图像的平铺方式。它是用于定义元素边界的图像,其支持图像的翻转和平铺。边框图像可以完全或部分地替代边框样式,使得网页设计可以更加灵活和美观。
语法
border-image-repeat: value;
属性值
CSS3 border-image-repeat 属性包括下列值:
stretch(默认)
将背景图像伸展来铺满整个边界
border-image-repeat: stretch;
repeat
在边框内连续平铺背景图像
border-image-repeat: repeat;
round
平铺背景图像,并将其调整到尺寸合适
border-image-repeat: round;
space
平铺背景图像并调整其与边界的间隔
border-image-repeat: space;
示例
在下面示例中,我们定义一个类名为border-image,它的边框用到了一张图片,图片被设为铺满整个边界。同时,根据值不同,我们可以看到其对应的效果。
.border-image {
border-width: 20px;
border-style: solid;
border-image-source: url(border.png);
/*不同的 repeat 值*/
border-image-repeat: stretch;
/*border-image-repeat: repeat;*/
/*border-image-repeat: round;*/
/*border-image-repeat: space;*/
}
总结
CSS3 border-image-repeat 属性提供了四种平铺方式,可以让网页设计者更加灵活的来设置元素边界的图像。不同的平铺方式可以在视觉上产生不同的效果,应该根据实际需求来选择合适的值。值得注意的是,如果边框宽度很粗,图片中的图案也会被边框留白三分之一的距离。