CSS3 渐变出现锯齿如何消除，为什么会出现锯齿？

Question

css

.wrap {
            width: 600px;
            height: 300px;
            margin:  60px auto;
            background: linear-gradient(to bottom right, #e9e7df 50%, #ffffff 50%);
        }
html 

<div class="wrap" id="we">

Answer 1

可能是你的浏览器渲染内核的原因，我在MAC的最新版本Chrome里将页面放大到 500% 无任何锯齿。你可以换成最新的Chrome试试。旧版本浏览器的渲染多少会有问题

Answer 2

这和浏览器内核没有关系。见 #1010000043132965，可以通过手动处理 CSS 背景达到抗锯齿的效果。原理简单来说是在色彩变化的地方添加一层透明的色彩过渡，使边缘不那么锐利。