CSS3实现0.5px的边框

发布时间:2017-7-1 11:45:44编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"CSS3实现0.5px的边框 ",主要涉及到CSS3实现0.5px的边框 方面的内容,对于CSS3实现0.5px的边框 感兴趣的同学可以参考一下。

前端页面细节处理好了才会显得精致。边框在网页中是常见的一种样式了。虽然不把它处理为0.5px看上去没毛病,但是想让你做的东西征服更多的人,这些细节处理是必须的。

今天主要说一下如何让边框显示0.5px的方法:

方法一:利用渐变

关于渐变可以看下面两篇文章做深入了解:

CSS3 渐变(Gradients)

深入理解CSS3 gradient斜向线性渐变

实现原理:

把元素的伪类高度设为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>

其它文章推荐:

移动端1px细线解决方案总结

webapp中的CSS3实现 0.5px的细线


上一篇:ftp软件中保持连接命令CWD、PWD、LIST、NOOP四个操作命令解析
下一篇:网络扫描工具nmap

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款