CSS transform旋转的锯齿效果解决办法

问题描述：

在完成web开发作业的时候，需要写一个旋转的input，但写完后，input的外边框发生了明显的锯齿效果，如下：

解决办法：

利用css3d会使用gpu加速渲染的特性，给div增加3d样式，即在z轴旋转0°，从而使用gpu精确渲染来解决这个问题：

        div{
            transform:rotate(-7deg) translateZ(0);
            transform:rotate(-7deg);
            margin-top: 10px;
        }

修改后的样式情况：

如果你直到抗锯齿的原理，即利用渐变色过渡来达到较好的视觉效果，那么使用css滤镜也是一个不错的办法：

        div{
            transform:rotate(-7deg); 
            filter: blur(0.1px); 
            margin-top: 10px;
        }

在这里，使用模糊滤镜，设置0.1的模糊半径，就可以获得看边框具有抗锯齿效果的input：