• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > Photoshop投影与CSS中box-shadow的转换

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css中box,shadow,,css,box,shadow等相关知识,佚名 希望在学习及工作中可以帮助到您

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

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

以上图中的数值为例。


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

您可能想查找下面的文章:

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

相关文章

  • 2017-08-06详解CSS3阴影 box-shadow的使用和技巧总结
  • 2017-08-06CSS使用自定义光标样式的实现_遁地龙卷风
  • 2017-08-06详解CSS中的z-index属性在层叠布局中的用法
  • 2017-08-06CSS各种居中布局方法汇总
  • 2017-08-06使用CSS实现outline切换的动画效果
  • 2017-08-06CSS实现标题文字过长部分显示省略号的方法
  • 2017-08-06不定宽高div内图片垂直居中的css样式
  • 2017-08-06css3实现的下拉菜单效果示例
  • 2017-08-06引用css文件失效解决方法
  • 2017-08-06CSS3中Animation属性的使用详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用CSS设定一个元素半透明
    • CSS条件注释详解(根据不同浏览器加载CSS)
    • ie6下a标签的onclick事件不执行问题解决方案
    • CSS Hack 汇总快查 振之整理
    • 通过简单的css样式让按钮居中显示
    • 利用label标签和CSS美化文件上传表单(不兼容IE6)
    • css3打造一款漂亮的卡哇伊按钮
    • css动画+照片清晰度动画的实现方法
    • IE6下Png透明最佳解决方案DD_belatedPNG
    • CSS中的元素定位方法详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有