TPower DesignAppearance
阴影
| Class | 属性Properties |
|---|---|
| shadow-shadow-1-color-up | box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12); |
| shadow-shadow-1-color-down | box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12); |
| shadow-shadow-1-color-left | box-shadow: -2px 0 8px 0 rgba(0, 0, 0, 0.12); |
| shadow-shadow-1-color-right | box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.12); |
| shadow-shadow-2-color-up | box-shadow: 0 -4px 12px 1px rgba(0, 0, 0, 0.12); |
| shadow-shadow-2-color-down | box-shadow: 0 4px 12px 1px rgba(0, 0, 0, 0.12); |
| shadow-shadow-2-color-left | box-shadow: -4px 0 12px 1px rgba(0, 0, 0, 0.12); |
| shadow-shadow-2-color-right | box-shadow: 4px 0 12px 1px rgba(0, 0, 0, 0.12); |
| shadow-shadow-3-color-up | box-shadow: 0 -6px 16px 2px rgba(0, 0, 0, 0.12); |
| shadow-shadow-3-color-down | box-shadow: 0 6px 16px 2px rgba(0, 0, 0, 0.12); |
| shadow-shadow-3-color-left | box-shadow: -6px 0 16px 2px rgba(0, 0, 0, 0.12); |
| shadow-shadow-3-color-right | box-shadow: 6px 0 16px 2px rgba(0, 0, 0, 0.12); |
基本示例
使用 shadow-* 工具将不同大小的外框阴影应用于元素。
shadow-1-color
shadow-shadow-1-color-up
shadow-shadow-1-color-down
shadow-shadow-1-color-left
shadow-shadow-1-color-right
shadow-2-color
shadow-shadow-2-color-up
shadow-shadow-2-color-down
shadow-shadow-2-color-left
shadow-shadow-2-color-right
shadow-3-color
shadow-shadow-3-color-up
shadow-shadow-3-color-down
shadow-shadow-3-color-left
shadow-shadow-3-color-right
html
<!-- shadow-1-color -->
<div class="shadow-shadow-1-color-up"></div>
<div class="shadow-shadow-1-color-down"></div>
<div class="shadow-shadow-1-color-left"></div>
<div class="shadow-shadow-1-color-right"></div>
<!-- shadow-2-color -->
<div class="shadow-shadow-2-color-up"></div>
<div class="shadow-shadow-2-color-down"></div>
<div class="shadow-shadow-2-color-left"></div>
<div class="shadow-shadow-2-color-right"></div>
<!-- shadow-3-color -->
<div class="shadow-shadow-3-color-up"></div>
<div class="shadow-shadow-3-color-down"></div>
<div class="shadow-shadow-3-color-left"></div>
<div class="shadow-shadow-3-color-right"></div>