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. http://www.jobui.com/mianshiti/it/java/6782/

    1.运算符优先级问题,下面代码的结果是多少?(笔试) package test; public class Test {public static void main(String[] args) { ...

  2. 14的路 MySQL的btree索引和hash索引的区别

    http://www.cnblogs.com/vicenteforever/articles/1789613.html ash 索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tr ...

  3. AIM Tech Round (Div. 2) B. Making a String 贪心

    B. Making a String 题目连接: http://codeforces.com/contest/624/problem/B Description You are given an al ...

  4. 如何实现一个c/s模式的flv视频点播系统

    一.写在前面 视频点播,是一个曾经很热,现如今依然很热的一项视频服务技术.本人最近致力于研究将各种视频格式应用于点播系统中,现已研究成功FLV, F4V, MP4, TS格式的视频点播解决方案,完全支 ...

  5. C++面向对象的编程

    C++面向对象的编程 目录 对C++面向对象编程的理解 声明和定义类 声明和定义 构造函数 析构函数 静态成员和静态变量 类实例化对象 对象的浅复制和深复制 继承 单继承 多继承 虚函数 类模板 其他 ...

  6. Getting NHibernate to generate a HiLo string ID

    We've got a large system that's loosely bound to its data source (Navision) via Unity - we're gettin ...

  7. RAID设备

    RAID(Redundant Array of Independent Disk),独立冗余磁盘阵列(通常简称磁盘阵列).磁盘阵列的实质是将多个磁盘通过RAID控制器组合在一起,形成一个新的磁盘.这个 ...

  8. 一款基于jQuery底部带缩略图的焦点图

    之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...

  9. NSNotificationCenter 使用姿势详解

    来源:JamesYu 链接:http://www.jianshu.com/p/a4d519e4e0d5 最近在做平板的过程中,发现了一些很不规范的代码.偶然修复支付bug的时候,看到其他项目代码,使用 ...

  10. C#操作XML（带命名空间）

    之前文章讲述了使用c# xpath如何操作xml文件,在实际开发项目中,遇到的很多xml文件都是带有命名空间的,如果还是用之前的代码获取,那将获取到null.本文讲解操作代码有命名空间的Xml文件,以 ...