[分享]css中border背景图

CSS中border属性可以让边框更加多样化，而其中的border-image属性可以让边框的背景图更加炫酷。

.box{
	  border-width: 20px;
	  border-style: solid;
	  
	  border-image-source: url('border.png');
	  border-image-slice: 20;
	  border-image-repeat: repeat;
	} 

上面的代码给一个具有20px的宽度和实心的边框添加了一个背景图，背景图的路径为border.png。border-image-slice属性的值为20，意味着图像的边缘都被切割到了20px的宽度。而repeat值意味着图像被复制以填满整个边框。

.box{
	  border-width: 20px;
	  border-style: solid;
	  
	  border-image-source: url('border.png');
	  border-image-slice: 20;
	  border-image-outset: 10px;
	  border-image-repeat: repeat;
	} 

上面的代码中，border-image-outset属性值为10，代表背景图像被放置在边框背景之外。这是一个有趣的技巧，可以让背景图像从边框的中心向外延伸。

综上，使用CSS的border-image属性可以让网页边框更加美观和独特。