Photshop投影与CSS中的box-shadow转换

参考: https://www.jb51.net/css/404167.html

(一)box-shadow

语法
box-shadow: h-shadow v-shadow blur spread color inset;
描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离
spread可选。阴影的尺寸。
color可选。阴影的颜色。
inset可选。将外部阴影 (outset) 改为内部阴影。

(二)实操

在这里插入图片描述

  • “混合模式”:Photoshop提供了各式各样的混合模式,但是box-shadow只支持正常模式(normal)。

  • “颜色(color)”:阴影颜色。对应于box-shadow中的 color 值。

  • “不透明度(opacity)”:阴影的不透明度。对应于color中 rgba() 中的 a 值。

  • “角度(Angle)”:投影的角度。

  • “距离(Distance)”:阴影的距离。根据角度和距离可以换算出box-shadow的h-shadow和v-shadow。 h-shadow = Distance * cos(180 -Angle) , v-shadow = Distance * sin(180 - Angle)

  • “扩展(Spread)”:阴影的扩展大小。控制阴影实体颜色和虚化颜色的多少。 Spread * Size = 阴影中实体颜色的大小 。剩下的就是虚化的颜色。box-shadow中 spread = Spread * Size

  • “大小(Size)”:阴影的大小。在CSS3中 blur + spread = Size 即 blur = Size - spread

以上边图片为例
h-shadow: 1 * cos(180 - 90)
v-shadow: 1 * sin(180 - 90)
spread: 0 * 5
blur: 5 - 0

所以最终box-shadow的值应该为:

box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值