详解CSS3的图层阴影和文字阴影效果使用


Posted in HTML / CSS onJune 09, 2016

box-shadow图层阴影

box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
阴影类型可以省略,默认为外投影,当它的值为inset时,为内阴影效果。
X水平偏移和Y垂直偏移可取正负值,当X为负值是投影在左边,为正时投影在右边。当Y为负值时投影在上面,为正时投影在下面。
阴影大小和扩展与ps里面的原理一样。

浏览器兼容性:
不同的浏览器兼容性不同,mozilla内核的浏览器写法如下(但新版本的火狐浏览器已经不需要再添加):
-moz-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
webkit内核的浏览器写法如下:
-webkit-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值

实例一:

CSS Code复制内容到剪贴板
  1. <div class="shadow"></div>   
  2. .shadow{   
  3.  width:200px;   
  4.  height:50px;   
  5.  box-shadow:3px 3px 3px 3px #000;   
  6.  /*-moz-box-shadow:3px 3px 3px 3px #000;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/  
  7.  -webkit-box-shadow:3px 3px 3px 3px #000;   
  8. }  

效果图:
详解CSS3的图层阴影和文字阴影效果使用

把box-shadow投影类型改为inset,效果图:
详解CSS3的图层阴影和文字阴影效果使用

实例二:

CSS Code复制内容到剪贴板
  1. <div class="shadow"></div>   
  2. .shadow{   
  3.  width:200px;   
  4.  height:50px;   
  5.  box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
  6.  /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;    //以火狐为代表的mozilla内核浏览器,火狐现在的版本已经支持这个属性,所以不用再加-moz*/  
  7.  -webkit-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue;   
  8. }  

效果图:
详解CSS3的图层阴影和文字阴影效果使用

text-shadow文字阴影

上面我们讨论了关于css3图层阴影 box-shadow来实现图层阴影的效果,今天我们来共同学习一下如何实现文字阴影的效果,将用到css3的另外一个属性text-shadow,这两个效果分别增强了图层和文字的质感,创建立体效果。

语法:

XML/HTML Code复制内容到剪贴板
  1. text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*   

text-shadow:X轴上的位移(正负皆可),Y轴上的位移(正负皆可),阴影的宽度,阴影的颜色值

说明:
和图层阴影相似,它也可以对同一对象应用一组或多组阴影效果,用逗号隔开。X轴偏移可以为正负,当X为正时向右偏移,为负时向左偏移。Y轴偏移可以为正负,当X为正时向下偏移,为负时向上偏移。阴影的颜色值可以是#xxx,也可以是rgb,还可以是rgba透明色。

实例:text-shadow

XML/HTML Code复制内容到剪贴板
  1. <h1 style="font-family:Microsoft Yahei; font-size:28px; color:#333; text-shadow:2px 2px 5px #f60;">雨打浮萍</h1>  

显示效果如下:
详解CSS3的图层阴影和文字阴影效果使用

对比box-shadow

XML/HTML Code复制内容到剪贴板
  1. <h2 style="font-family:Microsoft Yahei; font-size:18px; color:#333; width:200px; line-height:30px; text-align:center; box-shadow:2px 2px 5px #f60;">专注于web前端开发</h2>  

效果如下:
详解CSS3的图层阴影和文字阴影效果使用

显示效果如下:
详解CSS3的图层阴影和文字阴影效果使用

HTML / CSS 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 #HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 #HTML / CSS
浅析css3中matrix函数的使用
Jun 06 #HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 #HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 #HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 #HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 #HTML / CSS
You might like
类的另类用法--数据的封装
2006/10/09 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python功能键的读取方法
2015/05/28 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Python的条件锁与事件共享详解
2019/09/12 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
python enumerate内置函数用法总结
2020/01/07 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
个人简历自我评价范文
2014/02/04 职场文书
施工质量承诺书范文
2014/05/30 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
机械操作工岗位职责
2014/08/08 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
技术员岗位职责
2015/02/04 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
机关工会工作总结2015
2015/05/26 职场文书
《植树问题》教学反思
2016/03/03 职场文书