css 多重背景渐变和元素翻转

html代码

<view class="title-box">
    <view class="title">css 多重渐变和翻转</view>
</view>

scss

.title-box {
        height: 104rpx;
        background: linear-gradient(180deg, #e6ecfc 0%, rgba(230, 236, 252, 0.59) 69%, rgba(230, 236, 252, 0) 100%);
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .title {
            position: relative;

            font-family: PingFang SC Bold;
            font-size: 32rpx;
            letter-spacing: 0.036000000000000004em;
            color: #2650a1;

            &::after,
            &::before {
                content: "";
                position: absolute;
                left: -70rpx;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 50rpx;
                height: 12rpx;
                /* 使用多重渐变，分别设置渐变的 位置/大小 */
                background: linear-gradient(90deg, #e7f0f9 0%, #6f94d9 100%) 0 0/100% 4rpx no-repeat, linear-gradient(90deg, transparent 0, #e7f0f9 50%, #6f94d9 100%) 0 bottom/100% 4rpx no-repeat;
            }

            &::before {
                left: unset;
                right: -70rpx;
                transform: rotateY(180deg);
            }
        }
    }