ColorUI 使用文档 ColorUI 使用文档
文档
GitHub (opens new window)
文档
GitHub (opens new window)
  • 快速开始

    • 介绍
    • 快速使用
  • 基础元素

    • 布局
    • 背景
    • 文本
    • 图标
    • 按钮
    • 标签
    • 头像
    • 进度条
    • 边框阴影
      • 边框
      • 阴影
    • 加载
  • 交互组件

    • 操作条

      • 底部操作条
      • 标题操作条
      • 顶部操作条
      • 搜索&按钮组&输入操作条
    • 导航栏
    • 列表
    • 卡片
    • 表单
    • 时间轴
    • 聊天
    • 轮播
    • 模态框
    • 步骤条
  • 插件扩展

    • 索引列表
    • 微动画
    • 全屏抽屉
    • 垂直导航
  • 视图模式
  • 目录模式
目录

边框阴影

# 边框

在需要加边框的元素加上 class 类名 solid,加粗的就是 solids,然后还有单独四个不同的方向 solid-top|...

css 代码

.solid         四周
.solid-top     上
.solid-right   右
.solid-bottom  
.solid-left

演示代码

<view class="padding solid">四周</view>
<view class="padding solid-top">上</view>
<view class="padding solid-right">右</view>
<view class="padding solid-bottom">下</view>
<view class="padding solid-left">左</view>

# 阴影

在需要加阴影的元素加上 class 类名 shadow 即可

css 代码

.shadow              默认阴影
.shadow bg-blue|...  根据背景颜色而改变的阴影
.shadow shadow-lg    长阴影
.shadow-warp         翘边阴影

演示代码

<view class="padding-xl radius shadow bg-white">默认阴影</view>
<view class="padding-xl radius shadow bg-blue">根据背景颜色而改变的阴影</view>
<view class="padding-xl radius shadow shadow-lg bg-white">长阴影</view>
<view class="padding-xl radius shadow shadow-lg bg-blue">长阴影</view>
<view class="padding-xl radius shadow-warp bg-white">翘边阴影</view>
<view class="padding-xl radius shadow-blur bg-red bg-img" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91005.jpg);">
    <view>根据背景图而改变的阴影</view>
</view>
上次更新: 2024/05/01, 21:37:52
进度条
加载

← 进度条 加载→

Theme by Vdoing | Copyright © 2022-2024 miren | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式