如何实现盒子上下边缘背景色到白色的平滑过渡效果

问题原因 #

你当前使用的单条斜向线性渐变会铺满整个容器高度，上下边缘没有做向白色的过渡处理，所以会出现背景色直接硬切到容器边界的问题。

• 当前错误效果：
  
• 期望实现效果：
  

具体实现代码 #

核心是给容器叠加3层背景渐变，CSS中先声明的渐变层级更高，会覆盖在后声明的渐变上方，层级逻辑为：

1. 顶部边缘层：纯白色向下渐变到完全透明，实现顶部柔边
2. 底部边缘层：完全透明向下渐变到纯白色，实现底部柔边
3. 底色层：保留原有斜向半透明渐变作为内容区背景

直接替换原有wrapper样式即可，修改后的完整组件代码如下：

import React from 'react';
import Typography from '@mui/material/Typography';
import { Box } from '@mui/material';

const styles = {
    wrapper: {
        pt: 7,
        pb: 7,
        pr: '10vw',
        pl: '10vw',
        // 三层渐变叠加实现上下柔边效果
        background: `
            linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 40px),
            linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 40px),
            transparent linear-gradient(111deg, #FFFFFF76 0%, #6A724645 100%) 0% 0% no-repeat padding-box
        `,
    },
    text: {
        mt: 3,
        mb: 5,
        pr: '10vw',
        pl: '10vw',
    },
};

function About() {
    return (
        <Box sx={styles.wrapper}>
            <Typography variant={'h5'} sx={{ textAlign: 'center' }}>
                About Us
            </Typography>
            <Box sx={styles.text}>
                <Typography variant={'h6'} sx={{ textAlign: 'center' }}>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </Typography>
            </Box>
        </Box>
    );
}
export { About };

参数调整说明 #

• 上下过渡范围可通过修改两个垂直渐变中的40px数值调整：数值越大过渡区域越宽，数值越小边缘越锐利
• 如果页面背景不是纯白色，将两个垂直渐变中的#ffffff替换为页面实际背景色即可
• 原有斜向渐变的角度、色值无需改动，可直接保留

内容的提问来源于stack exchange，提问作者user18943198