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;

Retina显示屏上的模糊按钮

1 个答案: