Shadow 阴影
使用说明
对标签使用ax-shadow
即可使用常规阴影,既实现区块浅色阴影,也不会与实边模糊。
<section class="demo-section ax-shadow">常规阴影</section> <div class="ax-break"></div> <section class="demo-section ax-shadow ax-border">带实边的常规阴影</section>
风格
对标签使用ax-shadow-*
即可使用不同风格的阴影。本框架定了5种阴影风格,分别如下:
- ax-shadow,常规阴影,既实现区块浅色阴影,也不会与实边模糊。
- ax-shadow-border,用阴影模拟实边。
- ax-shadow-light,极浅的阴影。
- ax-shadow-dark,较深的阴影。
- ax-shadow-cloud,范围较大的阴影。
<section class="demo-section ax-shadow">ax-shadow</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-border">ax-shadow-border</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-light">ax-shadow-light</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-dark">ax-shadow-dark</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-cloud">ax-shadow-cloud</section>
色彩
对标签使用ax-shadow-*
即可使用不同色彩的阴影。本框架定了7种彩色阴影,分别如下:
- ax-shadow-primary,主色阴影(蓝色)。
- ax-shadow-secondary,辅色阴影(灰蓝色)。
- ax-shadow-success,绿色阴影。
- ax-shadow-danger,红色阴影。
- ax-shadow-info,青色阴影。
- ax-shadow-warning,黄色阴影。
- ax-shadow-ad,橙色阴影。
<section class="demo-section ax-shadow-primary">ax-shadow-primary</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-secondary">ax-shadow-secondary</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-success">ax-shadow-success</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-danger">ax-shadow-danger</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-info">ax-shadow-info</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-warning">ax-shadow-warning</section> <div class="ax-break"></div> <section class="demo-section ax-shadow-ad">ax-shadow-ad</section>