使用CSS3,可以将图像应用于元素的边框上。
CSS3提供了两个新属性,用于以更加优雅的方式对元素的边框进行样式设置- border-image用于将图像添加到边框的border-radius属性,以及用于在不使用任何图像的情况下制作圆角的属性。
下一节将向您介绍CSS3的这些新边框属性,有关其他与边框相关的属性,请查看CSS边框教程。
该border-radius属性可用于创建圆角。此属性通常定义外边界边缘的角的形状。在CSS3之前,切片图像用于创建相当麻烦的圆角。
.box { width: 300px; height: 150px; background: #ffb6c1; border: 2px solid #f08080; border-radius: 20px; }测试看看‹/›
border-image属性允许您指定图像以用作元素的边框。
边框的设计是从border-image源URL中指定的图像的侧面和角落创建的。可以以各种方式对边界图像进行切片,重复,缩放和拉伸以适合边界图像区域的大小。
.box { width: 300px; height: 150px; border: 15px solid transparent; -webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */ -o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */ border-image: url("border.png") 30 30 round; }测试看看‹/›
提示:圆形选项是重复选项的一种变体,它以使两端连接得很好的方式分布图像块。