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

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

网页是由边框架构而成,边框为网页元素找到合适的地方,却又不束缚元素的特点备受网页设计者的喜爱,目前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 可变高


  • 10
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 16
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值