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. mac OSX10.12.4 (16E195)下Mysql 5.7.18找不到配置文件my.cnf2. mysql - 數據庫表中,兩個表互為外鍵參考如何解決3. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實現存在即更新應該使用哪個標簽?4. mysql - 數據庫建字段,默認值空和empty string有什么區別 1105. mysql儲存json錯誤6. sql語句 - 如何在mysql中批量添加用戶?7. mysql - 表名稱前綴到底有啥用?8. php - 公眾號文章底部的小程序二維碼如何統計?9. Navicat for mysql 中以json格式儲存的數據存在大量反斜杠,如何去除?10. mysql - 怎么生成這個sql表?
