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);