DecImage.com » CSS实例：纯代码圆角边框

<!– 前端技术学习笔记 –>

这次学习的站点是Qunar.com，他们的前端代码一直挺欣赏的，很多新技术都会拿来尝试。

传统的圆角边框因为代码繁琐，结构复杂，或者背景图像、边角图片处理复杂，修改起来也很困难，所以也算制作人员比较头疼的一个地方。

其实简易的圆角边框完全可以不用图片，用简单的代码来实现。这样的好处也显而易见，比如无需图片，易修改，易删除，维护起来很方便等等。

怎么实现呢？说起来很简单，就是在内容块div的上下各加一些1px高的div，通过背景颜色和左边距的处理使其呈现圆角效果。

来做一个简单的例子吧。

先来看结构：

<div class="wrapper">
    <div class="t2"></div>
    <div class="t1"></div>
    <div class="content">
        <h1>圆角边框实例</h1>
        <p>通过上下的四个1像素div打造简洁易维护的圆角边框。</p>
    </div>
    <div class="b1"></div>
    <div class="b2"></div>
</div>

接着是呈现：

.wrapper {width:240px;}
.t1, .t2, .b1, .b2 {
    border-left:1px solid #D1D1D1;
    border-right:1px solid #D1D1D1;
    height:1px;
    overflow:hidden;
}
.t2, .b2 {
    background-color:#D1D1D1;
    margin:0 2px;
}
.t1, .b1 {
    background-color:#FFFFFF;
    margin:0 1px;
}
.content {
    background-color:#FFFFFF;
    border-left:1px solid #D1D1D1;
    border-right:1px solid #D1D1D1;
}
.content h1 {
    font-size:16px;
    font-weight:bold;
    line-height:24px;
    border-bottom:1px solid #D1D1D1;
    padding:8px 6px;
}
.content p {
    line-height:24px;
    padding:10px 6px;
}

效果：

是不是很简洁呢？

另外配合其他一些css属性，也能实现一些比较华丽的效果！

比如下面这个例子：

有兴趣可以试一下哦~

CSS实例：纯代码圆角边框

希望得到您的评论

DecImage.com 印象十二月遥记那一季西部行

2条评论

> 推荐两本看过的书

>友情链接