详解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弹性伸缩布局之box布局
Jul 12 HTML / CSS
css3 border-radius属性详解
Jul 05 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 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+dbfile开发小型留言本
2006/10/09 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
基于jQuery的弹出框插件
2012/03/18 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python中defaultdict的用法详解
2017/06/07 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python读取并写入mat文件的方法
2019/07/12 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
微博营销计划书
2014/01/10 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
写给导师的自荐信
2015/03/06 职场文书
小学教代会开幕词
2016/03/04 职场文书
导游词之广西漓江
2019/11/02 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers