圆角div的实现方式

最新推荐文章于 2022-07-25 17:47:01 发布

zsuantou

最新推荐文章于 2022-07-25 17:47:01 发布

阅读量118

点赞数

分类专栏：前端@html+css 文章标签： CSS XHTML HTML XML

本文链接：https://blog.csdn.net/zsuantou/article/details/83644124

版权

前端@html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下方式都是从网上搜集转载的，有的出处已经忘记了，如果有不当之处，请见谅。

方式一

利用margin形成元素的缩进，优点是不用加载额外的图片，缺点很明显，如果网页中有大量的地方需要用到圆角，那必然造成html的冗长，代码重复，不易修改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-cn" >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css圆角</title>
    <style type="text/css">
    .b1, .b2, .b3, .b4, .b1b, .b2b, .b3b, .b4b, .b {
      display:block;
      overflow:hidden;
    }
    .b1, .b2, .b3, .b1b, .b2b, .b3b {
      height:1px;
    }
    .b2, .b3, .b4, .b2b, .b3b, .b4b, .b {
      border-left:1px solid #999;
      border-right:1px solid #999;
    }
    .b1, .b1b {
      margin:0 5px;
      background:#999;
    }
    .b2, .b2b {
      margin:0 3px;
      border-width:2px;
    }
    .b3, .b3b {
      margin:0 2px;
    }
    .b4, .b4b {
      height:2px;
      margin:0 1px;
    }
    .d1 {
      background:#F7F8F9;
    }
    </style>
  </head>
  <body>
    <div> 
      <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
      <div class="b d1"> 圆角设计 </div>
      <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b> 
    </div>
  </body>
</html>

方式二

zsuantou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圆角div的实现方式

以下方式都是从网上搜集转载的，有的出处已经忘记了，如果有不当之处，请见谅。方式一利用margin形成元素的缩进，优点是不用加载额外的图片，缺点很明显，如果网页中有大量的地方需要用到圆角，那必然造成html的冗长，代码重复，不易修改。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
复制链接

扫一扫