box-shadow四个边框设置阴影样式
其实对于box-shadow，⽼⽩我也是⼀知半解，之前⽤的时候直接复制已有的，也没有仔细思考过box-shadow的数值分别对应什么，最后导致阴影的边如何⾃由控制，苦于懒⼈
⼀个⼀直没有正式去学习，今天⽆意中看到以下这篇⽂章，瞬间清醒有⽊有，看完整⽚⽂章，对于box-shadow阴影四个边的设置完全了如指掌了，再也不怕修改box-shadow
了！
对于div边框的阴影⼀直没有很好地理解，也⼀直不明⽩怎么给四个边框分别设置阴影。昨天项⽬中碰到了这个问题，就认真想了⼀下，在此总结⼀⼆。
⾸先，还是从官⽅解释说起。
⽹上的解释通常都是什么⽔平阴影长度、垂直阴影长度，略抽象。根据我的实验和理解，从坐标层⾯来理解⽐较直观，那么我们⾸先建⽴如下直⾓坐标系：（突然发现我的电脑上竟然没有装Visio，现学现卖⽤PS临时画了⼀个，原谅我）史上最简单介绍box-shadow四个边框设置阴影样式的⽂章 CSS学习第1张
OK。原点为基点，原点左侧为x轴负⽅向，值为负，右侧为正；原点下⽅为y轴正⽅向，值为正，上⽅为负。如上图箭头所指。好理解吗？不要嫌我啰嗦，正确理解坐标⽅向对于理解阴影画法⾄关重要。
好了，上代码。官⽅⽤语： box-shadow:1px 2px 3px 4px #ccc inset；
来分别看⼀下以上六个值的含义： 1px 从原点开始，沿x轴正⽅向的长度（倘若为负值，为沿x轴负⽅向的长度）；
2px 从原点开始，沿y轴正⽅向的长度；（倘若为负值，为沿y轴负⽅向的长度）；
3px 阴影的模糊度，只允许为正值；
4px 阴影扩展半径；
#ccc 阴影颜⾊；
inset 设置为内阴影（如果不写这个值，默认为外阴影）；
我们再详细点说，所谓内外阴影，其实就是指的是阴影在div的外⾯⼀圈还是在div的⾥⾯⼀圈，如下图：
史上最简单介绍box-shadow四个边框设置阴影样式的⽂章 CSS学习第2张外阴影史上最简单介绍box-shadow四个边框设置阴影样式的⽂章 CSS学习第3张内阴影
铺垫完毕，说正事——给四条边分别加阴影。
如果打算添加外部阴影，那么在div内部是不会显⽰阴影的。看起来好像是废话，来仔细分析⼀下。
将div放在直⾓坐标系中，则div上边与x轴重合，左边与y轴重合，没错吧。所以，对于上⾯⼀条边，沿y轴正⽅向的阴影不会显⽰，因为沿y轴正⽅向的长度已经进⼊到了div内
部。同样的，对于左侧边框，沿x轴正⽅向的长度也进⼊到了div内部，阴影不会显⽰。
对于右侧边框，则沿x轴负⽅向的长度不显⽰（不要纠结于原点位置，只考虑坐标⽅向。可以看做右边与y轴重合，⽅便理解）；对于下⽅边框（看做下边与x轴重合），沿y轴负
⽅向的长度进⼊div内部，不显⽰。
好吧，我的语⾔组织能⼒有待加强。将以下代码配上这⼀段的⽂字描述，就不难理解了。
box shadow怎么设置*说明：（以上部边为例进⾏说明）
1. 对于上边，沿x轴⽅向的偏移量显然没有意义，设为0px；
2. 沿y轴正⽅向阴影进⼊div内部，不显⽰，因此写为负数；
3. 扩展半径不要写，或者写成0px，这样就不会影响其他的边；
4. 颜⾊⾃定；
5. 模糊程度按需要⾃定；
6. 下、左、右边阴影按规律类推。
*/
box-shadow:    0px -10px 0px 0px #ff0000,  /*上边阴影红⾊*/
-10px 0px 0px 0px #3bee17,  /*左边阴影绿⾊*/
10px 0px 0px 0px #2279ee,    /*右边阴影蓝⾊*/
0px 10px 0px 0px #eede15;    /*下边阴影黄⾊*/
效果图
外阴影加好了。倘若是内阴影，可以按这个规律⾃⼰推⼀下。
试验中发现了⼀个问题：
对于上下边，相当⼲净漂亮。但是写左边的阴影时，上边会有⼀条细细的阴影；写右边阴影时，下边会有⼀条细细的阴影。不懂为什么。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。