给网页化妆—圆滑舒适的圆角框

给网页化妆—圆滑舒适的圆角框

网页是由边框架构而成，边框为网页元素找到合适的地方，却又不束缚元素的特点备受网页设计者的喜爱，目前CSS+DIV的结合，为网页支撑起了骨架和外皮，相对于代码实现，较有先声夺势的感觉。

网页上那些直楞楞的边框容易给人一种拘束的感觉，为了增强UI的亲和性，有些网站运用了浅色系边框甚至是无边框使其达到若有若无的效果，或者将边框修改为圆角框的方法。下面的博客具体学习一下可变宽度的圆角框，和可变高度的圆角框，为了提高圆角框的可复用性，这两种方法极受欢迎。

?可变宽度的圆角框

l 准备图片

截一张漂亮的圆角框图

如：

在PS里处理该图，用切片工具将图片分成5部分。如：

将这五部分图用清晰的名称命名放在images文件夹中。

l 划分模块

如代码：

 <div id="left" class="round">        <div class="top">             </div>        <div class="middle">            <p>                小圆角框欢迎您</p>        </div>        <div class="bottom">            <p>                 </p>        </div>    </div>

l 配图

让div.round 获取左上角的图片背景，div.top获取右上角的图片背景，div.middle获取右中部分的图片背景并在Y轴方向平铺，div.bottom获取左下角的图片背景，让div.bottom中的p标签获取右下角的背景图片。这样就构成了一个完整的圆角框了。具体CSS样式如下：

/*-----------------------匹配所有的标签--------------------*/*{    padding: 0;    margin: 0 auto;    text-align: center;}/*-----------------------设置背景颜色--------------------*/body{    font-size: 12px;    background-color: #fdfff9;}/*-----------------------设置圆角框左上角的背景图--------------------*/.round{    background-image: url(images/round_left_top.gif);    background-repeat: no-repeat;    background-position: top left;}/*-----------------------设置圆角框右上角的背景图--------------------*/.round .top{    background-image: url(images/round_right_top.gif);    background-repeat: no-repeat;    background-position: top right;    height: 44px;}/*-----------------------设置圆角框右中部分的背景图--------------------*/.round .middle{    background-image: url(images/round_right_middle.gif);    background-position: top right;    background-repeat: repeat-y;}/*-----------------------设置圆角框左下角的背景图--------------------*/.round .bottom{    background-image: url(images/round_left_bottom.gif);    background-position: bottom left;    background-repeat: no-repeat;}/*-----------------------设置圆角框右下角的背景图--------------------*/.round .bottom p{    background-image: url(images/round_right_bottom.gif);    background-position: bottom right;    background-repeat: no-repeat;    height: 13px;}/*-----------------------设置小圆角框的大小--------------------*/#left{    width: 180px;    margin: 100px auto;}/*-----------------------设置大圆角框的大小--------------------*/#right{    margin: 100px auto;    width: 700px;    height: auto;}/*-----------------------设置字体--------------------*/#right .middle p{    text-align: center;    font-size: 20px;    font-family: 华文行楷;}

l 可变宽

样式展示：

? 可变高度的圆角框

l 方法

同上面的方式类似，但是只需利用上面图片取两部分：

中间的Div.middle处理其左右边框的颜色，其颜色为摄取的上下两部分背景图的边框颜色。因此，左右边框的颜色不变，中间的div就可以任意变大变小了。具体的代码就不贴了，请大家自己尝试。

中间区域的CSS样式

    background-color: #fffaef;    border-left: #ffc287 1px solid;    border-right: #ffc287 1px solid;

l 可变高

4楼xknet123昨天 08:50

切图不合理

Re: jyhye昨天 11:07

回复xknet123n嗯嗯，谢谢，会继续改进的

3楼xiaoxian8023昨天 08:06

活字印刷术呀

Re: jyhye昨天 08:20

回复xiaoxian8023n嘿嘿，傻样

2楼llhhyy1989前天 14:37

自己切图，真帅气

Re: jyhye前天 14:37

回复llhhyy1989n嘻嘻

1楼zhangye900831前天 08:21

师姐加油

Re: jyhye前天 11:13

回复zhangye900831n好的，嘿嘿