实现0.5px边框效果

原创于 2021-05-06 21:33:06 发布 · 124 阅读

CC 4.0 BY-SA版权

文章标签：

在这里插入图片描述

<style type="text/css">
       /*1.利用渐变-百度糯米*/
       .wrapper1 {
           height: 1px;
           background-image: linear-gradient(110deg, rgb(83, 24, 24) 50%, transparent 50%);
       }

       /*2.缩放-发虚-京东*/
       .wrapper2 {
           height: 1px;
           margin-top: 20px;
           background-color: cyan;
           -webkit-transform: scaleY(.5);
           transform: scaleY(.5);
       }

       /*3条边框都需要*/
       .wrapper3 {
           margin-top: 20px;
           height: 100px;
           border: 1px solid #000;
           -webkit-transform-origin: 0 0;
           transform-origin: 0 0;
           -webkit-transform: scale(.5, .5);
           transform: scale(.5, .5);
       }
    </style>
</head>

<body>
    <div class="wrapper1"></div>
    <div class="wrapper2"></div>
    <div class="wrapper3"></div>
</body>