美文网首页
用css应该如何表示ps上的阴影

用css应该如何表示ps上的阴影

作者: wylb868 | 来源:发表于2022-02-15 09:08 被阅读0次

1.ps中各值如下

颜色(color):rgb(0,0,0)
不透明度(opacity):10%
角度(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

2. 转换为css

x-offset: 87 * cos(180°-(- 90°)) = 0px(87=Distance(ps上的距离),-90°=Angle(ps上的角度))
y-offset: 87 * sin(180°- (- 90°)) =-87px(同理,注意是sin,不是cos)
spread-radius: 0*73=0px(0=Spread(ps上的扩展),73=Size(ps上的大小))
blur-radius: 73-0=73px(73=Size(ps上的大小),0=spread-radius(上一行的数据))
color+opacity:rgba(0,0,0,.1) (.1就是10%,就是不透明度)

  box-shadow: 0 -87px 73px 0 rgba(0, 0, 0, .1);

相关文章

  • 用css应该如何表示ps上的阴影

    1.ps中各值如下 颜色(color):rgb(0,0,0)不透明度(opacity):10%角度(Angle):...

  • day10

    A、我今天学到了什么 1、如何设置边框线 例子: //CSS 2、如何让背景图片有阴影 //CSS 3、如何设置上...

  • 一些基础的前端面试题

    块级,行内,空元素如何表示 css盒子模型是什么 javascript的基础数据类型有哪些 用css如何实现垂直居...

  • 2018.10.25css3动画特效

    css3有哪些新增的特性?1,css权重 2,新增选择器 3,css3圆角,阴影,rgba(颜色表示法) ...

  • 文字阴影-凹凸文字、过渡属性

    一、字体样式缩写 二、css3中的文字阴影 01x:表示阴影在水平方向的偏移量,可以设置成负值,正负不表示大小,只...

  • CSS阴影

    CSS阴影 标签(空格分隔): CSS Text-Shadow text-shadow属性赶走了用Photosho...

  • CSS3

    前言-内容 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表...

  • canvas 阴影和图形变换

    一、阴影设置 1、阴影的颜色:值为标准的CSS颜色值,用于设定阴影颜色效果,默认是全透明的黑色 2、阴影模糊度:用...

  • css3阴影效果

    要实现css3的阴影方法,可以用css3的 background-image: -webkit-gradient(...

  • PS教程--弥散阴影

    PS教程--弥散阴影 PS教程!简单3步教你快速画出时尚漂亮的弥散阴影

网友评论

      本文标题:用css应该如何表示ps上的阴影

      本文链接:https://www.haomeiwen.com/subject/wmwclrtx.html