为了追求美观,网页UI设计师通常喜欢运用圆角边框来修饰页面中枯燥的文字内容,而我们在切图时,传统的做法便是将边框作为背景切成三部分,然后在页面中至少需要加载两个图片,以此来达到效果图的版面。效果是达到了,就是有些费事,今天就分享一个只用div+css即可实现圆角边框的方法:
HTML:
</c class=”jiao4″>
纯DIV+CSS实现圆角边框
</c class=”jiao1″>
CSS:
.jiao1,.jiao2,.jiao3,.jiao4,.jiao{display:block;overflow:hidden;}
.jiao2,.jiao3,.jiao4,.jiao{border-left:1px solid #666;border-right:1px solid #666;}
.jiao1,.jiao2,.jiao3{height:1px;}
.jiao1{margin:0 4px;background:#666; width:194px;}
.jiao2{margin:0 3px; width:194px;}
.jiao3{margin:0 2px; width:196px;}
.jiao4{height:2px;margin:0 1px; width:198px;}
.box {height:100px; width:200px; text-align:center; padding-top:30px; color:#9C0;}
.box span {font-size:26px; font-family:’微软雅黑’;}
好了,就这么简单,大家将上面代码复制到html文档里就可以得到我上面附图的效果啦,当然中间有些参数是可以自行更改的哦,找找规则吧~~