Q
如何清除锯齿?
2
A
回答
4
取具有大box-shadow
一种不同的方法的圆形元件上:
body {
background: url('https://i.imgur.com/RECDV24.jpg');
background-size: cover;
}
.bitten {
height: 150px;
overflow: hidden;
position: relative;
width: 150px;
}
.bitten::before {
border-bottom-right-radius: 100%;
box-shadow: 0 0 0 1000px tomato;
content: '';
height: 28px;
position: absolute;
width: 28px;
z-index: -1;
}
<div class="bitten"></div>
+0
谢谢,它的工作原理 – Dmitriy
0
在某些浏览器中,您可以通过避免锐利边缘渐变来防止锯齿。因此,不是transparent 28px, tomato 28px
,而是让颜色之间的转换更平滑一些,比如说1px。
body{
background: url('https://i.imgur.com/RECDV24.jpg');
background-size: cover;
}
div{
width: 150px;
height: 150px;
background-image: radial-gradient(circle at 0 0, rgba(255,99,71,0) 28px, rgba(255,99,71,255) 30px);
}
<div></div>
但是,这并不工作无处不在。要获得更坚实的方法,请参阅其他答案。
相关问题
- 1. 用消除锯齿画线
- 2. Silverlight打印消除锯齿
- 3. 如何绘制锯齿线?
- 4. CSS是否支持“清晰,锐利”等文本消除锯齿?
- 5. Font.createFont +抗锯齿
- 6. 反锯齿JLabel
- 7. opengl反锯齿
- 8. 在Android上禁用消除锯齿Imageview
- 9. 反转(移除)反锯齿滤镜
- 10. JButton文本的消除锯齿
- 11. paintComponent()方法中的消除锯齿
- 12. SDL2 OpengGL消除锯齿没有效果
- 13. 位图未绘制消除锯齿
- 14. @ font-face在IE7-9中消除锯齿
- 15. WebGLRenderer锯齿图像
- 16. 抗锯齿上CAShapeLayers
- 17. iOS - CAShapeLayer抗锯齿?
- 18. 抗锯齿与GL_TRIANGLE_FAN
- 19. GLSL image2D反锯齿
- 20. 反锯齿iPhone OpenGLES
- 21. 抗锯齿算法
- 22. Stage3D iOS反锯齿
- 23. 锯齿状排列
- 24. 反锯齿问题
- 25. 如何使用抗锯齿输出GraphicsRow?
- 26. 如何在Vim中选择锯齿块?
- 27. MATLAB - 如何避免锯齿状图像?
- 28. 如何返回锯齿阵列
- 29. 如何在Flex中反锯齿图像?
- 30. 如何迭代锯齿状数组?
IMG { 图像的绘制:optimizeSpeed;/* STOP SMOOTHING,GATE ME SPEED */ image-rendering:-moz-crisp-edges;/* Firefox */ 图像渲染:-o-crisp-edges;/* Opera */ 图像渲染:-webkit-optimize-contrast;/* Chrome(以及最终的Safari)*/ image-rendering:pixelated;/* Chrome */ 图像渲染:优化对比度;/* CSS3建议*/ -ms-interpolation-mode:nearest-neighbor;/* IE8 + */ } –
@RïshïKêshKümar'crispEdges'用于SVG,但可能会打败提问者试图做的事情。对于其他属性也是如此。 – Rob