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

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> Photoshop投影与CSS中box-shadow的转换

box-shadow是给元素块添加周边阴影效果,基本语法是:

{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

{box-shadow:方向     水平偏移 竖直偏移  模糊距离       阴影尺寸}

以下是ps添加投影的功能界面:

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

 

 

 

 

 

 

 

 

 

 

 

 

图一:ps添加投影功能界面

上图参数含义为:

混合模式:Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal)。

颜色(color):阴影颜色。对应于CSS3阴影中的 color 值。

不透明度(opacity):阴影的不透明度。对应于CSS3阴影的颜色 rgba() 中的 a 值。

角度(Angle):投影的角度。

距离(Distance):阴影的距离。根据角度和距离可以换算出CSS3阴影中的x-offset和y-offet。 x-offset = Distance * cos(180 -Angle) , y-offset = Distance * sin(180 - Angle)

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

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

以上图中的数值为例,对应CSS中box-shadow的各参数值为:

color: rgba(118,113,113,.75)

x-offset: 5 * cos(180°- 145°) = 4.09px

y-offset: 5 * sin(180°- 145°) = 2.87px

spread-radius: 10 * 6% = 0.6px

blur-radius: 10 - 0.6 = 9.4px;

box-shadow: 4.09px 2.87px 9.4px 0.6px rgba(118,113,113,.75);

 

 

始发于微信公众号: 前端麻辣烫

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> Photoshop投影与CSS中box-shadow的转换


 上一篇
【加精】流行的前端技术图谱体系 【加精】流行的前端技术图谱体系
链接:cnblogs.com/jofun/p/9073414.html 微信文章会自动压缩,比较清晰的可以公众号回复“前端技术图谱” 仔细想想,这要是全学会了还得了,也太不切实际了。还是来看看现在流行的是有哪些东西,
2021-04-05
下一篇 
CSS编码规范之书写格式 CSS编码规范之书写格式
不同的人有不同的编码风格,但是为了写出更高效易读的代码,还是要遵守一定的规范的~ 这些规范是在团队开发过程中,集思广益总结出来的,不是很全面,如果你有更好的意见,不妨留言告知我们,我们一起打造一个良好的前端生态环境! CSS书写规范 1、简
2021-04-05