编程 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复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.All-orange {
font: normal 14px 微软雅黑,sans-serif;
max-width: auto;
max-height: auto;
background-color: #f8f8f8;
padding: 30px 30px 20px 30px;
color: #666;
border-radius: 5px
}
.All-orange h1 {
font: normal 32px 微软雅黑,sans-serif;
padding: 20px 0 20px 40px;
display: block;
margin: -30px -30px 10px -30px;
color: #FFF;
background-color: #0CF;
border-radius: 5px;
text-shadow:5px 2px 6px #000;
box-shadow: 5px 2px 6px #000;
}
.All-orange img {
float: left
}
.All-orange h1 img{
margin-top: -15px;
}
</style>
</head>
<body>
<div class="All-orange" id="all">
<h1><img src="../img/launcher_icon_.png" />
悲伤黑白棋
</h1>
</div>
</body>
</html>

效果图：

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

浏览器兼容

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

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

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

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

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

HTML / CSS 相关文章推荐

CSS3中利用animation属性创建雪花飘落特效

May 14 HTML / CSS

CSS3动画效果回调处理详解

Dec 10 HTML / CSS

css3 transform及原生js实现鼠标拖动3D立方体旋转

Jun 20 HTML / CSS

浅谈CSS3鼠标移入图片动态提示效果（transform）

Nov 06 HTML / CSS

css3通过scale()、rotate()实现放大、旋转

Mar 19 HTML / CSS

html5应用缓存_动力节点Java学院整理

Jul 13 HTML / CSS

html5在移动端的屏幕适应问题示例探讨

Jun 15 HTML / CSS

HTML5+CSS3实现拖放(Drag and Drop)示例

Jul 07 HTML / CSS

详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

Mar 22 HTML / CSS

HTML5地理定位_动力节点Java学院整理

Jul 12 HTML / CSS

使用Html5 Stream开发实时监控系统

Jun 02 HTML / CSS

纯CSS实现酷炫的霓虹灯效果

Apr 13 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

PHP 模拟$_PUT实现代码

2010/03/15 PHP

在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)

2010/05/04 PHP

谈谈你对Zend SAPIs(Zend SAPI Internals)的理解

2015/11/10 PHP

php PDO异常处理详解

2016/11/20 PHP

用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载

2007/08/08 Javascript

dojo随手记 gird组件引用

2011/02/24 Javascript

从数据结构的角度分析 for each in 比 for in 快的多

2013/07/07 Javascript

Blocksit插件实现瀑布流数据无限( 异步)加载

2014/06/20 Javascript

JavaScript中诡异的delete操作符

2015/03/12 Javascript

JS或jQuery获取ASP.NET服务器控件ID的方法

2015/06/08 Javascript

jQuery实现的自动加载页面功能示例

2016/09/04 Javascript

webpack+vue.js实现组件化详解

2016/10/12 Javascript

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

2017/01/05 Javascript

javascript 判断当前浏览器版本并判断ie版本

2017/02/17 Javascript

Vue2.0如何发布项目实战

2017/07/27 Javascript

Node.js readline 逐行读取、写入文件内容的示例

2018/03/01 Javascript

vue源码学习之Object.defineProperty对象属性监听

2018/05/30 Javascript

vue实现点击当前标签高亮效果【推荐】

2018/06/22 Javascript

JS实现计算小于非负数n的素数的数量算法示例

2019/02/26 Javascript

JavaScript实现单英文金山打字通

2020/07/24 Javascript

详解利用nodejs对本地json文件进行增删改查

2019/09/20 NodeJs

微信小程序报错: thirdScriptError的错误问题

2020/06/19 Javascript

Python合并字符串的3种方法

2015/05/21 Python

【Python】Python的urllib模块、urllib2模块批量进行网页下载文件

2016/11/19 Python

python使用matplotlib绘图时图例显示问题的解决

2017/04/27 Python

Python简单生成随机姓名的方法示例

2017/12/27 Python

python文件处理fileinput使用方法详解

2020/01/02 Python

10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例

2020/12/16 Python

CSS3+Sprite实现僵尸行走动画特效源码

2016/01/27 HTML / CSS

党委班子剖析材料

2014/08/21 职场文书

教师群众路线心得体会

2014/11/04 职场文书

大学开学感言

2015/08/01 职场文书

小程序教您怎样你零成本推广获取数万用户的方法

2019/07/30 职场文书

MySQL 那些常见的错误设计规范,你都知道吗

2021/07/16 MySQL

关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)

2022/04/04 Python

Mysql中常用的join连接方式

2022/05/11 MySQL