[分享]css3图片价外边线

CSS3的出现为网页的美化提供了无限可能，其中图片的外边线样式得到了大大的提升，具体可以通过以下代码进行实现：img{ border: 2px solid black; webkitborderima...

CSS3的出现为网页的美化提供了无限可能，其中图片的外边线样式得到了大大的提升，具体可以通过以下代码进行实现：

img{
    border: 2px solid black;
    -webkit-border-image: url(border.png) 30 30 repeat;
    -o-border-image: url(border.png) 30 30 repeat;
    -moz-border-image: url(border.png) 30 30 repeat;
    border-image: url(border.png) 30 30 repeat;
} 

上述代码通过使用border-image属性来设置图片的外边线样式，其中，url(border.png)指定了图片的路径，30 30指定了在平铺过程中图片的拉伸区域的大小，repeat则是指定了平铺的方式。另外，-webkit、-o、-moz则是CSS3的浏览器前缀，以保证代码的兼容性。这样，我们就可以让图片的外边线变得更加美观了。