细线处理

最新推荐文章于 2022-07-02 22:58:59 发布

鱼塘虾本虾

最新推荐文章于 2022-07-02 22:58:59 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_39765901/article/details/99315057

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS创建细线边框的技巧，通过调整元素的尺寸和使用特定的CSS属性，如transform和border，可以实现视觉上非常细的边框效果。这种方法适用于希望在网页设计中加入精细细节的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子边框做细线

 .app_progres_play:before{
            content: "";
            position: absolute;
            top: -50%;
            bottom: -50%;
            left: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            border: 1px solid  #e1e3e5;
            box-sizing:border-box;
            border-radius: 0.1rem;
            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.04);

        }

单独盒子做细线

<div class="ThinLine"></div>
.ThinLine{
            width: 6.34rem;
            margin: auto;
            border: none;
            border-bottom: 1px solid #e1e3e5;
            height: 1px;
            transform: scaleY(0.5);
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
        }