边框0.5px实现方法

最新推荐文章于 2025-04-20 21:55:03 发布

唐策

最新推荐文章于 2025-04-20 21:55:03 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签：边框0.5px实现方法

本文链接：https://blog.csdn.net/qq_29132907/article/details/79728096

css 专栏收录该内容

9 篇文章

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框0.5px实现方法</title>
        <style type="text/css">
            /*标准1px*/
            .b1{
                height: 10px;
                border: 1px solid #ff0000;
            }
            /*1.利用渐变-百度糯米*/
            .a1{
                height: 1px;
                margin-top: 20px;
                background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
            }
             /*2.缩放-发虚-京东*/
            .a2{
                height: 1px;
                margin-top: 20px;
                background-color: #f00;
                -webkit-transform: scaleY(.5);
                transform:scaleY(.5);
            }
            /*4条边框都需要*/
            .scale-half {
                 margin-top: 20px;
                height: 100px;
                border:1px solid #f00;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: scale(.5, .5);
                transform: scale(.5, .5); 
            }
        </style>
    </head>
    <body>
        <div class="b1"></div>
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="scale-half"></div>
    </body>
</html>