瀏覽器小於1px渲染的差異

Hxf1996發表於2017-12-25
瀏覽器

前言

窮，太多東西沒法測，有錯誤的地方可以來噴哦~~~

在非retina屏下，如果設計讓我們弄個.5px的邊框啥的其實很麻煩，貌似只有safari(ios8+)支援使用border: .5px;，所以我們有了如下四種方法：

  1. border: < 1px：聽天由命，通常會被美工錘死
  2. 圖片模擬：同上
  3. scale（本文要說的）
  4. box-shadow，我更喜歡這個，其實原理和scale一樣還不佔位置，還不知道為什麼不用但是網上沒什麼人說用這個模擬，maybe是相容性問題？

好了進入正題，就是同事說用border模擬.5px比height更細，我當時覺得這不可能啊，結果看上去真的細了，那麼作為一個剛聽完匠心的人，一定要試試！

測試案例

分類雜亂看看就好，下面分類分析

瀏覽器小於1px渲染的差異

// 單個通用屬性
div {
    width: 200px;
    transform: scaleY(.5);
    height: 1px;
    border-width: 1px
}
複製程式碼

分析

第一組（左一）

屬性 第一個 第二個 第三個 第四個
background-color green black black none
border-color black green none black

對比上面發現：

  1. 1，2 組：border-color受到background-color顏色的影響
  2. 4組證明了為什麼border比background看起來更細（受到背景色的影響）
  3. 2，3 組：background-color受到border-color顏色的影響

結論： 瀏覽器在小於1px時，會讓顏色變淡形成視覺上的縮小，border-color和bakcground-color互相影響，顏色相互接近，具體計算我不知道T_T，但是由2，3，4組可推測bakcground-color對border-color的影響大於border-color對background-color的影響

第二組（左二）

背景色替換成綠色，發現和第一組比所有都偏綠，所以我傾向於渲染小於1px畫素的畫素點顏色時瀏覽器會根據XXXX演算法，根據周邊顏色計算出一個視覺上更小的顏色。

第三組 (左三)

調整scale大小，對比第一組顏色變淡，說明有關

結論

瀏覽器渲染小於1px畫素時，會更具你設定的大小和畫素點周邊顏色去動態計算視覺上小於1px的顏色，並且background-color的計算權重大於border-color

下面都是寫別的測試

剩下的兩組

style 第一個 第二個 第三個 第四個
height 1.4px 1.8px 1.7px 1.9px

我以前寫過瀏覽器對於小數渲染採用四捨五入的方式，上一個元素捨去的部分會和下一個元素相加，這句話不全對第四組第一個明明就是1.4px為什麼入了呢？我一直調整到1.15px才會渲染1px，其實這個和css匹配順序一樣從後往前，從下往上計算：

  1. 第四個： 1.9px + 0.1px (-0.1)
  2. 第三個： 1.7px - 0.1px = 1.6px + 0.4px (-0.4)
  3. 第二個： 1.8px - 0.4px = 1.4px -0.4px(+0.4)
  4. 第一個： 1.4px + 0.4px = 1.8px => 2px

第四組結論

  1. 瀏覽器對於小數渲染採用四捨五入，精度為小數點後兩位（maybe）
  2. 上一個元素捨去的部分會和下一個元素相加
  3. 順序同css匹配（從後往前，從下往上）

第五組結論

計算以border-box高度為基準

對於shadow

box-shadow: 0 0 .5px 0 black;

很神奇，這個顏色非常淡，甚至接近第三組第四個..........

撓破頭都想不明白為什麼是這麼計算的....臣妾真的不知道，但是可以推測的是陰影需要有一個擴散的過程所以顏色會慢慢變淡，所以可能在計算時顏色更丹

結論

做瀏覽器真的厲害，然後這個結果只是在我電腦上的，應該都是大同小異，當然如果時ratine屏...

(`・ω・´) 當我沒寫，我猜測dpr高的話對於這個效果就會好很多，但是如果高度小於1px / dpr 無法完整渲染時畫素點的顏色應該還是如上情況一致

咳咳....其實我只是太奇怪border模擬為什麼比height模擬更細而已

有什麼想說的請留言

相關文章