如何给元素设置半个像素的边框

最新推荐文章于 2023-05-23 17:27:35 发布

云_飞扬

最新推荐文章于 2023-05-23 17:27:35 发布

阅读量657

点赞数 2

分类专栏： css 文章标签： css 技巧

本文链接：https://blog.csdn.net/qq_38627581/article/details/86997334

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在浏览器中能识别的最小像素为1px，如果需要设置半个像素的边框我们需要通过伪类来处理。以下代码中#div1为一个像素的边框，#div2为半个像素的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>半像素的边框</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 50px auto;
            border: 1px solid #000000;
        }

        #div2 {
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 50px auto;
            position: relative;
        }
        #div2:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 400px;
            height: 400px;
            padding: 40px;
            border: 1px solid #000000;
            transform-origin: 0 0;
            transform: scale(0.5,0.5);
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

原理就是给#div2的伪类设置二倍的宽高边框以及padding，然后通过缩放实现半像素边框，然后通过定位让#div2的伪类元素贴在#div2上

云_飞扬

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何给元素设置半个像素的边框

在浏览器中能识别的最小像素为1px，如果需要设置半个像素的边框我们需要通过伪类来处理。以下代码中#div1为一个像素的边框，#div2为半个像素的边框&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;半像素的边框&amp
复制链接

扫一扫