html边框模糊度,css3怎么解决1px的边框模糊

我这个关闭按钮的边框和那个叉叉都会有模糊要怎么解决

<div class="popmidbox">

<div class="icon_close"></div>

</div>

.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;

}

你这个看起来好 高端(而且也好复杂的样子)。

现在用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%;

右边框和下边框

可以试试将

.icon_close

里的所有元素设置为双倍大小，然后对

.icon_close

用

tranform: scale(0.5)

缩小一半。

transform: translateZ(0);

有些性能不是很高的设备，或者性能分配资源太少会这样。

强制用3D触发硬件渲染，可能会解决。