边框半径不取决于高度和宽度

debugcn 发表于 Dev

巴尔卡尔

我需要一个边界半径规则，该规则将使该元素将被四舍五入，无论该元素的大小（高度）如何。

这是我的示例：

<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/

这是我需要达到的效果：

科迪普·科拉迪亚

你必须申请他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;
    }
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。