投影

投影效果可以使页面图元看起来更加立体，仿佛图元是浮在页面上的，而不是简单地平铺在二维平面上。这有助于提升用户的视觉体验，使页面图元更加生动，通过为不同的图元添加不同大小、模糊度和颜色的投影，可以创造出页面的层次感，使得页面结构更加清晰，信息传达更加有序。

启用投影

选中图元后，在基础样式中点击【投影】，在弹窗中，开启投影设置；

---

投影配置

开启投影设置后，即可根据需求来设置投影的样式；

1 阴影类型

投影通常出现在图元的外部，来增加图元的层次感和立体感，也可以设置在图元内部，通过设置投影的阴影类型来决定投影出现的位置；

不同类型的不同效果：

外部阴影

内部阴影

2 阴影位置

通过设置偏移量来展示阴影在图元中的位置，偏移量分为左右偏移（X 轴）和上下偏移（Y 轴）

• 左右偏移：设置阴影在 X 轴上的位置，值为 + 时向右偏移，为 - 时向左偏移
• 上下偏移：设置阴影在 Y 轴上的位置，值为 + 时向上偏移，为 - 时向下偏移

3 模糊扩散

通过设置模糊扩散来展示阴影的模糊程度，数值越大越模糊，反之，数值越小越清晰；

4 阴影颜色

自定义设置阴影的颜色；

---

自定义投影

除了内置的投影配置界面之外，还支持自定义投影样式，点击图标后即可解锁投影配置，自定义投影可以更灵活更自由的配置投影的样式

提示

自定义投影样式使用了 CSS 的 box-shadow 属性，相关配置请参考：CSS3 box-shadow 属性

1 样式参考

下面提供了部分样式供参考，复制样式内容后粘贴到图元自定义投影中即可；

样式 1

样式内容

rgba(99, 99, 99, 0.2) 0px 2px 8px 0px

样式 2

样式内容

rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px

样式 3

样式内容

rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset

更多投影样式可参考

试一试

结果

Loading...

实时编辑器

function BoxShadow() {
  const styles = {
    // 投影样式
    boxShadow: "rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset"
  };
  return (
    <div
      style={{
        width: 100,
        height: 60,
        backgroundColor: "rgb(155, 155, 155, .5)",
        borderRadius: "5px",
        margin: "10px 30px",
        color: "#000",
        padding: 20,
        ...styles
      }}
    />
  );
}