RETINA 屏幕1px 边框实现

最新推荐文章于 2021-12-24 11:46:32 发布

ISaiSai

最新推荐文章于 2021-12-24 11:46:32 发布

阅读量1.6k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

retina 屏幕1px 边框会显示的比较宽，解决办法是，使用scale 缩放0.5倍实现，并且需要是在after 伪元素中实现缩放，不影响原有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container1 {
            border: 1px dashed red;
            margin-top: 10px;
        }
        .container2 {
            position: relative;
            margin-top: 10px;
        }
        .container2:after {
            content: "";
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            border-bottom: dashed red 1px;
            -webkit-transform: scaleY(.5);
        }
    </style>
</head>
<body>

<div class="container1">
    WSKTN
</div>
<div class="container2">
    WSKTN
</div>
</body>
</html>

另外还可以通过线性渐变，50％的半透明，来实现半px的线条

   .container3 {
            margin-top: 10px;
            height: 1px;
            background: white -webkit-linear-gradient(bottom  , red, red 50%, transparent 50%, transparent 100%) left bottom no-repeat
        }

ISaiSai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RETINA 屏幕1px 边框实现

retina 屏幕1px 边框会显示的比较宽，解决办法是，使用scale 缩放0.5倍实现，并且需要是在after 伪元素中实现缩放，不影响原有元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .container1 {
复制链接

扫一扫

专栏目录