Photoshop投影与CSS中box-shadow的转换
来源:互联网 发布:达内培训 编程k 编辑:程序博客网 时间:2024/06/07 14:47
来自:http://www.jb51.net/css/404167.html
"混合模式":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中的效果。
阅读全文
0 0
- Photoshop投影与CSS中box-shadow的转换
- css中box-shadow属性与text-shadow属性
- css中box-shadow的用法总结
- css中box-shadow的应用技巧
- CSS中box-shadow、text-shadow用法
- box-shadow投影
- CSS特殊样式(六) box-shadow实现纸张的曲线投影效果
- box-shadow与filter的drop-shadow
- CSS3 box-shadow实现纸张的曲线投影效果
- css:box-shadow的发光效果
- css:box-shadow的发光效果
- CSS box shadow IE6+
- CSS Box Shadow
- CSS之box-shadow
- CSS box-shadow
- CSS box-shadow
- box-shadow实现曲线投影效果
- css3 box-shadow投影发光效果
- [置顶]POI操作EXCEL之导出Excel(设置有效性,下拉列表引用)
- SYSAUX内容
- [置顶]Spring事务管理源码分析
- 树的同构.cpp
- IO的学习
- Photoshop投影与CSS中box-shadow的转换
- VS2012 EF上下文 错误的问题 解决
- 递归、序列化和反序列化
- 【代码笔记】iOS-My97DatePicker日历
- dropzone的使用方法
- c# 执行请求的过程中出现错误时配置报错页面代替错误堆栈跟踪
- maven3-win7中的配置
- 链表出错
- 替换SQL字段中的换行符,回车符,空格等特殊符号