实现圆角的两种方式

最新推荐文章于 2021-02-18 11:28:27 发布

weixin_30293135

最新推荐文章于 2021-02-18 11:28:27 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lch880/archive/2010/03/12/1684090.html

本文介绍两种使用CSS实现圆角的方法：一是通过背景图片与css-sprites技术拼合小圆角；二是采用纯CSS代码实现圆角效果。第一种方法适用于需要高度定制化的场景，而第二种方法则更加简洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：用背景图片利用css-sprites技术把4个小圆角拼合到一张小图里

图片：

css：

代码

.box{border:1px solid #069; position: relative;}
.tl,.tr,.bl,.br{width:6px; height:6px; display:inline-block; position:absolute; background:url(images/bg_co1.gif);}
.tl{top:-1px; left:-1px;}
.tr{top:-1px; right:-1px; background-position:0 -6px;}
.bl{bottom:-1px; left:-1px; background-position:0 -12px;}
.br{bottom:-1px; right:-1px; background-position:0 -18px;}

Dom：

<div class="box">
<span class="tl"></span><span class="tr"></span>
<div class="main">
<p>这里是主要内容</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>

第二种：利用纯css实现圆角

css：

代码

.box{
    width:300px;
}
.box .b1,.box .b2,.box .b3,.box .b4,.box .b5,.box .b6,.box .b7,.box .b8{
    height:1px;overflow:hidden; display:block;
}
.box .b1,.box .b8{
    background:#dedede;
    margin:0 5px;
}
.box .b2,.box .b7{
    background:#fff;
    margin:0 3px;
    border-left:2px solid #dedede;
    border-right:2px solid #dedede;
}
.box .b3,.box .b6{
    background:#fff;
    margin:0 2px;
    border-left:1px solid #dedede;
    border-right:1px solid #dedede;
}
.box .b4,.box .b5{
    background:#fff;
    margin:0 1px;
    border-left:1px solid #dedede;
    border-right:1px solid #dedede;
}

.maintxt{
    border-left:1px solid #dedede;border-right:1px solid #dedede;background:#fff; height:300px;
}

DOM：

代码