css中引入svg来兼容部分安卓机显示0.5px边框的示例
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
相信大家昨天打开某 404 搜索引擎的时候应该都看到这张图片了，不得不说，后人会以这么一种方式来纪念前人，而且还是一个伟大的公司，挺感动的。
前言
在开发 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(?css/"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=') ;
}
倒腾不止于此，利用 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(?css/"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==") ;
}
结语
其实还有很多方法可以来解决这个问题，大家尽情发挥一下脑洞吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
- 这篇文章主要介绍了使用纯 CSS 创作一个渐变色动画边框,需要的朋友可以参考下2018-11-20
这篇文章主要介绍了CSS 制作带边框背景色透明的消息框的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-03
这篇文章主要给大家介绍了关于reset.css引入以及1px边框问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面2018-07-10
CSS3+SVG实现的文字边框线条流动动画特效源码一段实现了非常个性好看的led文字动画特效代码，由流动的线条边框组成的字体，非常不错2018-05-07
本文通过实例代码给大家介绍了基于csss3实现多样的边框效果，有半透明边框，多重边框，边框内圆角，具体效果图和实现代码大家参考下本文2018-05-04
是一段实现了当鼠标悬停在文字上时，文字周围就回出现线条边框动画特效，拥有5种从上、从下、从左、从右、从中等方法悬停边框动画，欢迎有喜欢的朋友们前来下载使用2018-03-13- 这是一款由程序员之家翻译自国外网站的在线CSS工具，可在线调整生成样式的边框圆角效果，以及边框的宽度、颜色、样式等属性，还可实时预览生成的CSS代码，并支持一键复制代码2017-09-19
- 边框操作是每位前端工程师们经常会遇到的，下面这篇文章主要给大家介绍了关于单元素如何利用css实现多重边框效果的相关资料，文中通过示例代码给大家详细介绍了实现的过程2017-09-18
- 常常看到一种酷炫的效果，鼠标hover一片区域后，区域显示出虚线边框，并且还有线条动画，那么这种效果具体是怎么实现的呢，本文提供了几种思路，感兴趣的朋友跟随小编一起2019-05-08
最新评论