用纯div+css实现最简单的圆角处理

最新推荐文章于 2023-09-15 17:42:11 发布

大然Ryan

最新推荐文章于 2023-09-15 17:42:11 发布

阅读量902

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML&CSS 文章标签： div css class

本文链接：https://blog.youkuaiyun.com/kaituozhe345/article/details/7253059

HTML&CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用纯CSS技术实现圆形效果的方法。通过不同层级的块元素叠加并设置特定的边距来模拟圆周率π的概念，整个过程不依赖图片资源，仅通过HTML和CSS即可完成。这种做法可以作为网页设计中的一种轻量级解决方案。

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

这个真的挺简单的，我看了别人的一个例子，发现还可以做得更简单于是就有了下面的代码，供大家分享啊

<html>
<head>
      <title>my first circle example</title>
     <style type="text/css">
        div.d1,div.d2{background:#fff}
        div.d1 b,div.d2 b{background:red;}
        b.a{height:1px; margin: 0 6px; display:block;}
        b.b{height:1px; margin: 0 4px; display:block;}
        b.c{height:1px; margin: 0 3px; display:block;}
        b.d{height:1px; margin: 0 2px; display:block;}
        b.e{height:2px; margin: 0 1px; display:block;}
         
      </style>
</head>
<body>
<div style="background:red">
   <div class="d1">
        <b class="a"></b>
        <b class="b"></b>
        <b class="c"></b>
        <b class="d"></b>
        <b class="e"></b>
   </div>
<br>
   <div class="d2">
        <b class="e"></b>
        <b class="d"></b>
        <b class="c"></b>
        <b class="b"></b>
        <b class="a"></b>
   </div>
</div>
</body>
</html>