css把边框设置图片 |css3 3d图片轮播

在CSS中，大家可以使用预设的简单边框样式，例如solid、dotted、dashed等等。但是预设的边框样式通常是比较简单的，如果大家希望在网页中使用更加独特的边框样式，大家就可以使用图片来设置边框。下面大家来看一下如何使用CSS把边框设置成图片。

.border {
border: 15px solid transparent;
padding: 10px;
background-clip: content-box;
transition: border-image 0.5s ease;
-moz-transition: border-image 0.5s ease;
-webkit-transition: border-image 0.5s ease;
}
.border:hover {
border-image: url(border.png) 27 stretch;
}

上述代码中，大家首先定义了一个名为border的class，这个class用于设置大家要进行边框设置的元素。接着，大家使用border属性来设置边框的宽度、样式和颜色等基本属性，这里设置的值是solid和transparent，solid表示实线，transparent表示边框本身是透明的。

大家接下来使用padding属性来设置元素的内边距，这是因为大家使用的是背景裁剪（background-clip）属性，大家希望边框设置的是背景或者说内容，而不是border本身。在这里大家使用了content-box，表示剪裁边框内部的背景或内容（不包括边框在内）。

最后，大家通过transition和-moz-transition和-webkit-transition属性设置了鼠标悬浮时边框的变化效果。当鼠标在元素上悬浮时，大家使用border-image属性来设置边框的图片源和填充方式。这里大家使用了border.png作为边框图片，并设置了stretch填充方式，表示将图片拉伸以适应边框。

通过上述代码，大家成功地使用CSS把边框设置成了图片，并且还实现了鼠标悬浮时边框图片的变化效果。希望本文能够帮助你更好地理解CSS中的边框设置方法。