相关疑难解决方法(0)

我一直在使用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吗？

示例如下:

使用-webkit-transform: rotate(-5deg);一个div容器,Chrome的渲染与真正的锯齿边缘图像的网格.在FF(-moz-transform:)和IE(-ms-filter:)中,一切看起来都很好 - 请看下面的区别.

我能做些什么吗？

在Internet Explorer中,此动画似乎会抖动.我正在阅读这个问题的答案,他们听起来好像有可能修复.

我不能真正使用图像,因为边框半径不是常数,我宁愿不使用动画gif.

我理解'摇摆'不是一个很好的描述,但我想不出任何其他的词来形容它.我没有用Opera/Safari测试它,所以如果你有其中任何一个,我想知道它们是否正确显示还是有问题.请在Chrome/Firefox中运行以下代码段并将其与Internet Explorer中的代码段进行比较:

@keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
@-webkit-keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
@-moz-keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
@-ms-keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
@-o-keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
#spinme{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	margin:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border:0.2rem solid black;
	border-radius:0;
	outline: 1px solid transparent; /* require to remove jagged edges in firefox */
	transform:rotateZ(0deg);
	animation: spin infinite 4s;
	-webkit-animation: spin infinite …

我试图在水平线上创建三角形指针/边框.

这是我想要实现的一个例子:

我尝试操纵div的顶部边框,但到目前为止我所做的一切都根本不起作用.

我有一个旋转45度的div,上面有一个边框图像.

在铬和野生动物园,它呈现罚款.

在firefox中,令人讨厌的抗锯齿线出现在旋转div的边缘周围,在它的边缘和边框图像之间.

这是简单的HTML:

<div class="container">

   <div class="corner">

   </div>

</div>

这是CSS:

.container {
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: black;
    outline: 1px solid #333333;
    position: relative;
    overflow: hidden;
}

.corner {
    position: absolute;
    bottom: -68px;
    right: -66px;
    width: 86px;
    height: 82px;
    background-color: #F1F2F3;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    border-style: solid;
    border-width: 14px 16px 28px;

    -moz-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 28 repeat;
    -webkit-border-image: url(http://s24.postimg.org/aq0pokg41/curve_border_grey.png) 14 16 …