背景
背景渐变
用于控制元素背景渐变的功能类。
语法
bg-gradient-to-{渐变方向}-{(内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2}
TIP
- 由于 uni-app nvue样式限制，背景渐变只支持样式库 内置颜色 和 主题色 的双色渐变或单色渐变
- 双色渐变使用示例如下
html
<view class="lwu-bg-gradient-to-r-primary-info"></view>- 单色渐变使用示例如下
html
<view class="lwu-bg-gradient-to-r-primary"></view>注意事项
- 颜色和主题色不支持传色阶，如
lwu-bg-gradient-to-r-primary-0-info-1
渐变方向 t | r | b | l | tl | br | tr | bl
| 渐变方向 | 描述 | Properties | 平台兼容性说明 |
|---|---|---|---|
| t | 从下到上渐变 | background-image: linear-gradient(to top, (内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2); | H5、小程序、app-vue、app-nvue |
| r | 从左到右渐变 | background-image: linear-gradient(to right, (内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2); | H5、小程序、app-vue、app-nvue |
| b | 从上到下渐变 | background-image: linear-gradient(to bottom, (内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2); | H5、小程序、app-vue、app-nvue |
| l | 从右到左渐变 | background-image: linear-gradient(to left, (内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2); | H5、小程序、app-vue、app-nvue |
| tl | 从右下角到左上角渐变 | background-image: linear-gradient(to top left, (内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2); | H5、小程序、app-vue、app-nvue |
| br | 从左上角到右下角渐变 | background-image: linear-gradient(to top bottom right, (内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2); | H5、小程序、app-vue、app-nvue |
| tr | 从左下角到右上角渐变 | background-image: linear-gradient(to top right, (内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2); | H5、小程序、app-vue |
| bl | 从右上角到左下角渐变 | background-image: linear-gradient(to top bottom left, (内置颜色)主题色 | (内置颜色1)主题色1-(内置颜色2)主题色2); | H5、小程序、app-vue |