联系我们
cms新闻网站系统、政府cms定制开发

广州网站建设公司-阅速公司

报纸新媒体网站内容发布一体化解决方案联系电话
/
http://www.ysneo.com/
广州网站建设公司
您当前位置:首页>网站技术

网站技术

photoshop阴影投影和css box-shadow阴影关系

发布时间:2022/1/21 10:20:09  作者:Admin  阅读:144  

广告:阿里云采购优惠专区

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);

广告:阿里云新人采购专场

相关文章
box-shadow
photoshop
cms新闻系统购买咨询
扫描关注 广州阅速软件科技有限公司
扫描关注 广州阅速科技