html5 - css的div使用`transform: rotate()`后边界背景颜色溢出,存在锯齿。
巴扎黑
巴扎黑 2017-04-17 13:39:40
[HTML讨论组]

背景

想要使用css+p制作一个叉符号,大概这样子:

制作方法

  • 使用一个带背景色的大p,然后在该p的四个边角放置四个白色的p,掩盖背景色p的边缘,留下一个+

代码:https://jsfiddle.net/CntChen/...

  • 然后对整个p使用transform: rotate(45deg)进行旋转,得到一个

问题

旋转后发现,带背景色的p外边界背景溢出。
如图所示:

代码:https://jsfiddle.net/CntChen/...

猜测:感觉是旋转后渲染的问题,边界存在锯齿。代码中的十字架宽度为1px,边界锯齿宽度小于1px。

求指导

对于锯齿,有没有处理的方法?

巴扎黑
巴扎黑

全部回复(1)
迷茫

从实现上说,可以使用另一种方案:

https://jsfiddle.net/CntChen/...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号