盒子阴影
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);