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. CSS是否支持“清晰,锐利”等文本消除锯齿?
- 3. Font.createFont +抗锯齿
- 4. SDL2 OpengGL消除锯齿没有效果
- 5. 在Android上禁用消除锯齿Imageview
- 6. JButton文本的消除锯齿
- 7. @ font-face在IE7-9中消除锯齿
- 8. 反锯齿iPhone OpenGLES
- 9. 锯齿状排列
- 10. 抗锯齿算法
- 11. 如何使用抗锯齿输出GraphicsRow?
- 12. MATLAB - 如何避免锯齿状图像?
- 13. 如何迭代锯齿状数组?
- 14. 如何制作多维锯齿阵列?
- 15. 如何撤消画布反锯齿?
- 16. 如何总结像锯齿形算法
- 17. 如何连接“锯齿”张量
- 18. 如何在Flex中反锯齿图像?
- 19. 如何去除画布中的锯齿线?
- 20. 如何在SKLabelNode中禁用消除锯齿?
- 21. 如何消除SVG图层左侧的反锯齿或混合?
- 22. 如何在画面录制上消除锯齿缩放?
- 23. Java:如何在JTextField中启用文本消除锯齿?
- 24. 如何在VisualStudio代码中禁用消除锯齿?
- 25. 关于Skia的抗锯齿
- 26. F#锯齿阵列分配
- 27. 强制抗锯齿EMF
- 28. 测量锯齿的周期
- 29. 呈现抗锯齿螺旋
- 30. ggplot导出的抗锯齿
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