photoshop阴影投影和css box-shadow阴影关系
发布时间：2022/1/21 10:20:09 作者：Admin 阅读：247
广告：阿里云采购优惠专区
box-shadow通常的属性
box-shadow:方向(大部分不用，非必选) 水平偏移、竖直偏移、模糊距离、阴影尺寸、颜色
box-shadow细节
x-offset: 5 * cos(180°- 90°) = 0px（5=Distance(ps上的距离)，90°=Angle（ps上的角度））
y-offset: 5 * sin(180°- 90°) =0px（同理，注意是sin，不是cos）
spread-radius: 0*83=0px（0=Spread（ps上的扩展），83=Size(ps上的大小)）
blur-radius: 83-0=83px（83=Size(ps上的大小)，0=spread-radius（上一行的数据））
color+opacity：rgba(216,216,216,.97) (.97就是97%，就是不透明度)
用css来表示就是
"距离(Distance)"：阴影的距离。根据角度和距离可以换算出CSS3阴影中的x-offset和y-offet。
x-offset = Distance * cos(180 -Angle) ，
y-offset = Distance * sin(180 - Angle)
x-offset 3* cos(180 -120) =3*0.5=1.5
y-offet 3* sin(180 -120) = 3*0.8660254=2.598
box-shadow : 1.5px 2.6px 5px 3px rgba(0,0,0,.13);
广告：阿里云新人采购专场
相关文章
