CSS 3 阴影,倒影,渐变

盒子阴影

box-shadow:盒子的阴影
第一个参数:设置的是阴影的水平偏移量
第二个参数:设置的是阴影的垂直偏移量
第三个参数:设置阴影的模糊程度
第四个参数:设置阴影外延值
第五个参数:阴影的颜色
第六个参数:设置阴影的类型为内阴影(以自身作为参照物)
可以同时设置两个
box-shadow: -10px -10px 5px 5px red,10px 10px 5px 5px red ;

/*阴影允许设置多组, 使用','隔开*/
box-shadow: -10px -10px 5px 5px red inset, 10px 10px 5px 5px red inset;

设置倒影

第一个参数:设置的是倒影的方位 below向下 above向上 left   right
第二个参数:设置的是倒影的距离

 -webkit-box-reflect: left -40px;
margin: 100px;

设置渐变

线性渐变

第一个参数设置是线性渐变的方向(两种设置方式)
后面的多个参数表示的是渐变的颜色断点

设置渐变方向
(1)根据度数:顺时针方向, 12点表示0或360deg 3点钟表示90deg;
(2)根据方位名词 to top,bottom,left,right,left top,right top,left bottom,right bottom

background: linear-gradient(to left top,red, orange, yellow, green);

径向渐变

径向渐变:从元素中心向四周放射线渐变
第一个参数:circle ellipse 圆形 椭圆

background: radial-gradient(ellipse, red, lightblue);


100px表示设置的是渐变的半径大小

background: radial-gradient(100px, cyan, blue);

background: radial-gradient(80% 20%, cyan, blue);

设置渐变中心 at 方位名词
background: radial-gradient(at top, cyan, blue);