标题关于Css中阴影处理小技巧（单边阴影也有哟）
最近我在学习css时，在调节阴影部分的时候，怎么调节都达不到我预期的效果要么 阴影部分太模糊范围太广，要么阴影部分太生硬不美观。最终我自己研究出来一种调节方法非常实用；
首先我们必须得知道 box-shadow有哪些属性 ：水平阴影位置（可为负值），垂直阴影位置（可为负值），阴影模糊大小（不可为负值），阴影延伸大小（可为负值），颜色。以及inset（内阴影）默认是outset（外阴影）
box-shadow: 10px 0px 10px -10px inset grey//x，y轴阴影值 模糊值 延伸值 阴影方向 颜色
我的思想是充分利用阴影延伸属性
下面是一些事例：
延伸阴影为负值时
1.
box-shadow: 10px 0px 10px -8px;
如图所是:（请只看阴影忽略其他部分）
- 延伸属性为零时：
box-shadow: 10px 0px 10px 0px;
3.延伸属性为正值时：
box-shadow: 10px 0px 10px 10px;
从这三张图片对比来看该阴影是默认的是黑色，调节阴影时，可以对延伸属性负值充分利用可以得到很好的阴影效果。
特别是对于需要深色阴影，但是又不希望阴影过于厚重，以及范围过大，可以调节阴影延伸属性。
单边阴影也可以用延伸属性处理：
首先，我们需要理解box-shadow中延伸属性和模糊属性
模糊属性是模糊的范围就是使阴影变的柔软，同时越柔软模糊的范围越大，延伸属性就是扩大或缩小你的模糊范围；这样一来，这里面就产生了一种思想：用延伸效果减掉多余的模糊效果
无延伸属性的阴影效果：
box-shadow: 0px 10px 10px
添加延伸属性后形成的单边阴影效果：
box-shadow: 0px 10px 10px -10px ;//
掌握了延伸属性，你就可以根据设置 xy轴的值去设置任意单边效果
根据x y轴的值确定你需要那一方向的单边阴影，然后设置模糊效果与延伸效果 注意延伸效果取模糊效果的相反数值（也可以取模糊值相近的值的相反数，具体的情况可根据你需要的阴影强度去调节），这样就能减掉厚重且多余边的阴影
我是小白，每天要进步。不定时分享一些小技巧
我的分享希望对你有用朋友———我们一起进步
若有不足请指正
转载：https://blog.csdn.net/m0_46456778/article/details/115563782
查看评论