text-shadow可以用来设置文本的阴影效果。

语法：

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

比如，我们可以用下面代码实现设置阴影效果。

text-shadow: 0 1px 1px #fff
例子：
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>text-shadow</title>

<style type="text/css">

.demo {

    width: 350px;

    padding: 30px;

    font: bold 55px/100% "微软雅黑";

    background: #C5DFF8;

    text-shadow: 2px 3px 0 red;

}

</style>

</head>

<body>

<div class="demo">text-shadow</div>

</body>

</html>

效果：

【CSS3】---文本阴影text-shadow的更多相关文章

  1. CSS3文本阴影、边框阴影

    CSS3添加阴影 一.使用text-shadow属性为文本添加阴影 二.使用box-shadow属性为边框添加阴影 一.为文本添加阴影 text-shadow     使用text-shadow,可以 ...

  2. CSS3文本温故

    1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...

  3. CSS文本阴影实例

    原文 简书原文:https://www.jianshu.com/p/5abf2fa2f1b9 前言 以下的实例是我从<CSS实战>中看到的实例,当我看到这些实例的时候,发现平时不是很在意的 ...

  4. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

  5. CSS3 一、文本阴影text-shadow属性

    文本阴影text-shadow属性特效: 1.右下角阴影,左下角阴影,左上角阴影,右上角阴影 <!DOCTYPE html> <html lang="en"> ...

  6. CSS3 文本效果(阴影)

    CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...

  7. CSS3 --添加阴影（盒子阴影、文本阴影的使用）

     CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...

  8. HTML 学习笔记 CSS3 (文本效果)

    text-shadow 语法 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none ...

  9. CSS3：CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  10. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...

随机推荐

  1. HttpRuntime.Cache 失效

    最近做一个报纸内容类网站,为了提高响应速度,将首页各栏目以及二级栏目中Part文献列表存储在HttpRuntime.Cache缓存中,发布后发现问题,刚插入的缓存很快就失效,本机调试没有问题. 由于H ...

  2. atprogram.exe : Atmel Studio Command Line Interface

    C:\Program Files\Atmel\Atmel Studio 6.1\atbackend\atprogram.exe No command specified.Atmel Studio Co ...

  3. 【转】selenium及webdriver的原理

    主要内容转自:http://blog.csdn.net/ant_ren/article/details/7968582和http://blog.csdn.net/ant_ren/article/det ...

  4. vimrc常用配置项

    设置行号 set nu 设置自动缩进 set autoindent 设置tab占n个字符 set tabstop=n 设置以空格代替tab(因为有部分场合不允许使用tab) set expandtab ...

  5. Winform 导出成Excel打印代码

    WinForm中 直接调用Excel的打印预览功能,但不显示Excel文件 using Microsoft.Office.Interop.Excel; //引用 public void PrintPr ...

  6. C#操作Excel（1）Excel对象模型

    Excel对象模型  (.Net Perspective) 本文主要针对在Visual Studio中使用C# 开发关于Excel的应用程序 本文的PDF下载地址:C#操作Excel2007.pdf ...

  7. maven项目编译漏掉src/main/java下的xml配置文件

    在整合Spring + Mybatis框架的时候,自动扫描配置都已经配置好了. 配置如下: <?xml version="1.0" encoding="UTF-8& ...

  8. 浅谈Androidclient项目框架

    写Android也有些时间了,一边工作,一边学习,一边积累.仅仅有遇到问题了,花时间去研究,自己的能力才干提升.刀假设不用.慢慢的就会生锈应该也是这个道理吧!上个月公司项目server框架进行的一些调 ...

  9. FreeMarker中文API手冊(完整)

    FreeMarker概述 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用 ...

  10. error C2440:“类型转换":无法从“void (__thiscall Play1::* )(int *)”转换为“cocos2d::SEL_CallFucN

    转自:http://zhidao.baidu.com/link?url=VfSSkA0xfTVwNKaKh4tqW_sXlcsK-Rb16nEtQw5zaq5_306lnwJN3Kdb-rFp-r4L ...