首页 > 代码库 > CSS3实现0.5px的边框

CSS3实现0.5px的边框

2024-10-10 12:33:39   217人阅读

前端页面细节处理好了才会显得精致。边框在网页中是常见的一种样式了。虽然不把它处理为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的细线

CSS3实现0.5px的边框


联系
我们