不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形_html/css

不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:20:52

原创

1716人浏览过

现在css3支持圆角矩形，但是为了兼容性问题，虽然比较麻烦，但还是有必要了解一下以下方法。

在一个div内，包含8个div，控制这个8个div的height、margin以及border属性值，以达到圆角矩形效果,不过要注意div的顺序。

html代码：

<body>  <div class="bor">    <div class="b1"></div>    <div class="b2"></div>    <div class="b3"></div>    <div class="b4"></div>  </div>  <div class="mid">    <p>不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1989">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679968212304.png" alt="AppMall应用商店">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1989">AppMall应用商店</a>
                            <p>AI应用商店，提供即时交付、按需付费的人工智能应用服务</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AppMall应用商店">
                                <span>56</span>
                            </div>
                        </div>
                        <a href="/ai/1989" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AppMall应用商店">
                        </a>
                    </div>
                  </div>  <div class="bor">    <div class="b4"></div>    <div class="b3"></div>    <div class="b2"></div>    <div class="b1"></div>  </div></body>

登录后复制

css代码：

.bor div { height: 1px; }  .b1 {    margin: 0 3px;    background-color: black;   }  .b2,  .b3,  .b4,  .mid {    border-left: 1px solid black;    border-right: 1px solid black;  }  .b2 {    margin: 0 2px;  }  .b3 {    margin: 0 1px;  }  .b4 {    margin: 0 1px;  }.mid p {  margin: 0;  padding:0 10px;  font-size: 12px;  line-height: 24px;  white-space: pre-wrap;}

登录后复制