补偿Safari的Border Radius Drawing

Question

请注意以下简单示例：

div {
  border-bottom: 1px solid black;
  border-radius: 20%;
  padding: 10px;
}

<div>Test</div>

在Safari中，这会导致部分上边框被绘制：

我不希望那些“幻影”的上边框。我该如何弥补这个？

Answer 1

您需要删除div顶部的圆角边框，如下所示：

div {
    border-bottom: 1px solid black;
    border-radius: 0 0 20% 20%;
    padding: 10px;
}

这是使用border-radius简写，其中包含4个值

  

第一个值适用于左上角，第二个值适用于右上角，   第三个值适用于右下角，第四个值适用于   左下角“

https://www.w3schools.com/cssref/css3_pr_border-radius.asp