今天遇到一個需求，畫0.5px的線，查了以下資料，主要以scale方法為主。代碼如下： 利用after和before的話好像只能畫兩條線，如果要畫整個邊框可以先畫兩倍長寬的邊框在縮小到0.5。需要三條邊框的話可以考慮在容器內建立三個容器表示邊框線再縮小。 ...

題目：畫一條0.5px的線 　　1、采用border-image的方式： 　　　　　　border-image屬性指定作為div元素周圍邊框的圖像，border-image：width；圖像邊界的寬度。 　　2、采用transform: scale()的方式： 　　　　　　2D效果：縮放。 ...

CSS設置1px變粗的原因： 為什么移動端css里面寫了1px, 實際看起來比1px粗. 其實原因很好理解:這兩個“px”的含義是不一樣的. 移動端html的header總會加上一句： 這句話定義了本頁面的viewport的寬度為設備寬度,初始縮放值和最大縮放值都為1,並禁止 ...

通過偽類元素:after為其添加樣式，用transform：scaleY令其在垂直方向縮小0.5倍 ...

采用transform: scale()的方式，該方法用來定義元素的2D 縮放轉換： ...

1px? 0.5px! 前一段時間剛開發完一個項目，但總感覺界面樣式怪怪的，雖然表面上看起來和設計稿是一樣的，可是就是沒設計稿那種感覺，而且莫名還有一種山寨的氣息，讓我感到很郁悶，找來找去終於發現罪魁禍首——border線寬的問題。 問題產生的原因 關於設備像素的基礎知識，建議去看 ...

之前寫的時候不太了解人家移動APP是怎么實現的，后來自己摸索 知道了可以使用縮放的方式解決線比較粗的問題。 最近看到了 小月博客里的一篇文章： http://www.aliyue.net/1487.html，因此，自己總結了一下。 ...

在移動端會出現線條太粗的現象，簡單來說，是因為手機端的像素單位和ui的圖比例是2:1，所以ui圖的1px邊框對我們來說就是0.5px,但是瀏覽器渲染的最小單位就是1px,下面給幾種方法用css寫出0.5px邊框1. html部分 <div class="border">測試 ...