详解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实现背景渐变的方法
Jul 14 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 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中读取和写入WORD文档的代码
2008/04/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
Python中将字典转换为列表的方法
2016/09/21 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python把转列表为集合的方法
2019/06/28 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
医药个人求职信范文
2014/01/29 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
英语演讲开场白
2015/05/29 职场文书
企业法人任命书
2015/09/21 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang