编程 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旋转——彩色扇子兼容firefox浏览器

Jun 04 HTML / CSS

纯CSS实现颜色渐变效果（包含环形渐变、线性渐变、彩虹效果等）

May 07 HTML / CSS

深入浅析css3 border-image边框图像详解

Nov 24 HTML / CSS

通过一张图教会你CSS3倒影的实现

Sep 26 HTML / CSS

html5中去掉input type date默认样式的方法

Sep 06 HTML / CSS

关于前端上传文件全面基础扫盲贴（入门）

Aug 01 HTML / CSS

html5各种页面切换效果和模态对话框用法总结

Dec 15 HTML / CSS

利用HTML5中的Canvas绘制一张笑脸的教程

May 07 HTML / CSS

HTML5 canvas基本绘图之绘制五角星

Jun 27 HTML / CSS

Html5踩坑记之mandMobile使用小记

Apr 02 HTML / CSS

amazeui模态框弹出后立马消失并刷新页面

Aug 19 HTML / CSS

css之clearfix的用法深入理解(必看篇)

May 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

You might like

phpMyAdmin2.11.6安装配置方法

2008/08/24 PHP

PHP开发工具ZendStudio下Xdebug工具使用说明详解

2013/11/11 PHP

php中explode函数用法分析

2014/11/15 PHP

php验证邮箱和ip地址最简单方法汇总

2015/10/30 PHP

PHP使用Pear发送邮件（Windows环境）

2016/01/05 PHP

php实现转换html格式为文本格式的方法

2016/05/16 PHP

PHP 芝麻信用接入的注意事项

2016/12/01 PHP

php文件上传原理与实现方法详解

2019/12/20 PHP

Jquery异步请求数据实例代码

2011/12/28 Javascript

javascript查找字符串中出现最多的字符和次数的小例子

2013/10/29 Javascript

js设置文本框中焦点位置在最后的示例代码(简单实用)

2014/03/04 Javascript

使用JavaScript进行进制转换将字符串转换为十进制

2014/09/21 Javascript

jQuery插件imgPreviewQs实现上传图片预览

2016/01/15 Javascript

正则表达式,替换所有HTML标签的简单实例

2016/11/28 Javascript

js中作用域的实例解析

2017/03/16 Javascript

bootstrap3-dialog-master模态框使用详解

2017/08/22 Javascript

Node.js一行代码实现静态文件服务器的方法步骤

2019/05/07 Javascript

Vuejs中的watch实例详解(监听者)

2020/01/05 Javascript

[01:14]DOTA2亚洲邀请赛小组赛赛前花絮

2017/03/27 DOTA

Python实现网站注册验证码生成类

2017/06/08 Python

Django实现表单验证

2018/09/08 Python

浅谈python下含中文字符串正则表达式的编码问题

2018/12/07 Python

selenium+python自动化测试之使用webdriver操作浏览器的方法

2019/01/23 Python

Flask框架实现的前端RSA加密与后端Python解密功能详解

2019/08/13 Python

Python FTP文件定时自动下载实现过程解析

2019/11/12 Python

意大利体育用品网上商城：Nencini Sport

2016/08/18 全球购物

印度尼西亚综合购物网站：Lazada印尼

2016/09/07 全球购物

澳大利亚礼品篮网站：Macarthur Baskets

2019/10/14 全球购物

运动会广播稿400字

2014/01/25 职场文书

和谐家庭演讲稿

2014/05/24 职场文书

小学兴趣小组活动总结

2014/07/07 职场文书

民政局副局长民主生活会个人对照检查材料

2014/09/19 职场文书

个人委托书范本汇总

2014/10/01 职场文书

基层党支部整改方案

2014/10/25 职场文书

基于flask实现五子棋小游戏

2021/05/25 Python

使用Ajax实现无刷新上传文件

2022/04/12 Javascript