css样式学习

【1】、box-shadow（外部阴影+内部阴影）
外部阴影
参考文档：https://www.runoob.com/cssref/css3-pr-box-shadow.html
属性有：

生成的阴影是一个和区域大小一致的带有颜色的块不移动的话就看不到阴影被挡住，取正数移动的话，水平正数就是往右移动正数，负数往左，垂直正数往下，负数往上
一、只写一个
box-shadow: 10px 10px 5px #888888;}
效果：

二、想实现上下左右不同阴影颜色
每一块是一个方向的，用逗号隔开可以根据自己的习惯确定顺序，然后应该是每一组都是一个完整的阴影，即写了四个的话，其实有4个一样的阴影，只是通过移动展示成不一样的效果，让它看起来好像是那样，比如从第一个开始是上下左右还是什么，我这里取上右下左。

注意：方向是水平阴影、垂直阴影两个参数的正负值决定的
**先随便写4个值(逗号隔开)：
box-shadow: 10px 10px 5px 0 red,10px 10px 5px 0 blue,10px 10px 5px 0 green,10px 10px 5px 0 pink;
**效果：

改成想要的上右下左，先改上边想要的效果：在上边，水平方向不用移动，模糊距离不需要，阴影大小默认，则阴影要往上移，则垂直方向往上移动，变成：
*box-shadow: 0 -10px 0 0 red,10px 10px 5px 0 blue,10px 10px 5px 0 green,10px 10px 5px 0 pink;
**效果：

第二个是右边，则同理：
改成：10px 0 0 0 blue
其他同理，最终：
box-shadow: 0 -10px 0 0 red,10px 0 0 0 blue,0 10px 0 0 green,-10px 0 0 0 pink;
效果:
内部阴影
加inset
拿同个例子，上面的加上inset
box-shadow: 0 -10px 0 0 red inset,10px 0 0 0 blue inset,0 10px 0 0 green inset,-10px 0 0 0 pink inset;
效果：

会发现都是反的，应该是往中心伸展，达到内部阴影的效果，然后垂直方向上正数就是上面的往下，负数就是下面的往上，水平方向是正数是左边往右，负数是右边往左，根据这个调整一下：
box-shadow: 0 10px 0 0 red inset,-10px 0 0 0 blue inset,0 -10px 0 0 green inset,10px 0 0 0 pink inset;

效果：

然后只想要留住一个方向的话：（这里写上左）
box-shadow: 0 10px 0 0 red inset,0 0 ,0 0,10px 0 0 0 pink inset;

效果：

改成有模糊距离的:
box-shadow: 0 10px 5px 0 red inset,0 0 ,0 0,10px 0 5px 0 pink inset;

效果：

会发现四周出现了很多不应该出现的阴影，加了距离和模糊之后阴影整体都是同时会生效的，所以看起来就是这样，所以要结合另一个方向的移动加上阴影大小的属性将多余的部分隐藏掉，像这样：
box-shadow: 0 10px 5px -10px red inset,0 0 ,0 0,10px 0 5px -5px pink inset;

注意：这里一般自己想要看到的方向（上下左右）上的阴影应该是比较多的，所以如果阴影大小取一样的负值，则其他方向上的阴影就更容易看不到，此时加上模糊距离，则这个方向的总距离（显示的范围）应该是移动的距离（水平或者垂直的赋值，看是哪个方向的，即第一、第二个参数）+ 模糊距离+阴影大小。
即总距离 = 移动的距离 + 模糊距离+阴影大小(外部阴影也适用)
这个例子的话，因为阴影大小是负数，所以最终上方的阴影显示为：10 + 5 +（-10）= 5px,左右下的阴影-10px之后都看不到了，粉色的左边同理可知
效果：

这个是个人理解，要是有误区，麻烦告知~