css - 视网膜显示屏上的模糊按钮

Question

这个问题与我正在构建的免费站点模板有关，您可以 demo here和 see the code for here .

我发现我在网站上创建的按钮在视网膜显示器上变得非常模糊。按钮是唯一能做到这一点的东西。这是我用来创建按钮的代码:

<a class="btn" href="#">Get Started →</a>

和

.btn {
display: inline-block;
padding: 15px 20px;
color: white;
margin: 5px 0 0 0;
font-family: @font-family-sans-serif;
line-height: @line-height-base;
text-align: center;
font-weight: 400;
text-decoration: none;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #79a94b;
vertical-align: middle;
cursor: pointer;
border: 2px solid #689240;
border-radius: 5px;
white-space: nowrap;
-webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
-moz-filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
-ms-filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
-o-filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
}

为颜色过渡添加了一些 CSS。

似乎这种方法不应该让视网膜显示器上的东西变得更加模糊——没有光栅图像会变得模糊，这都是 CSS。所以我有点不知所措。

Answer 1

这是 WebKit 中的一个错误。它可以通过添加 backface-visibility: hidden; 来修复，当然，你会想要供应商前缀，所以添加:

-webkit-backface-visibility: hidden;
backface-visibility: hidden;