photoshop陰影投影和css box-shadow陰影關系
發布時間:2022/1/21 10:20:09 作者:Admin 閱讀:344
廣告:
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);
廣告:
相關文章