前端页面细节处理好了才会显得精致。边框在网页中是常见的一种样式了。虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的。
今天主要说一下如何让边框显示0.5px的方法:
方法一:利用渐变
关于渐变可以看下面两篇文章做深入了解:
实现原理:
把元素的伪类高度设为1px,背景渐变,一半有颜色,一半透明。
线上案例:
百度糯米(没有改版的话)
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框0.5px实现方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-gradient{ position:relative; padding: 10px; } .border-gradient:after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: linear-gradient(0deg, #f00 50%, transparent 50%); } </style> </head> <body> <div class="container"> <h3>方案一:渐变</h3> <div class="border-gradient"> 原理:高度1px,背景渐变,一半有颜色,一半透明。 </div> </div> </body> </html>
方法二:利用缩放
原理:transform:scale()来达到压缩一半的目的。
线上案例:
京东
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框0.5px实现方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-scale{ position:relative; padding: 10px; } .border-scale:after{ content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #f00; /* 如果不用 background-color, 使用 border-top:1px solid #f00; 效果是一样的*/ -webkit-transform: scaleY(.5); transform:scaleY(.5); } </style> </head> <body> <div class="container"> <h3>方案二:使用缩放</h3> <div class="border-scale"> 原理: 在Y轴方向上,压缩一半。 </div> </div> </body> </html>
拓展:4条边框都需要
原理:也是利用transform:scale(),只不过这次缩放的是整个内容。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边框0.5px实现方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-all{ position:relative; padding: 10px; } .border-all:after{ content: " "; position: absolute; left: 0; top: 0; z-index:-1; width: 200%; height:200%; border:1px solid #f00; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.5, .5); transform: scale(.5, .5); border-radius: 10px; } </style> </head> <body> <div class="container"> <h3>拓展:四周全是0.5px的线条的话</h3> <div class="border-all"> 这是实现一个盒子四周0.5px的做法, 如果加入border-radius圆角效果,会发现,有些手机会有圆角发虚的情况,不过影响不是很大。如果有两个盒子,上面一个盒子没有边框效果,下面盒子有边框效果,两个盒子一样宽,上下在一起的布局方式,你会发现,在手机上有时候会对不齐… 错开了0.5px,原因已经很明了了…还有那个z-index ,可以根据不同需求来调整使用,如果可以的话,不使用也是可以的。 </div> </div> </body> </html>
其它文章推荐: