UI库中表单内单个field组件的底部0.5px的线条的实现原理

最新推荐文章于 2023-06-18 11:50:01 发布

黑1号一

最新推荐文章于 2023-06-18 11:50:01 发布

阅读量351

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_43601527/article/details/120425415

版权

在项目中，作为前端经常跟UI设计打交道，经常因为几像素的问题而十分头疼。UI小姐姐设计出来的线条用工具查看是1px，而自己做完后感觉好像粗了，以前没当回事，后来研究了下，原来是scaleY搞得鬼。
下面实现下0.5px的若隐若现的底线。
效果如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
     
                display: flex;
                justify-content: center;
                height: 100vh;
                align-items: center;
                background: gainsboro;
            }
            input{
     
                border:none;
            }
            input:focus{
     
                outline: none;
            }
            .my-field{
     
                display: flex;
                width:360px;
                justify-content: flex-start;
                align-items: center;
                padding:10px 16px;
                position: relative;
            }
            .phone .my-field:not(:last-child)::after{
     
                position: absolute;
                left: 16px;
                right: 16px

最低0.47元/天解锁文章

黑1号一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UI库中表单内单个field组件的底部0.5px的线条的实现原理

在项目中，作为前端经常跟UI设计打交道，经常因为几像素的问题而十分头疼。UI小姐姐设计出来的线条用工具查看是1px，而自己做完后感觉好像粗了，以前没当回事，后来研究了下，原来是scaleY搞得鬼。下面实现下0.5px的若隐若现的底线。效果如下：代码如下：<!DOCTYPE html><html> <head> <style> body{ display: flex;
复制链接

扫一扫