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实现的文字阴影效果,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 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
You might like
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
新页面打开实际尺寸的图片
2006/08/25 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
javascript常用函数(1)
2015/11/04 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
python绘制散点图并标记序号的方法
2018/12/11 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
你常见到的runtime exception
2016/09/05 面试题
公共事业管理本科生求职信
2013/10/07 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
2014年国庆节寄语
2014/09/19 职场文书
创先争优活动个人总结
2015/03/04 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Mysql 性能监控及调优
2021/04/06 MySQL
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Java spring定时任务详解
2021/10/05 Java/Android
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python