为什么边框半径在 iPad 上看起来像垃圾？答案

【问题标题】：Why does border-radius look like crap on the iPad?为什么边框半径在 iPad 上看起来像垃圾？
【发布时间】：2019-08-14 11:27:35
【问题描述】：

看到角落里的白色锯齿了吗？这是我的 CSS 的问题还是这实际上是它应该呈现的样子？

这是我的 CSS：

border: 1px solid       rgba(0,0,0,.33) /*{d-bup-border}*/;
background:             #fff /*{d-bup-background-color}*/;
font-weight: bold;
color:                  #223d74 /*{d-bup-color}*/;
text-shadow: none;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff /*{d-bup-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient(top, #fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient(top, #fff /*{d-bup-background-start}*/, #fff /*{d-bup-background-end}*/);

【问题讨论】：

我认为我明白你在说什么……不过我想我不会注意到。
在桌面 Safari 上看起来是否一样糟糕？它应该。
@BoltClock - 在 Safari 中它看起来很清晰，我只在 iPad 上看到它。

标签： css ipad safari

【解决方案1】：

我在 safari 上看到了这个问题，并在几个月前尝试找到一个解决方案来为我解决这个问题。可惜找不到原帖。

虽然我认为您正在寻找的可以解决您的问题的答案是background-clip

-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

取自CSS Tricks - Transparent Borders with background-clip

【讨论】：