..

渐变“白色-透明”遮罩边界设计

常见的边界设计

常见的边界设计有两种：

  1. 加 border，或者说分割线。简单直接，使用场景多。

  2. 加 boxShadow。一般用于悬浮元素，例如在悬浮的 header 上添加一个向下的阴影，以增加立体感。

渐变“白色-透明”边界设计

这种设计，就是在边界处，添加一个从白色向透明过渡的遮罩。同样能起到边界区分的作用，除此之外还有两个好处：

  1. 干净。特别适用于整个页面的内容简单、留白多、色系浅的场景。

  2. 能透出背后的内容。尤其是用在底部悬浮按钮元素上，自然地让用户知道，下面还有内容，引导用户向下滚动。

CSS 实现样例

这里，直接节选一个 React 的实现。注意：节选代码不能运行！

import React from 'react';

export const ExamplePage: React.FC = () => {

  const lines = new Array(30).fill(null);

  return (
    <div className={classes.page}>
      <div className={classes.content}>
        {lines.map((_, idx) => <h1 key={idx.toString()}>{`Line ${idx}`}</h1>)}
      </div>
      <div className={classes.bottomActions}>
        <div className={classes.bottomMaskWrapper}>
          <OBActionButtonBlock
            text={'Next'}
          />
        </div>
      </div>
    </div>
  );
};

const classes = createStyleSheet({
  page: {
    minHeight: '100svh',
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    flex: 1,
  },
  bottomActions: {
    position: 'sticky',
    bottom: '0',
  },
  // 需要一个 wrapper，来提供定位支点
  bottomMaskWrapper: {
    position: 'relative',
    paddingBottom: '20px',
    background: 'white',
    // 白色渐变遮罩
    '&::before': {
      content: '""',
      position: 'absolute',
      top: '-32px',
      left: '0px',
      right: '0px',
      height: '32px',
      backgroundImage: 'linear-gradient(to top, color-mix(in srgb, rgb(255, 255, 255) 95%, transparent) 0%, transparent 100%)',
      display: 'block',
      pointerEvents: 'none',  // 防止遮罩拦截了用户的点击
    },
  },
});

效果如图中红框部分：

image 渐变白色遮罩边界效果图