详解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 border-image使用说明
Jun 23 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 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
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
PHP精确计算功能示例
2016/11/29 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
php 数据结构之链表队列
2017/10/17 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python+django实现文件上传
2016/01/17 Python
Pandas中resample方法详解
2019/07/02 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
python怎么自定义捕获错误
2020/06/29 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
大学生活自我评价
2014/04/09 职场文书
机房搬迁方案
2014/05/01 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
单身证明范本
2015/06/15 职场文书