#视觉表现

#边框与背景

我们为你提供了多种样式属性用于给元件添加背景图片，圆角，边框和阴影。例如你可以通过 background-image 属性为元件添加 来自网络的图片或是渐变；通过 border-radius 属性为元件添加圆角; 通过 box-shadow 来为元件添加阴影。

下面的例子中，我们为元件添加了圆角、阴影、渐变色的背景和多种样式的边框：

csssrc/border_background_shadow/index.tsx

预览

#颜色

通过 Lynx 样式属性，你可以为元件应用各式各样的颜色。通过将颜色设置给对应的属性，来修改元件的外观。

#可以设置颜色的属性

#文本

• color：修改用于绘制文本的颜色。
• -x-handle-color：用于调整选中文本时，选中区域两段浮标的颜色。
• text-shadow：设置文本的阴影特效的颜色。
• text-decoration-color：文本装饰线的颜色。

#边框与背景

• background-color：元件的背景填充色。
• box-shadow：配置阴影区域的颜色。
• border-color：设置用于绘制边框的颜色。也可以通过 border-top-color，border-top-color，border-top-color 和 border-top-color 分别设置各个方向的边框的颜色。

你可以将颜色定义在 CSS 文件中设置给对应属性或是通过 style 属性直接设置给元件。 颜色的值可以通过一个以“#”开头的十六进制数来分别表示对应的红、绿、蓝和透明度通道的值。这个值也可以通过 rgb()、hsl() 等相关函数定义。更多关于颜色的取值可以参考 <color>。

#渐变

你可以使用 <gradient> 值声明渐变的特效，并将其应用到以下属性中：

• color：使用渐变特效绘制文本。
• background-image：使用渐变特效填充元件的背景。
• mask-image：使用渐变特效创建透明度蒙版。

渐变color文本

radial-gradient填充背景

通过linear-gradient设置mask-image实现边缘淡出效果

#裁切与蒙版

在 Lynx 中，除了使用 overflow 属性来控制显示内容以外。你可以通过 clip-path 和 mask-image 来生成不规则形状的可显示区域边界。

csssrc/clip_path_super_ellipse/index.tsx

预览

csssrc/mask_image_circle_gradient/index.tsx

预览