CSS圆角边框制作指南与实例

2020-05-05 07:29:36易采站长站整理

3. 将第二个 DIV 挪到边界上, 使它能与页面背景连接, 这样看上去就像一个缺角的框框.
2016310115347263.png (192×128)

4. 在第二个 DIV 内画第三个 DIV, 在这里其实就是一点.
2016310115403607.png (192×128)

5. 将第三个 DIV 挪到右下角的位置, Done.
2016310115420989.png (192×128)

主要步骤讲解了以后来看一个完整的例子:

CSS Code复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
  
<html xmlns="http://www.w3.org/1999/xhtml">   
<head profile="http://gmpg.org/xfn/11">   
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
 <title>纯 CSS 打造圆角</title>   
  
 <style>   
<!–   
body {   
 padding-top:200px;   
}   
  
/* 框 */  
#sg-feedback {   
 background:#EFF7CE;   
 border:1px solid #9ECD62;   
 font-size:12px;   
 margin:0pt auto;   
 text-align:center;   
 width:200px;   
}   
#sg-feedback div .dot {   
 background:#9ECD62;   
}   
#sg-feedback .inner {   
 margin:5px 0pt;   
}   
  
/* 上边角 */  
.yshp_rnd .rnd_top * {   
 display:block;   
 background:#FFFFFF;   
 overflow:hidden;   
}   
.yshp_rnd .rnd_top * * {   
 background:#DE650A;   
}   
.yshp_rnd {   
 position:relative;   
}   
.yshp_rnd .rnd_top .west {   
 position:absolute;   
 height:2px;   
 left:-1px;   
 top:-1px;   
 width:2px;   
}   
.yshp_rnd .rnd_top .west .dot {   
 position:relative;   
 height:1px;   
 left:1px;   
 top:1px;   
 width:1px;   
}   
.yshp_rnd .rnd_top .east {