CSS第八章 CSS3_2

1. 文字阴影text-shadow

文字的阴影
取值： x值 y值 blur值  color 

注：阴影的默认颜色是跟文字样色相同，blur值越大阴影越模糊。
注：通过逗号的方式进行分割，可以设置多阴影

div{ font-size: 50px; color: red; text-shadow: 10px 10px 5px blue,-10px -10px 10px green;}

火焰字：
div{ font-size: 60px; color:red; text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;}

2. 盒子阴影box-shadow

x
y
blur
spread
color
inset
多阴影

注：盒子阴影的默认样色是黑色。
注：默认就是外阴影，如果设置outset，是不会起作用的，可选的值只有inset(内阴影)。

box-shadow: 10px 10px 10px blue;分别是x、y、blur和color

box-shadow: 10px 10px 10px 10px blue;分别是x、y、blur、spread和color

注：spread会扩大阴影的范围，区别于x和y偏移量。

box-shadow: 10px 10px 10px 10px blue inset 内阴影

盒子阴影也支持多阴影，用逗号隔开。
box-shadow: 10px 10px 10px 10px blue, 10px 10px 10px 10px green inset;

小米官网盒子阴影练习：

<style>
    ul{
      list-style: none;}
    li{
      float:left; margin:50px; cursor: pointer; position:relative; top:0; transition: .5s; border-radius: 3px;}
    li:hover{
      top:-3px; box-shadow: 0px 5px 10px 3px #ccc;}
</style>

3. mask 遮罩

url        添加遮罩图片
repeat     设置是否平铺
x ，y       设置遮罩位置
w ，h       指定大小，前面用斜线 / 与x，y隔开 

也支持多遮罩，用逗号隔开。

注：mask目前还没有标准化，所以需要添加浏览器前缀。

注：默认是x、y都平铺。不平铺no-repeat

<style>
    .mask{
      width:500px; height:500px; background:url(./img/puppy.jpg); -webkit-mask: url(./img/car.png) no-repeat 160px 100px / 300px 300px; transition:1s;}

    .mask:hover{
      width:500px; height:500px; background:url(./img/puppy.jpg); -webkit-mask: url(./img/love.png) no-repeat 200px 50px / 200px 200px;}
</style>

是谁在开车？

是柯基！

多遮罩：

.mask{ width:500px; height:500px; background:url(./img/puppy.jpg); -webkit-mask: url(./img/car.png) no-repeat 160px 100px / 300px 300px,url(./img/love.png) no-repeat 110px center / 100px 100px,url(./img/love.png) no-repeat right center / 100px 100px; transition:1s;}

4. 倒影box-reflect

位置：above   上
	 below   下
	 left    左
	 right   右
间距：数值，如20px
遮罩 | 渐变 （渐变仅针对透明度的，不能支持颜色的渐变。）

.box{ -webkit-box-reflect: below 20px url(./img/love.png);} 遮罩

.box{ margin:50px auto; width:100px; -webkit-box-reflect: below 20px linear-gradient( rgba(255,255,255,0) 50%, rgba(255,255,255,1));}

扩展：利用scale为-1也可以实现翻转效果。

scaleX(1)

scaleX(-1) 左右翻转

scaleY(-1)上下翻转

scale(-1)两个都翻转

实现倒影的效果其实scale方法更灵活，且具有兼容性。