css中引入svg來相容於部分安卓機實例-css教學-PHP中文網

首頁

web前端

css教學

css中引入svg來相容於部分安卓機實例

Feb 24, 2018 am 09:53 AM

css 實例

本文主要和大家介紹了css中引入svg來兼容部分安卓機顯示0.5px邊框的示例的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

前言

在開發H5 頁面的時候發現，部分安卓機的原生瀏覽器不相容0.5px 的border ，這時候就很鬧心了，如下所示程式碼：

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

登入後複製

使用rem 改進

#後面想到了用rem 的方式，因為H5 頁面借鑒了手淘的響應式像素，根據行動裝置的dpi 設定了根元素的font-size 大小，所以幾乎所有的px 都改成了rem 作為單位，這樣可以更好地去實現行動端的響應式像素以及Retina 螢幕上的表現。程式碼如下：

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

登入後複製

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

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

css 中引入svg 來改進

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

實作很簡單，程式碼如下：

input {
  background-image: url(&quot;data:image/svg+xml;utf8,&lt;svg xmlns=&#39;http://www.php.cn/2000/svg&#39; width=&#39;100%&#39; height=&#39;100%&#39;&gt;&lt;line x1=&#39;0&#39; y1=&#39;100%&#39; x2=&#39;100%&#39; y2=&#39;100%&#39; stroke=&#39;#dcdcdc&#39; stroke-width=&#39;1&#39;/&gt;&lt;/svg&gt;&quot;) ;
}

登入後複製

倒騰不只如此，利用php 程式碼把svg 的xml 程式碼轉換成base64 格式再試試看：

&lt;?php
  echo base64_encode(&quot;&lt;svg xmlns=&#39;http://www.php.cn/2000/svg&#39; width=&#39;100%&#39; height=&#39;100%&#39;&gt;&lt;line x1=&#39;0&#39; y1=&#39;100%&#39; x2=&#39;100%&#39; y2=&#39;100%&#39; stroke=&#39;#dcdcdc&#39; stroke-width=&#39;1&#39;/&gt;&lt;/svg&gt;&quot;);
?&gt;

登入後複製

輸出如下：

#N2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBo5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaYPwMC geDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==

_back image 中：(注意原utf8 要改成base64 )

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

登入後複製