纯DIV+CSS实现圆角边框

为了追求美观,网页UI设计师通常喜欢运用圆角边框来修饰页面中枯燥的文字内容,而我们在切图时,传统的做法便是将边框作为背景切成三部分,然后在页面中至少需要加载两个图片,以此来达到效果图的版面。效果是达到了,就是有些费事,今天就分享一个只用div+css即可实现圆角边框的方法:

HTML:

<div>

<c class="jiao1"></c><c class="jiao2"></c><c class="jiao3"></c><c class="jiao4"></c>

<div class="box jiao">

<span>纯DIV+CSS实现圆角边框</span>

</div>

<c class="jiao4"></c><c class="jiao3"></c><c class="jiao2"></c><c class="jiao1"></c>

</div>

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文档里就可以得到我上面附图的效果啦,当然中间有些参数是可以自行更改的哦,找找规则吧~~

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP