边框半径不依赖于高度和宽度

Question

我需要一个 border-radius 规则，无论元素的大小（高度）是多少，该元素都将被四舍五入。

这是我的例子：

<div class="container">

  <div class="element first"></div>
  <div class="element sec"></div>
  <div class="element third"></div>
</div>


$blue: #0084ff;

.container {
  display: flex;
  flex-flow: column;

  .element {
    background-color: $blue;
    border-radius: 100px;
    width: 500px;
    margin-bottom: 1px;

    &.first{
      height: 50px;
    }

    &.sec{
      height: 150px;
    }

    &.third{
      height: 250px;
    }
  }
}

https://jsfiddle.net/ballkar/75tda12q/29/

这是我需要达到的效果：

Answer 1

你必须应用他 border-radius: 25px; 而不是 border-radius: 100px;。

要了解更多信息，请查看以下代码段：

.container {
  display: flex;
  flex-flow: column;
}

.element {
  background-color: #0084ff;
  width: 500px;
  margin-bottom: 1px;
  border-radius: 25px;
}

.element.first {
  height: 50px;
}

.element.sec {
  height: 150px;
}

.element.third {
  height: 250px;
}

<div class="container">
  <div class="element first"></div>
  <div class="element sec"></div>
  <div class="element third"></div>
</div>

以下是适合您的 sass 代码：

$blue: #0084ff;
$blue-darker: darken($blue, 5);

.container {
  display: flex;
  flex-flow: column;

  .element {
    background-color: $blue;
    border-radius: 25px;
    width: 500px;
    margin-bottom: 1px;

    &.first{
      height: 50px;
    }

    &.sec{
      height: 150px;
    }

    &.third{
      height: 250px;
    }
  }
}

边框半径不依赖于高度和宽度

Border radius not dependent on height and width

css

border

sass