Shadow 阴影

对应文件

@vusui/css/lib/shadow.css

元素阴影

size 值表
1 2 3 4 5 6 7 8 9 10 15 20 25 30

使用 vus-bs-{size} 类，设置元素阴影效果 box-shadow: 0 0 {size}px rgba(0, 0, 0, 0.1);。

使用 vus-bs-(1-10)-{size} 类，设置元素向下偏移阴影效果。

使用 vus-bs-none 类，清除阴影效果。

vus-bs-1

vus-bs-5

vus-bs-10

vus-bs-20

vus-bs-30

vus-bs-1-1

vus-bs-2-5

vus-bs-5-10

vus-bs-8-20

vus-bs-10-30

<div class="vus-bs-1"></div>
<div class="vus-bs-20"></div>
<div class="vus-bs-30"></div>

<!-- 向下偏移 -->
<div class="vus-bs-1-1"></div>
<div class="vus-bs-2-5"></div>
<div class="vus-bs-5-8"></div>
<div class="vus-bs-10-30"></div>

文本阴影

size 值表
1 2 3 4 5

使用 vus-ts-{size} 类，设置文本阴影效果 text-shadow: 0 0 {size}px rgba(0, 0, 0, 0.3);。

使用 vus-ts-(1-5)-{size} 类，设置文本向下偏移阴影效果。

使用 vus-ts-none 类，清除阴影效果。

vus-ts-1

vus-ts-2

vus-ts-5

vus-ts-1-1

vus-ts-2-3

vus-ts-5-5

<div class="vus-ts-1"></div>
<div class="vus-ts-20"></div>
<div class="vus-ts-30"></div>

<!-- 向下偏移 -->
<div class="vus-ts-1-1"></div>
<div class="vus-ts-2-4"></div>
<div class="vus-ts-5-5"></div>