解决position: fixed；弹框的中input自定义表单1px border看起来模糊问题-白红宇的个人博客

解决position: fixed；弹框的中input自定义表单1px border看起来模糊问题

发布日期：2021-05-07 19:33:00 浏览次数：25 分类：原创文章

本文共 3098 字，大约阅读时间需要 10 分钟。

出现的问题：

我们想要的效果：

结构：

<body>    咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩    <div class="box">        <div class="box_bg"></div>        <div class="box_bubble">            <h2>hello!muzidigbig</h2>            <input type="text">        </div>    </div></body>

出现问题的样式：

    <style>        .box {            position: fixed;            left: 0;            top: 0;            height: 100%;            width: 100%;            text-align: center;        }                .box_bg {            position: fixed;            left: 0;            top: 0;            z-index: -1;            width: 100%;            height: 100%;            background-color: #000;            filter: alpha(opacity=30);            opacity: .3;        }                .box_bubble {            background: #fff;            width: 400px;            padding: 50px;            text-align: left;            border: 2px solid pink;            /* 这种定位方式会使input表单设有border的边框线加粗 */            position: absolute;            left: 50%;            top: 50%;            transform: translate(-50%, -50%);        }                input {            border: 1px solid #666;        }    </style>

我们想要的效果的样式：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        .box {            position: fixed;            left: 0;            top: 0;            height: 100%;            width: 100%;            text-align: center;        }                .box::before {            content: "";            height: 100%;            display: inline-block;            vertical-align: middle;        }                .box_bg {            position: fixed;            left: 0;            top: 0;            z-index: -1;            width: 100%;            height: 100%;            background-color: #000;            filter: alpha(opacity=30);            opacity: .3;        }                .box_bubble {            background: #fff;            width: 400px;            padding: 50px;            text-align: left;            border: 2px solid pink;                        position: static;            top: auto;            left: auto;            transform: none;            margin-left: 0;            display: inline-block;            vertical-align: middle;        }                input {            border: 1px solid #666;        }    </style></head><body>    咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩    <div class="box">        <div class="box_bg"></div>        <div class="box_bubble">            <h2>hello!muzidigbig</h2>            <input type="text">        </div>    </div></body></html>

这里我也有疑问就是不知道下面这块代码表达的原理是什么？

        .box::before {            content: "";            height: 100%;            display: inline-block;            vertical-align: middle;        }

2.css3---缩放的方式

-webkit-transform:scaleY(0.5)

transform:scaleY(0.5);

3.css3---边框图的方式

用类似的1px图片做border图片

border-width: 0 0 1px 0; border-image: url(linenew.png) 0 0 2 0 stretch;

border-width: 1px 0; border-image: url(linenew.png) 2 0 stretch;

固定，有颜色还得换图

上一篇：深入浅出Object.defineProperty()---js对象的底层

下一篇：严格模式、混杂模式与怪异模式

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

2.css3---缩放的方式

3.css3---边框图的方式

发表评论

最新留言

关于作者

推荐文章