编程 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实现炫酷的飞机起飞动画

Sep 17 HTML / CSS

CSS3 简单又实用的5个属性

Mar 04 HTML / CSS

浅谈CSS3动画的回调处理

Jul 21 HTML / CSS

CSS3.0实现霓虹灯按钮动画特效的示例代码

Jan 12 HTML / CSS

详解HTML5新增标签

Nov 27 HTML / CSS

开发人员所需要知道的HTML5性能分析面面观

Jul 05 HTML / CSS

HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述

Jan 30 HTML / CSS

HTML5 video播放器全屏(fullScreen)方法实例

Apr 24 HTML / CSS

吃透移动端 Html5 响应式布局

Dec 16 HTML / CSS

position:sticky 粘性定位的几种巧妙应用详解

Apr 24 HTML / CSS

css height属性中的calc方法详解

Jun 03 HTML / CSS

HTML CSS 一个标签实现带动画的抖音LOGO

Apr 26 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之PHP语法学习笔记1

2006/12/17 PHP

php 过滤器实现代码

2010/08/09 PHP

PHP中redis的用法深入解析

2014/02/20 PHP

php获取表单中多个同名input元素的值

2014/03/20 PHP

php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子

2014/04/24 PHP

PHP封装的XML简单操作类完整实例

2017/11/13 PHP

PHP7.1实现的AES与RSA加密操作示例

2018/06/15 PHP

详解提高使用Java反射的效率方法

2019/04/29 PHP

jQuery 1.0.2

2006/10/11 Javascript

jquery 得到当前页面高度和宽度的两个函数

2010/02/21 Javascript

JavaScript面向对象设计二构造函数模式

2011/12/20 Javascript

兼容ie、firefox的图片自动缩放的css跟js代码分享

2012/01/21 Javascript

jquery foreach使用示例

2013/09/12 Javascript

JS实现的在线调色板实例(附demo源码下载)

2016/03/01 Javascript

深入理解jquery跨域请求方法

2016/05/18 Javascript

JavaScript对象数组如何按指定属性和排序方向进行排序

2016/06/15 Javascript

JavaScript & jQuery完美判断图片是否加载完毕

2017/01/08 Javascript

详解webpack 多入口配置

2017/06/16 Javascript

微信小程序表单验证功能完整实例

2017/12/01 Javascript

微信小程序slider组件使用详解

2018/01/31 Javascript

解决vuejs项目里css引用背景图片不能显示的问题

2018/09/13 Javascript

vue实现密码显示与隐藏按钮的自定义组件功能

2019/04/23 Javascript

Python中使用动态变量名的方法

2014/05/06 Python

python爬虫常用的模块分析

2014/08/29 Python

Python深入06——python的内存管理详解

2016/12/07 Python

Python实现获取nginx服务器ip及流量统计信息功能示例

2018/05/18 Python

python skimage 连通性区域检测方法

2018/06/21 Python

浅析Python函数式编程

2018/10/06 Python

使用python模拟高斯分布例子

2019/12/09 Python

torch 中各种图像格式转换的实现方法

2019/12/26 Python

html5 sessionStorage会话存储_动力节点Java学院整理

2017/07/06 HTML / CSS

西班牙在线宠物商店：zooplus.es

2017/02/24 全球购物

Crocs波兰官方商店：女鞋、男鞋、童鞋、洞洞鞋

2019/10/08 全球购物

小学新教师个人总结

2015/02/05 职场文书

2015年银行员工工作总结

2015/04/24 职场文书

Python sklearn分类决策树方法详解

2022/09/23 Python