详解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 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
HTML中的表格元素介绍
Feb 28 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通过COM使用ADODB的简单例子
2006/12/31 PHP
Prototype Array对象 学习
2009/07/19 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
解析Python中的__getitem__专有方法
2016/06/27 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
Python自动创建Excel并获取内容
2020/09/16 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
奥巴马演讲稿
2014/01/08 职场文书
运动会100米解说词
2014/01/23 职场文书
运动会解说词200字
2014/02/06 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
就业导师推荐信范文
2015/03/27 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技