今天,有朋友在学习CSS3的时候碰到了点问题,transform rotate之后出现了一个和背景颜色同色的 “边框” 。 刚看到的时候,也是很好奇,我还没他学的这么仔细,都没遇到过这个问题。 参考:CSS3 transform rotate(旋转)锯齿的解决办法 transform:rotate在手机上显示有锯齿的解决方案大全
这篇文章仅讨论锯齿问题。
解决:
1. 在CSS3 transform属性后加入translateZ(0)
2. 手机上,利用元素外层容器的overflow:hidden; 加上元素margin:-1px;
3. 无需border时,元素border属性颜色设置成 transparent 或者和背景色相同
详细:
代码如下:
<!DOCTYPE html>
<html>
<head>
<ti