当前位置：Gxlcms > html代码 > 不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形-jimmie.Mr

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

时间：2021-07-01 10:21:17 帮助过：50人阅读

现在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>
  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;
}

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

人气教程排行