分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

【css】box-shadow匹配ps投影效果/text-shadow

发布时间:2023-09-06 01:37责任编辑:熊小新关键词:暂无标签

参照资料:http://blog.csdn.net/lpandeng/article/details/72778451

box-shaow: 距离(x-offset y-offset)  虚影(blur-radius)  扩展(spread-radius)    投影色( rgba);

"角度(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 。

以上图中的数值为例。

eg:

如上图:

x-offset = Distance * cos(180 -Angle) = 3*cos(180-145)= 4.09px

y-offset = Distance * sin(180 - Angle) = 3*sin(180-145)= 2.87px

blur-radius = Size - spread-radius = 10 - spread*size = 10- 10*6%= 9.4px

spread-radius = spread*size = 10*6% =0.6px

rgba 值 (118,113,133,.75)

则,对应  box-shaow: 4.09px 2.87px 9.4px 0.6px rgba(118,113,133,0.75)

类似text-shaow :4.09px 2.87px 9.4px  rgba(118,113,133,0.75)

(区别在于 text-shadow 没有 spread-radius 所以不能完全实现PS中的效果)

【css】box-shadow匹配ps投影效果/text-shadow

原文地址:https://www.cnblogs.com/smilexumu/p/8320349.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved