学习CSS3的曲线阴影和翘边阴影的写法

阴影的原理：多个投影的重叠  以及  由主阴影和另外的阴影重叠而成的

一、曲边阴影

用box-shadow

box-shadow的参数有h-shadow(水平阴影的位置)v-shadow（垂直阴影的位置）都可为负值，都为必写的值（当v-shadow和h-shadow值为0的时候阴影就是四面都有）。blur是模糊距离，spread是阴影的尺寸，color是阴影的颜色，设置颜色时建议用rgba（0，0，0，0.9）其中最后一个值是设的不透明度，从0到1，越接近1代表透明度越低。inset是将外部阴影（outset）改为内部阴影。如果用内阴影要在一个box-shadow后面用逗号隔开，设置完属性后 （空格）inset。

为div设置圆角时用border-radius，

border-radius：100px/10px表示水平方向上的半径为100px,垂直方向上半径为10px

还要为次投影设置z-index：-1使得这个投影在主投影的下面，设置content:'',表示插入一个这个投影在div里面。尽管content:''的单引号里可以插入文字之类的但显然我们要的不是这个而是空白的阴影（这句话前后矛盾了哈）

如果想让阴影的颜色更深一点，一定程度上改变不透明度也行，但是也可以用阴影的重叠达到效果。

二、翘边阴影

在曲线阴影的前提工作下，将次投影

做图形的转换，用transform，其语法为transform:none/transform-functions,参数有skew(x-angle,y-angle)定义沿着x轴和y轴的2D倾斜转换。skewX定义沿着X轴的2D倾斜转换，同理skewY。向左做倾斜就令为负数。用rotate表示旋转多少度。