tailwindcss学习笔记之box-shadow

box-shadow用于给盒子添加阴影。

1、box-shadow基础

1.1、语法

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow 属性把一个或多个下拉阴影添加到边框上。该属性是一个用于都好分割阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值 和 一个可选的 inset 关键字来规定。省略长度的值是 0 。

1.2、示例

1.2.1、示例1：

box-shadow: 10px 10px;

1.2.2、示例2（增加阴影的颜色）：

box-shadow: 10px 10px red;

1.2.3、示例3（增加模糊距离）：

box-shadow: 10px 10px 20px red;

1.2.4、示例4（增加阴影的大小）：

box-shadow: 10px 10px 20px 5px red;

1.2.5、示例5（在示例4基础上再增大阴影大小）：

box-shadow: 10px 10px 20px 25px red;

1.2.6、示例6（内嵌阴影）：

box-shadow: 10px 10px 20px 5px red inset;

1.2.7、示例7（外阴影正负值）：

1.2.8、示例8（内阴影正负值）：

1.3、阶段小结

主要是要区分内阴影和外阴影，感觉实践中很少用到内阴影吧，默认的外阴影是从右下角开始，内阴影是从左上角开始，从7和8的例子中可以看到，外阴影和内阴影的分布刚好是对角。

1.4、多个阴影叠加

1.4.1、示例1：

box-shadow: 10px 10px red, 20px 20px greenyellow;

1.4.2、示例2：

box-shadow: 10px 10px red, 
            -10px 10px greenyellow, 
            10px -10px cornflowerblue, 
            -10px -10px darkolivegreen;

2、tailwindcss之box-shadow

2.1、基本示例1：

使用像 `shadow-md` 和 `shadow-lg`  这样的原子类给元素设置外阴影

<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>

2.2、Changing the opactiy 改变透明度

使用透明度modifier 来调整阴影的透明度

<div class="shadow-xl ..."></div>
<div class="shadow-xl/20 ..."></div>
<div class="shadow-xl/30 ..."></div>

2.3、Setting the shadow color 设置阴影颜色

使用像 `shadow-indigo-500` 和 `shadow-cyan-500/50` 这样的原子类来设置阴影的颜色

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

2.4、Adding an inset shadow 增加内阴影

使用像 `` 和 `` 这样的原子类来设置元素的内阴影

<div class="inset-shadow-2xs ..."></div>
<div class="inset-shadow-xs ..."></div>
<div class="inset-shadow-sm ..."></div>

2.5、Setting the inset shadow color 设置内阴影颜色

使用诸如 `inset-shadow-indigo-500` 和 `inset-shadow-cyan-500/50` 之类的原子类来设置元素的内阴影

<div class="inset-shadow-sm inset-shadow-indigo-500 ..."></div>
<div class="inset-shadow-sm inset-shadow-indigo-500/50 ..."></div>

2.6、Adding a ring 添加实心边框

<button class="ring ...">Subscribe</button>
<button class="ring-2 ...">Subscribe</button>
<button class="ring-4 ...">Subscribe</button>

2.7、Setting the ring color 设置实现边框颜色

使用诸如 `ring-indigo-500` 和 `ring-cyan-500/50` 之类的原子类来改变边框的颜色

<button class="ring-2 ring-blue-500 ...">Subscribe</button>
<button class="ring-2 ring-blue-500/50 ...">Subscribe</button>

2.8、Adding an inset ring 增加内边框

使用诸如 `inset-ring` 和 `inset-ring-<number>` 之类的工具类 像 `inset-ring-2` 和 `inset-ring-4` 来设置实心边框内阴影

<button class="inset-ring ...">Subscribe</button>
<button class="inset-ring-2 ...">Subscribe</button>
<button class="inset-ring-4 ...">Subscribe</button>

2.9、Setting the inset ring color 设置内阴影实心框颜色

使用诸如 `inset-ring-indigo-500` 和 `inset-ring-cyan-500/50` 之类的原子类来设置元素内阴影实心框颜色

<button class="inset-ring-2 inset-ring-blue-500 ...">Subscribe</button>
<button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribe</button>

2.10、Removing a box shadow 去除元素阴影

使用 `shadow-none`，`inset-shadow-none`, `ring-0`, 和 `inset-ring-0` 原子类来去除元素已存在的阴影

<div class="shadow-none ..."></div>

2.11、Using a custom value 使用自定义值

使用诸如 `shadow-[<value>]` , `inset-shadow-[<value>]`, `ring-[<value>]`, 和 `inset-ring-[<value>]` 之类的原子类来给元素设置基于完整自定义值的阴影

<div class="shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">
  <!-- ... -->
</div>

d对于css变量，可以使用 `shadow-(<custom-property>)` 语法：

<div class="shadow-(--my-shadow) ...">
  <!-- ... -->
</div>

`shadow-(<custom-property>)`是 `shadow-[var(<custom-property>)]`的简写，自动添加 `var()` 方法。

3、tailwindcss box-shadow 原子类

3.1、四大类

3.2、设置大小类

3.3、自定义类