CSS3实现千变万化的文字阴影text-shadow效果设计


Posted in HTML / CSS onApril 26, 2016

本文实例为大家分享了CSS3千变万化的文本阴影text-shadow效果实例,供大家参考,具体内容如下

语法:

none|<length>|none|[<shadow>,]*<shadow>

none|<color>|[,<color>]*

取值简单说明:

表示颜色;

表示由浮点数字和单位标识符组成的长度值,可为负值,指定阴影的水平延伸距离;

表示由浮点数字和单位标识符组成的长度值,不可为负值,指定模糊效果的作用距离。如果仅仅需要模糊效果,将前两个length全部设定为0即可。

示例:

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. p{   
  3.     text-align:center;   
  4.     margin:0;   
  5.     font-family:helvetica,arial,sans-serif;   
  6.     color:#999;   
  7.     font-size:80px;   
  8.     font-weight:bold;   
  9.     text-shadow:0.1em 0.1em #333;//右下角阴影   
  10.     text-shadow:-0.1em -0.1em #333;//左上角阴影   
  11.     text-shadow:-0.1em 0.1em #333;//左下角阴影   
  12.     text-shadow:0.1em 0.1em 0.3em #333;//增加模糊效果的阴影   
  13.     text-shadow:0.1em 0.1em 0.3em black;//定义文本阴影效果   
  14. }   
  15. </style>   
  16.   

CSS3实现千变万化的文字阴影text-shadow效果设计

**简单小结:**text-shadow属性的第一个值表示水平位移;第二个值表示垂直位移,正值偏右或偏下;负值偏上或偏左;第三个值表示模糊半径,该值可选;第四个值表示阴影的颜色,该值可选。

示例:通过阴影增加前景色和背景色的对比

CSS Code复制内容到剪贴板
  1. p{   
  2.     text-align:center;   
  3.     margin:150px auto;   
  4.     font-family:helvetica,arial,sans-serif;   
  5.     font-size:80px;   
  6.     font-weight:bold;   
  7.     color:#fff;//设置文字颜色   
  8.     text-shadow:0.1em 0.1em 0.3em black;//通过阴影增加前景色和背景色的对比   
  9.   
  10. }   
  11.   

CSS3实现千变万化的文字阴影text-shadow效果设计

总结:

阴影偏移由两个<length> 值指定到文本的距离。第一个长度值指定到文本右边的水平距离,负值会把阴影放置在文本的左边。第二个长度值指定到文本下边的垂直距离,负值会把阴影放置在文本的上边。

在阴影偏移之后,可以指定一个模糊半径。模糊半径是一个长度值,他指出了模糊效果的范围。

在阴影效果的长度值之前或之后,还可以指定一个颜色值。颜色值会被用阴影效果的基础。如果没有指定颜色,那么将使用color属性值代替。

示例:模拟复杂的文本特效

CSS Code复制内容到剪贴板
  1. p{   
  2.     text-align:center;   
  3.     margin:0;   
  4.     padding:24px;   
  5.     font-family:helvetica,arial,sans-serif;   
  6.     font-size:80px;   
  7.     font-weight:bold;   
  8.     color:#000;//设置文字颜色   
  9.     background:#000;//设置背景颜色   
  10.     text-shadow:0 0 4px white,    
  11.                 0 -5px 4px #ff3,   
  12.                 2px -10px 6px #fd3,   
  13.                 -2px -15px 11px #f80,   
  14.                 2px -25px 18px #f20;//使用阴影叠加出燃烧的文字特效   
  15. }   
  16.   

CSS3实现千变万化的文字阴影text-shadow效果设计

注:每个阴影效果必须指定阴影偏移值,而模糊半径和阴影颜色是可选参数,每个阴影之间用逗号隔开。

CSS Code复制内容到剪贴板
  1. p{   
  2.     text-align:center;   
  3.     margin:0;   
  4.     padding:24px;   
  5.     font-family:helvetica,arial,sans-serif;   
  6.     font-size:80px;   
  7.     font-weight:bold;   
  8.     color:#D1D1D1;   
  9.     background:#CCC;   
  10.     text-shadow:-1px -1px white,    
  11.                 -1px -1px #333;//使用阴影叠加出立体的文字特效   
  12.   
  13.                 1px 1px white,   
  14.                 -1px -1px #444;//使用阴影叠加出凹体文字特效   
  15.   
  16.                 -1px 0 black,                  
  17.                 0 1px black,   
  18.                 1px 0 black,   
  19.                 0 -1px black;//使用阴影叠加出文本描边特效   
  20.   
  21.                     0 0 0.2em #F87,   
  22.                     0 0 0.2em #F87;//使用阴影叠加出文本外发光特               
  23. }   
  24.   
  25.   

CSS3实现千变万化的文字阴影text-shadow效果设计

以上就是关于实现文本阴影的前篇,下面还有精彩内容不要错过。

HTML / CSS 相关文章推荐
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 #HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 #HTML / CSS
CSS3不透明度实例讲解
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 #HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 #HTML / CSS
You might like
php处理json时中文问题的解决方法
2011/04/12 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP7变量处理机制修改
2021/03/09 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
js查错流程归纳
2012/05/04 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Windows下为Python安装Matplotlib模块
2015/11/06 Python
python在不同层级目录import模块的方法
2016/01/31 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python中反射和描述器总结
2018/09/23 Python
解读python如何实现决策树算法
2018/10/11 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
12岁生日感言
2014/01/21 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
同事打架检讨书
2015/05/06 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js
Python安装使用Scrapy框架
2022/04/12 Python
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技