css3-translate3d-模糊bug - css3怎么解决1px的边框模糊
问题描述
我这个关闭按钮的边框和那个叉叉都会有模糊要怎么解决
<p class='popmidbox'> <p class='icon_close'></p></p>.popmidbox{ width:300px; height: 200px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.icon_close{ width: 16px;height: 16px;border-radius: 50%;border:1px solid #CCC;background: #fff; padding: 5px;position:absolute;top: -12px;right: -12px;z-index: 2;}.icon_close::before{ content:'';transform: rotate(-45deg);-webkit-transform: rotate(-45deg); width: 1px;height: 17px;background: #ccc;overflow: hidden;position: absolute; top:5px;left: 13px;}.icon_close::after{ content:'';transform: rotate(45deg);-webkit-transform: rotate(45deg); width: 1px;height: 17px;background: #ccc;overflow: hidden;position: absolute; top:5px;right: 13px;}
问题解答
回答1:你这个看起来好 高端(而且也好复杂的样子)。现在用SVG画的边框,感觉比较容易。
background-image: url('data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’100%’ height=’100%’><line x1=’100%’ y1=’0%’ x2=’100%’ y2=’100%’ style=’stroke:#e5e5e5;stroke-width:1’/><line x1=’0%’ y1=’100%’ x2=’100%’ y2=’100%’ style=’stroke:#e5e5e5;stroke-width:1’ /></svg>'); background-repeat: no-repeat; background-position: 0 100%;
右边框和下边框
http://codepen.io/charleyw/pen/qbqgQR
回答2:可以试试将.icon_close里的所有元素设置为双倍大小,然后对.icon_close用tranform: scale(0.5)缩小一半。
回答3:transform: translateZ(0);
有些性能不是很高的设备,或者性能分配资源太少会这样。强制用3D触发硬件渲染,可能会解决。
相关文章:
1. debian - docker依赖的aufs-tools源码哪里可以找到啊?2. docker-compose 为何找不到配置文件?3. macos - mac下docker如何设置代理4. dockerfile - 为什么docker容器启动不了?5. golang - 用IDE看docker源码时的小问题6. docker start -a dockername 老是卡住,什么情况?7. docker images显示的镜像过多,狗眼被亮瞎了,怎么办?8. docker pull 错误?9. mac连接阿里云docker集群,已经卡了2天了,求问?10. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!