CSS中border属性可以让边框更加多样化,而其中的border-image属性可以让边框的背景图更加炫酷。.box{ border-width: 20px; border-style: solid
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属性可以让网页边框更加美观和独特。
粉丝
0
关注
0
收藏
0