很简单,没有特殊的转换,并且包含
Lorem ipsum.
Abhishek Pan..
7
这通常在转换元素时发生,因为浏览器开始使用元素的边缘进行抗锯齿.
抗锯齿是网络图形中无名英雄的东西; 这就是我们在屏幕上有清晰文字和平滑矢量形状的原因.
虽然缩小/在浏览器中没有正确地重新缩放元素,例如,如果你缩小1px高度元素0.75%,浏览器应该重绘元素0.75px但浏览器无法绘制0.75px,它可以创建它1或者它会尝试使边缘平滑与制作像素模糊或50%不透明度.
在上面的图片中,您可以看到正在绘制的相同三角形,但是在左侧它启用了抗锯齿,在右侧它已被禁用.如您所见,当启用抗锯齿时,如果三角形仅通过像素的一部分,则像素为灰色阴影.但是,禁用时,像素将填充为纯黑色或纯白色,并且形状看起来呈锯齿状.
backface-visibility: hidden;在缩放/转换时使用 或重叠具有负边距的元素是避免此问题的更好选择.
演示没有使用 backface-visibility: hidden;
html,
body {
transform: scale(.8);
}
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
}
.inner {
height: 100%;
width: 100%;
background-color: green;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
使用演示 backface-visibility: hidden;
html,
body {
transform: scale(.8);
}
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
}
.inner {
height: 100%;
width: 100%;
background-color: green;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
由OP提供的演示通过使用backface-visibility: hidden;和重叠元素来解决negative margin
html,
body {
transform: scale(.75);
}
.inner {
height: 100%;
width: 100%;
background-color: green;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.inner-2 {
background-color: red;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.inner-3 {
background-color: blue;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
margin-top: -2px;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
backface-visibility: hidden;
}
.boundary-2 {
background-color: green;
}
.boundary-2:before {
transform-origin: top right;
transform: rotate(-3deg);
background-color: red;
}
.boundary-3 {
background-color: red;
}
.boundary-3:before {
transform-origin: top left;
transform: rotate(3deg);
background-color: blue;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
PS:不要忘记使用viewport meta标签进行响应.
Source Antialiasing-101
1> Abhishek Pan..：
这通常在转换元素时发生,因为浏览器开始使用元素的边缘进行抗锯齿.
抗锯齿是网络图形中无名英雄的东西; 这就是我们在屏幕上有清晰文字和平滑矢量形状的原因.
虽然缩小/在浏览器中没有正确地重新缩放元素,例如,如果你缩小1px高度元素0.75%,浏览器应该重绘元素0.75px但浏览器无法绘制0.75px,它可以创建它1或者它会尝试使边缘平滑与制作像素模糊或50%不透明度.
在上面的图片中,您可以看到正在绘制的相同三角形,但是在左侧它启用了抗锯齿,在右侧它已被禁用.如您所见,当启用抗锯齿时,如果三角形仅通过像素的一部分,则像素为灰色阴影.但是,禁用时,像素将填充为纯黑色或纯白色,并且形状看起来呈锯齿状.
backface-visibility: hidden;在缩放/转换时使用 或重叠具有负边距的元素是避免此问题的更好选择.
演示没有使用 backface-visibility: hidden;
html,
body {
transform: scale(.8);
}
.boundary {
width: 100.13723%;
padding-bottom: 5.24078%;
position: relative;
overflow: hidden;
background-color: white;
}
.boundary:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: top left;
transform: rotate(3deg);
background-color: green;
}
.inner {
height: 100%;
width: 100%;
background-color: green;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
京公网安备 11010802041100号