一. 反射（倒影） -webkit-box-reflect
<1> 语法
-webkit-box-reflect:方向[ above--上 | below--下 | right--右 | left--左 ]，偏移量，遮罩图片
栗1： 下倒影
.reflect-bottom {
-webkit-box-reflect: below;
}
栗2： 右倒影 有偏移
.reflect-right-translate {
-webkit-box-reflect: right 10px;
}
栗3： 下倒影 渐变
reflect-bottom-mask {
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
}
栗4： 下倒影 （图片遮罩）
即原图片只会当指定图片遮罩的背景！！！ 如下，风景是原图片，“守”是指定的遮罩
二. 文本
<1> 换行 word-wrap
word-wrap:normal默认 ：不会换行，会溢出在外面显示
word-wrap:break-word会换行
<2> 换行时单词拆分的原则 word-break
-
word-break:normal：浏览器默认的换行规则 -
word-break:keep-all：只能在空格或者连字符 - 处换行 -
word-break:break-all：允许在单词内部换行（即允许破坏单词完整性）！！
<3> 超出省略号 text-overflow
text-overflow:clip: 不会有省略号，超出部分会直接被裁剪text-overflow:ellipsis： 会有省略号
此时，会显得太拥挤，如果我们设置 padding ，就会出现以下：
可以通过设置行高来解决：
<4> 文字阴影 text-shadow
text-shadow: 水平阴影 垂直阴影 模糊的距离 以及阴影的颜色。
- 模糊距离，还是值越大，阴影越延伸，越模糊！！！
栗子：
text-shadow: 0 0 10px #f00;
三. 颜色
<1> rgba
rgba(rgb为颜色值 , a为透明度)
color: rgba(255,00,00,1);
background: rgba(00,00,00,.5);
