前端开发问题记录

最新推荐文章于 2024-07-02 17:28:43 发布

落花见流水

最新推荐文章于 2024-07-02 17:28:43 发布

阅读量199

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_41913971/article/details/118520433

版权

小程序开发问题记录

多行省略

（小程序）image 图片底部留白

原理：
图片的 display 属性默认是 inline，这个属性的vertical-align的默认值是baseline。所以图片底部会出现一个小留白区域。

解决：
方法1：设置图片为块状元素 display:block;
方法2：修改 vertical-align:middle;

单元素如何实现：文本、边框渐变；且边框满足移动端细边框效果

在这里插入图片描述

<button class="ui-btn" text="取消" >取消</button>
<button class="ui-btn ui-btn--danger" text="删除">删除</button>

		.ui-btn {
            border: none;
            outline: none;
            cursor: pointer;
            display: block;
            width: 100%;
            font-size: 16px;
            line-height: 1;
            padding: 16px 0;
            background: -webkit-linear-gradient(right, #47d998 0%, #01d5d8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
        }

        .ui-btn:active {
            outline: none;
            background: none;
        }

        .ui-btn::before {
            z-index: -1;
            position: absolute;
            content: ' ';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-radius: 30px;
            padding: 1px;
            background: -webkit-linear-gradient(right, #fff 0%, #fff 100%), -webkit-linear-gradient(left, #47d998 0%, #01d5d8 100%);
            background-clip: content-box, padding-box;
        }

        .ui-btn--danger {
            background: -webkit-linear-gradient(left, #ff8863 0%, #fa5c7a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ui-btn--danger::before {
            background: -webkit-linear-gradient(right, #fff 0%, #fff 100%), -webkit-linear-gradient(left, #ff8863 0%, #fa5c7a 100%);
            background-clip: content-box, padding-box;
        }