CSS打造圆角效果

最新推荐文章于 2025-08-09 10:13:28 发布

原创最新推荐文章于 2025-08-09 10:13:28 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML

本文介绍了一种使用CSS实现圆角效果的方法，通过设置不同高度和边距的块元素堆叠来模拟圆角形状，避免使用图片，简化网页加载。

CSS打造圆角效果

2010-11-26 13:22

一直都希望是通过CSS来实现圆角的效果，而不是通过图片来做，找了很久，这个方法还比较简单，代码也不至于那么多

<html>
<title>test圆角</title>
<style>
#xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;padding-bottom:0.5em;}
#xsnazzy {background: transparent; margin:25px 1em 100px 1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

/*粉红色的地方是实现圆角的关键*/
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}
</style>
<body>

<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>

<h2>Rounded borders without images</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
<br class="clear" />
</body>

<html>

关键的地方就是其中标注的部分，研究了半天其实CSS实现的圆角效果实际上是通过一个高为1px的块叠加而成的，类似于金字塔的

构造，通过设置每个元素的margin:xx 0;就可以达到在左右两端都同时进行缩进，不同的块缩进的像素不同就导致会在视觉上达到一种类似

曲线的效果，当然了，这个曲线的弧度需要自己去掌握。