uni-app 实现中间标题左右渐变分割线

先上最终实际效果图，如下：

我们在用 uni-app 开发前端时，经常会用到类似上图的标题分割线。这种效果实现起来不难，可以通过 CSS3 的背景渐变来实现。具体实现方式如下：

HTML 代码：

<view class="title-split">
    <view></view>
    <text>猜你喜欢</text>
    <view></view>
</view>

SCSS 代码：

.title-split {
    margin: 48rpx 0 28rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
        color: #161616;
        font-weight: 500;
        font-size: 30rpx;
        padding: 0 24rpx;
    }
    view {
        width: 98rpx;
        height: 4rpx;
        border-radius: 3rpx;
        &:first-of-type {
            background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%);
        }
        &:last-of-type {
            background: linear-gradient(90deg, #333333 0%, rgba(98, 98, 98, 0) 100%);
        }
    }
}

版权属于：瞭月

本文链接：https://www.lervor.com/archives/183/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。