我这个关闭按钮的边框和那个叉叉都会有模糊要怎么解决
<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;
}
你這個看起來好 高階(而且也好複雜的樣子)。
現在用SVG畫的邊框,感覺比較容易。
右邊框和下邊框
http://codepen.io/charleyw/pen/qbqgQR
可以試試將
.icon_close
裡的所有元素設定為雙倍大小,然後對.icon_close
用tranform: scale(0.5)
縮小一半。有些效能不是很高的設備,或是效能分配資源太少會這樣。
強制用3D觸發硬體渲染,可能會解決。