Tailwind Effects

Tailwind特效

• 阴影shadow
• 不透明度opacity

阴影shadow

这里的阴影特指CSS3中新增的box-shadow盒子阴影属性，box-shadow属性用于定义元素一个或多个阴影效果，可用于为对象添加图层阴影效果。

box-shadow: <offset-x> <offset-y> <blur-radius> <spread> <color> <inset>;

属性值	描述
offset-x	水平阴影偏移量，允许为负值。
offset-y	垂直阴影偏移量，允许为负值。
blur-radius	模糊半径
spread-radius	阴影扩展大小，允许为负值。
color	阴影颜色
inset	投影方式，默认阴影在盒子外（outset），添加inset偶则转化为盒子内部。

例如：

box-shadow: 120px 80px 40px 20px;

demo

取值说明

• offset-x/offset-y
offset-x和offset-y两个length值用于设置阴影的偏移量，offset-x用于设置水平偏移量，如果为负值则阴影位于元素左边。offset-y用于设置垂直阴影的偏移量，若为负值则阴影会位于元素上方。若两者均为0则阴影会位于元素后面。
• blur-radius
blur-radius应用设置模糊面积大小，其值越大模糊面积也就越大，阴影越大也就越淡。blur-radius模糊半径不能设置为负值。其默认值为0表示阴影边缘锐利。
• spread-radius
spread-radius扩展半径用于设置阴影扩展或收缩效果，当取正值时阴影扩大，当取负值时阴影收缩，默认为0表示阴影与元素同样大小。

blur-radius用于设置阴影的模糊半径，其值决定以阴影的模糊程序。而spread-radius用于设置阴影所占区域的大小。

多重阴影

box-shadow可使用一个或多个投影，若使用多个投影则必须使用,逗号进行分割。

例如：设置多重阴影

box-shadow:
    0 0 60px 30px #fff,
    0 0 100px 60px #f0f,
    0 0 140px 90px #0ff;

demo

元素从内向外共设置了三层阴影

• 内层：0 0 60px 30px #fff白色，模糊半径30px，扩展半径60px。
• 中间：0 0 100px 60px #f0f洋红色，模糊半径60px，扩展半径100px。
• 外层：0 0 140px 90px #0ff青色，模糊半径90px，扩展半径140px。

内外三层，随着不断加大的模糊半径和扩展半径来实现。

Tailwind中阴影工具类

工具类	属性
.shadow-none	box-shadow: none;
.shadow-xs	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
.shadow-sm	box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);
.shadow	box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
.shadow-md	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
.shadow-lg	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
.shadow-xl	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
.shadow-2xl	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
.shadow-inner	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
.shadow-outline	box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);

不透明度opacity

CSS3中的opacity属性用于设置元素的不透明级别，默认规定取值范围从[0.0~1.0]，即从0.0完全透明到1.0完全不透明，其默认值为1表示完全不透明。

取值范围	描述
0	表示元素完全透明，此时元素处于不可见状态。
1	表示元素完全不透明，此时元素处于完全可见状态。

opacity取值即包含也代表通道的透明度，也就是alpha通道的值。

opacity不透明度需与background-color背景色默认值transparent透明度加以区分，以免混淆。

opacity: value | insert;

opacity不透明度属性用于设置一个元素后面背景的被覆盖程度，当opacity属性值应用于某个元素上时，是将元素及其内容当成一个整体来看待，即使opacity没有被子元素继承。

Tailwind中opacity工具类将不透明度划分为5个等级，其中每隔.25即1/4划分出一个不透明度的等级。

工具类	属性
.opacity-100	opacity:1;
.opacity-75	opacity:.75;
.opacity-50	opacity:.5;
.opacity-25	opacity:25;
.opacity-0	opacity:0;