Blog

纯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

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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