3. 将第二个 DIV 挪到边界上, 使它能与页面背景连接, 这样看上去就像一个缺角的框框.
4. 在第二个 DIV 内画第三个 DIV, 在这里其实就是一点.
5. 将第三个 DIV 挪到右下角的位置, Done.
主要步骤讲解了以后来看一个完整的例子:
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 {










