新月形的CSS无法在野生动物园工作

Question

我得到了一个应该类似于新月的简单CSS形状，在chrome和firefox中，一切看起来都很好，但是在safari中，整个圆圈的轮廓是可见的-我又如何使这种新月形在safari中起作用？

图->当前Safari结果

dataset = pd.read_csv("Market_Basket_Optimisation.csv", header = None)
transactions =[]
for i in range(0,7501):
      transactions.append([str(dataset.values[i,j]) for j in range(0,20)])

#training of dataset
from apyori import apriori
rules = apriori(transactions,min_support=0.003,min_confidence=0.2,min_lift=3,min_lenght=2)
res= list(rules)

.circle {
  height: 50px;
  width: 50px;
  border-left: 10px solid red;
  border-radius: 50%;
}

Answer 1

这似乎是webkit如何处理设置了border-radius的部分边框的错误。

这是一种使用box-shadow而不是边框​​的方法，我认为这在外观上是相似的：

.circle-box-shadow {
  height: 50px;
  width: 50px;
  margin-left: 10px;
  box-shadow: -10px 0 0 red;
  border-radius: 50%;
}

.circle-border {
  height: 50px;
  width: 50px;
  border-left: 10px solid red;
  border-radius: 50%;
}

<p>Using <code>box-shadow</code>:</p>
<div class="circle-box-shadow"></div>
<br>
<p>Using <code>border</code>:</p>
<div class="circle-border"></div>

在Chrome 70.0.3538.110和Safari 12.0.1中进行了测试。