"混合模式"：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 。

以上图中的数值为例。

color: rgba(118,113,113,.75)x-offset: 5 * cos(180°- 145°) = 4.09pxy-offset: 5 * sin(180°- 145°) = 2.87pxspread-radius: 10 * 6% = 0.6pxblur-radius: 10 - 0.6 = 9.4px;
box-shadow: 4.09px 2.87px 9.4px 0.6px rgba(118,113,113,.75);text-shadow: 4.09px 2.87px 9.4px rgba(118,113,113,.75);

text-shadow 没有 spread-radius 所以不能完全实现PS中的效果。

Photoshop投影和CSS box-shadow转换的更多相关文章

  1. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  2. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  3. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  4. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  5. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  6. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  7. CSS Box Model All In One

    CSS Box Model All In One CSS 盒子模型 All In One CSS Box Model CSS Box Model Module Level 3 W3C Working ...

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

    box-shadow是给元素块添加周边阴影效果基本语法是: {box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} ...

  9. js使用CSS将图片转换成黑白(灰色、置灰)

    详细内容请点击 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的. 不过,时代发展,如今,CSS3的逐步推进,我们也开始 ...

随机推荐

  1. NET基础（3）：is 和 as 操作符

    在C#语言中进行类型转换的另外一种方式是使用is和as操作符.is检查对象是否兼容于指定类型,返回Boolean值true或false.注意,is操作符永远不抛出异常,例如以下代码: Object o ...

  2. c语言第11次作业

    #include<stdio.h> void sum(int *p,int n) { ]; ; int i; ;i<n;++i) { sum+=*p+a[i]; } } int ma ...

  3. 【Python学习】函数参数传递方法四种（位置，关键字，默认值，包裹位置，包裹关键字传递）

    1. 位置传递: #--coding:utf-8-- def send(name,address): return 'package is sent to %s, located in %s' %(n ...

  4. c++的重载运算符

    c++中允许重载运算符: 这是我辛苦的结果 #include"iostream"using namespace std;class aaa{ int x;public: aaa() ...

  5. iis部署文件支持svg

    今测试的一个asp网站代码,在本地一切正常,可是上传到服务器上之后就发现一些图标不显示了.图片在文件路径存在,但是访问不了,经查询.svg的图片想要在iis(iis7支持)上能正常打开,还需要做一下映 ...

  6. Apache与Tomcat的整合

    一 Apache与Tomcat比较联系 apache支持静态页,tomcat支持动态的,比如servlet等. 一般使用apache+tomcat的话,apache只是作为一个转发,对jsp的处理是由 ...

  7. Media Queries使用方法

    1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效.如: @media screen and (max-width ...

  8. jQuery实现按enter键登录

    <script> $(document).keydown(function (event) { if (event.keyCode == 13) { $("#btn_Login& ...

  9. paper 132：图像去噪算法：NL-Means和BM3D

    这篇文章写的非常好,确定要~认真~慎重~的转载了,具体请关注本文编辑作者:http://wenhuix.github.io/research/denoise.html   我不会告诉你这里的代码都是f ...

  10. try,catch,finally含return时的执行顺序及丢失的伪例

    最近面试遇到一个之前也看到过但没去看一下的问题.就是有return情况下的try,catch,finally的执行顺序. 今天写了下. 先看顺序问题.总结如下: 一:finally中没有写return ...