如何在 bottom-border-radius 旁边创建底部曲线

Question

我想用 css 做一个四舍五入的 div，我已经使用了 bottom-border-radius 但我不想那样做，如果有任何其他方法可以实现，请分享.

我知道这可以通过使用 bottom-border-radius 来实现，但是还有其他方法吗？

Answer 1

您将使用 shorthand border-radius 属性并且还必须单独给出这样的值

.sample1 {
 width: 100px;
 height: 100px;
 margin-bottom: 5px;
 border-radius: 0 0 50% 50%;
 background-color: #cccccc;
}
.sample2 {
 width: 100px;
 height: 100px;
 margin-bottom: 5px;
 border-bottom-left-radius: 50%;
 border-bottom-right-radius: 50%;
 background-color: #444444;
}

<div class="sample1">
</div>

<div class="sample2">
</div>

如何在 bottom-border-radius 旁边创建底部曲线

How can create a bottom curve aside bottom-border-radius

css

curve