给盒子添加花样边框的方法

这两天做项目遇到一个需要给盒子添加不同边框的需求,因此自己研究了一下,先上图看看成品的样子

给盒子添加花样边框的方法_第1张图片

在没仔细想的时候,我用的是分开切图的方法,然后分别设置,最后发现不对,达不到想要的效果。

之后仔细研究了border-image,发现了一个以前没注意过的属性,border-image-slice。

下面上代码

border: 8px solid #153b4f;
	border-image: url(../img/pic/border.png) 100% 8 0 stretch;
	border-image-slice: 10 fill;
这个就是设置的这个border的样式,然后在看页面上,盒子的边框就是自己想要的效果了,小伙伴们可以自己试试


你可能感兴趣的:(学习学习)