完美的纯CSS圆角

最新推荐文章于 2025-04-08 23:00:45 发布

bennman

最新推荐文章于 2025-04-08 23:00:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML CSS 文章标签： css class iis html 工作 div

本文链接：https://blog.youkuaiyun.com/bennman/article/details/4535095

HTML CSS 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现圆角效果的方法，避免了使用图片带来的额外资源消耗。通过巧妙设置不同元素的边框和间距，可以轻松创建平滑的圆角效果。

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

记得以前还在学校以及刚出来工作的时候，WEB1.0风格的网站别说圆角了，就连图片都是一大版一大版的。后来渐渐改进了些，切一个小角当背景图来做圆角，不管怎么说，只要用到图片的话，怎么说都浪费掉了一个IIS链接数（关于这个以后讲解），而用纯CSS来做圆角，不仅效果不比图片差，而且代码也并不复杂。

关于用CSS画圆角的原理，我们先把一个圆角给放大了来看，就很简单明了了。

这是一个5像素的圆角，我们可以看到每个像素只是水平边距不同，那么我们的样式可以这样写：

<mce:style></mce:style><style mce_bogus="1">div {height:100px; border-right:1px solid #000; border-left:1px solid #000;} b {display:block; overflow:hidden; height:1px;} .b1 {background:#000; margin:0 5px;} .b2 {border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;} .b3 {border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;} .b4 {border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}</style>

这是用b标签来当做圆角的转角，当然，理解了原理之后，可以延伸出多种的圆角。
在html页面里这样写就可以了：