详解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.0 图形构成实例练习二
Mar 19 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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
PHP 面向对象详解
2012/09/13 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python实现控制台进度条功能
2016/01/04 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python如何重新加载模块
2020/07/29 Python
Python对excel的基本操作方法
2021/02/18 Python
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
总经理司机岗位职责
2014/02/06 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
部门2014年度工作总结
2014/11/12 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS