“他爱你”博客

在前端开发的代码中，如何用网站标准实现圆角的样式，其实分两种情况，一种就是四周都可以扩展，一种是固定宽度，竖向扩展的，但四周都可以扩展的要嵌套4层div，这样代码显得太复杂，易读性和后续的解析速度都大打折扣。所以一般用固定宽度的。

四周都可以扩展的代码：

效果图：

.tl {
background-image: url(img/tl.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #960001;
}
.tr {
background-image: url(img/tr.jpg);
background-repeat: no-repeat;
background-position: right top;
}
.bl {
background-image: url(img/bl.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
.br {
background-image: url(img/br.jpg);
background-repeat: no-repeat;
background-position: right bottom;
padding: 20px;
}
–>
</style>
————————————————
<div class=”tl”>
<div class=”tr”>
<div class=”bl”>
<div class=”br”>
这里是内容
</div>
</div>
</div>
</div>

竖向的也就是把圆角图形切割上面一块下面一条，然后用3个div组织就可以了。代码这里就不写了。

原创文章，欢迎转载，转载请注明转载自：http://www.taaini.com/web/coner-design-divcss.html