首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3 text-shadow实现文字阴影效果

Posted in HTML / CSS onFebruary 24, 2016

CSS3设置文字阴影效果，对文字字体设置阴影效果，采用text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。

CSS3单词与语法

CSS3单词： text-shadow

语法结构：text-shadow: 5px 2px 6px black;

5px 代表着：阴影距离文字左5px显示
2px 代表着：阴影距离文字上2px显示
6px 代表着：阴影大小范围
black 代表着：阴影颜色为黑色

例子：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.     .All-orange {   
  8.         font: normal 14px 微软雅黑,sans-serif;   
  9.         max-width: auto;   
  10.         max-height: auto;   
  11.         background-color: #f8f8f8;   
  12.         padding: 30px 30px 20px 30px;   
  13.         color: #666;   
  14.         border-radius: 5px   
  15.     }   
  16.     .All-orange h1 {   
  17.         font: normal 32px 微软雅黑,sans-serif;   
  18.         padding: 20px 0 20px 40px;   
  19.         display: block;   
  20.         margin: -30px -30px 10px -30px;   
  21.         color: #FFF;   
  22.         background-color: #0CF;   
  23.         border-radius: 5px;   
  24.         text-shadow:5px 2px 6px #000;   
  25.         box-shadow: 5px 2px 6px #000;   
  26.     }   
  27.     .All-orange img {   
  28.         float: left   
  29.     }   
  30.     .All-orange h1 img{   
  31.         margin-top: -15px;   
  32.     }   
  33.     </style>  
  34. </head>  
  35. <body>  
  36.     <div class="All-orange" id="all">  
  37.     <h1><img src="../img/launcher_icon_.png" />  
  38.         悲伤黑白棋   
  39.     </h1>  
  40.    </div>  
  41. </body>  
  42. </html>  

效果图：

CSS3 text-shadow实现文字阴影效果

浏览器兼容

此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。

CSS3 text-shadow实现文字阴影效果

以上就是利用CSS3 text-shadow实现的文字阴影效果，希望对大家的学习有所帮助。

CSS3 text-shadow实现文字阴影效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 特效范例整理
Aug 22 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 #HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 #HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 #HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 #HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 #HTML / CSS
css3 border旋转时的动画应用
Jan 22 #HTML / CSS
CSS3实现swap交换动画
Jan 19 #HTML / CSS
expdp(1) 腾讯云(1) 外键约束(1) dict(1) Vite(1) 数据备份(2) 云服务器(1) 脚本(1) Foreign Key(1) hook(1)
You might like
第四章 php数学运算
2011/12/30 PHP
详解thinkphp实现excel数据的导入导出（附完整案例）
2016/12/29 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
2014/06/05 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
vue按需加载实例详解
2019/09/06 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Python中按键来获取指定的值
2019/03/02 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python算的上脚本语言吗
2020/06/22 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
python 19个值得学习的编程技巧
2020/08/15 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Myprotein葡萄牙官方网站：英国优质运动营养品牌
2016/09/12 全球购物
Vince官网：全球著名设计师品牌，休闲而优雅的服饰
2017/01/15 全球购物
Pure Collection美国官网：来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
美国家居装饰店：Pier 1
2019/09/04 全球购物
Quiksilver美国官网：始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
高中毕业的自我鉴定
2013/12/09 职场文书