我一直在使用CSS3变换旋转图片和文本框的边界在我的网站。
问题是，边界在Chrome中看起来参差不齐，就像一个(低分辨率)游戏没有反锯齿。在IE, Opera和FF中，它看起来要好得多，因为使用了AA(仍然清晰可见，但不是那么糟糕)。我无法测试Safari，因为我没有Mac电脑。
旋转的照片和文字本身看起来很好，只是边界看起来参差不齐。
我使用的CSS是这样的:
.rotate2deg {
transform: rotate(2deg);
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
}
有什么方法我可以解决这个问题，例如，通过强迫Chrome使用AA?
在下面的例子:
当前回答
我一直有一个问题与CSS3梯度与-45度。背景是倾斜的，有很严重的锯齿状，类似但比原来的帖子更糟。所以我开始摆弄这两个背景的大小。这样会拉长锯齿状，但它仍然在那里。此外，我读到其他人在45度的增量也有问题，所以我从-45度调整到-45.0001度，我的问题解决了。
在我下面的CSS中，background-size最初是30px，背景梯度的度数恰好是-45度，所有关键帧都是30px 0。
@-webkit-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-moz-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-ms-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-o-keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@keyframes progressStripeLTR {
to {
background-position: 60px 0;
};
}
@-webkit-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-moz-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-ms-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@-o-keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
@keyframes progressStripeRTL {
to {
background-position: -60px 0;
};
}
.pro-bar-candy {
width: 100%;
height: 15px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(187, 187, 187);
background: -moz-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -o-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -ms-linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: linear-gradient(
-45.0001deg,
rgba(187, 187, 187, 1.00) 25%,
transparent 25%,
transparent 50%,
rgba(187, 187, 187, 1.00) 50%,
rgba(187, 187, 187, 1.00) 75%,
transparent 75%,
transparent
);
background: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(
25%,
rgba(187, 187, 187, 1.00)
),
color-stop(
25%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(0, 0, 0, 0.00)
),
color-stop(
50%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(187, 187, 187, 1.00)
),
color-stop(
75%,
rgba(0, 0, 0, 0.00)
),
color-stop(
rgba(0, 0, 0, 0.00)
)
);
background-repeat: repeat-x;
-webkit-background-size: 60px 60px;
-moz-background-size: 60px 60px;
-o-background-size: 60px 60px;
background-size: 60px 60px;
}
.pro-bar-candy.candy-ltr {
-webkit-animation: progressStripeLTR .6s linear infinite;
-moz-animation: progressStripeLTR .6s linear infinite;
-ms-animation: progressStripeLTR .6s linear infinite;
-o-animation: progressStripeLTR .6s linear infinite;
animation: progressStripeLTR .6s linear infinite;
}
.pro-bar-candy.candy-rtl {
-webkit-animation: progressStripeRTL .6s linear infinite;
-moz-animation: progressStripeRTL .6s linear infinite;
-ms-animation: progressStripeRTL .6s linear infinite;
-o-animation: progressStripeRTL .6s linear infinite;
animation: progressStripeRTL .6s linear infinite;
}
其他回答
你可以使用模糊的盒子阴影来掩盖锯齿。使用-webkit-box-shadow代替box-shadow将确保它不会影响非webkit浏览器。不过，你可能想检查一下Safari和移动webkit浏览器。
结果稍微好一些，但仍然比其他浏览器差很多:
为了防止以后有人搜索这个，在Chrome中消除CSS转换上的锯齿状边缘的一个好技巧是添加CSS属性-webkit-backface-visibility，值为hidden。在我自己的测试中，这完全消除了它们。
-webkit-backface-visibility: hidden;
尝试3d变换。这招真是妙不可言!
/* Due to a bug in the anti-liasing*/
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(2deg);
对我来说，透视CSS属性起了作用:
-webkit-perspective: 1000;
完全不合逻辑的在我的情况下，因为我没有使用3d过渡，但仍然工作。
在有问题的元素周围的div上添加以下内容为我解决了这个问题。
-webkit-transform-style: preserve-3d;
在我的例子中，锯齿状的边缘出现在视频窗口周围。
