css中如何引入svg來兼容部分安卓機顯示0.5px邊框

小編給大家分享一下css中如何引入svg來兼容部分安卓機顯示0.5px邊框，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

在開發(fā) H5 頁面的時候發(fā)現(xiàn)，部分安卓機的原生瀏覽器不兼容 0.5px 的 border ，這時候就很鬧心了，如下所示代碼：

input {
  border-bottom: 0.5px solid #DCDCDC;
}

使用 rem 改進

后面想到了用 rem 的方式，因為 H5 頁面借鑒了手淘的響應式像素，根據移動設備的 dpi 設定了根元素的 font-size 大小，所以幾乎所有的 px 都改成了 rem 作為單位，這樣可以更好地去實現(xiàn)移動端的響應式像素以及 Retina 屏幕上的表現(xiàn)。代碼如下：

input {
  /* 47 是頁面根元素的 font-size 大小 */
  border-bottom: calc(1rem/47) solid #DCDCDC;
}

測試中有部分機型完美展示了，但是有部分還是不顯示，網上有帖子說可以利用偽元素 :before 和 :after 進行 1px 的表現(xiàn)，然后利用 transform: scaleY(0.5); 進行高度上的調整，思路很好，但奶奶個熊 input 元素不支持偽元素。

最后，物色到了一個很妙的方法：在 CSS 中使用 svg！

css 中引入 svg 來改進

具體思路是為元素加上 background-image ，然后把 svg 置為圖片類型，因為 svg 上的 1px 就是實實在在的只占 1 個物理像素。

實現(xiàn)很簡單，代碼如下：

input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='#dcdcdc' stroke-width='1'/></svg>") ;
}

倒騰不止于此，利用 php 代碼把 svg 的 xml 代碼轉成 base64 格式再試試：

<?php
  echo base64_encode("<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='#dcdcdc' stroke-width='1'/></svg>");
?>

輸出如下：

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==
 

再引入到 css 的 background-image 中：(注意原 utf8 要改成 base64 )

input {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==") ;
}

以上是“css中如何引入svg來兼容部分安卓機顯示0.5px邊框”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！