CSS3中新增属性-阴影，可以做出很多漂亮的效果。

文字阴影text-shadow

text-shadow属性值的顺序：

text-shadow: h-shadow v-shadow blur color;

参数分别表示水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。

一个栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3阴影</title>

    <style  type="text/css">

        p{

            margin: 0;

            font-family: helvetica,arial,sans-serif;

            color: #999;

            text-align: center;

            font-size:80px;

            font-weight:bold;

            text-shadow:10px 10px #333;

        }

    </style>

</head>

<body>

    <p>Text Shadow</p>

</body>

</html>

图图：

通过控制水平位移和垂直位移可以控制阴影偏向，正值偏右偏下。负值偏左偏上。

栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3阴影</title>

    <style  type="text/css">

        p{

            margin: 0;

            font-family: helvetica,arial,sans-serif;

            color: #999;

            text-align: center;

            font-size:80px;

            font-weight:bold;

            text-shadow:-10px -10px #333;

        }

    </style>

</head>

<body>

    <p>Text Shadow</p>

</body>

</html>

图图：

可以修改模糊半径来控制阴影的模糊程度：

栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3阴影</title>

    <style  type="text/css">

        p{

            margin: 0;

            font-family: helvetica,arial,sans-serif;

            color: #999;

            text-align: center;

            font-size:80px;

            font-weight:bold;

            text-shadow:10px 10px 30px #333;

        }

    </style>

</head>

<body>

    <p>Text Shadow</p>

</body>

</html>

图图：

也可以定义多个阴影用逗号隔开：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3阴影</title>

    <style  type="text/css">

        p{

            margin: 0;

            font-family: helvetica,arial,sans-serif;

            color: #fff;

            text-align: center;

            font-size:80px;

            font-weight:bold;

            text-shadow:20px 50px 10px #600,

                        30px -10px 10px #060,

                        -40px 20px 10px #006;

        }

    </style>

</head>

<body>

    <p>Text Shadow</p>

</body>

</html>

图图

还可以来点特效，比如燃烧：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3阴影</title>

    <style  type="text/css">

        body

        {

            background:#000;

        }

        p{

            margin: 0;

            padding:24px;

            font-family: helvetica,arial,sans-serif;

            color: #000;

            text-align: center;

            font-size:80px;

            font-weight:bold;

            text-shadow:0 0 4px #fff,

                        0px -5px 4px #ff3,

                        2px -10px 6px #fd3,

                        -2px -15px 11px #f80,

                         2px -25px 18px #f20;

        }

    </style>

</head>

<body>

    <p>Text Shadow</p>

</body>

</html>

图图：

浮雕效果：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3阴影</title>

    <style  type="text/css">

        body

        {

            background:#ccc;

        }

        p{

            margin: 0;

            padding:24px;

            font-family: helvetica,arial,sans-serif;

            color: #d1d1d1;

            background:#ccc;

            text-align: center;

            font-size:80px;

            font-weight:bold;

            text-shadow:-1px -1px #fff,

                         1px 1px #333;

        }

    </style>

</head>

<body>

    <p>Text Shadow</p>

</body>

</html>

图图：

盒子阴影box-shadow

box-shadow的属性值的顺序：

box-shadow: hoff voff bd sd color inset;

这里，hoff 指示水平偏移，voff 指示垂直偏移，bd 指示模糊距离，sd 指示扩散距离，color 指示阴影的颜色，inset 是一个关键字，在使用时指示阴影是内部阴影，而不是外部阴影。前两个值是属性工作所必需的值，所有值都必须按照列出的顺序指定。

上一些栗子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3阴影</title>

    <style  type="text/css">

        #sbox{

            width: 200px;

            padding: 32px;

            background: #3385ff;

            text-align: center;

            -webkit-box-shadow:5px 5px 10px black;

            -moz-box-shadow: 5px 5px 10px black;
            box-shadow: 5px 5px 10px black;

        }

    </style>

</head>

<body>

    <div id="sbox">Box Shadow</div>

</body>

</html>

图图：

CSS3之阴影的更多相关文章

  1. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  2. CSS3文字阴影实现乳白文字效果

    CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果,CSS3 文字阴影 文字特效,字体效果. 源码下载:http://www.huiyi8.co ...

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

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

  4. css3字阴影text-shadow

    看到text-shadow这句代码,眼尖的同学是不是觉得很熟悉?没错,前面我们已经学习过<css3基础教程五边框box-shadow>,而且这两者非常相近,只要以前的课程学好了,text- ...

  5. CSS3 box-shadow(阴影使用)

    from: http://jingyan.baidu.com/article/03b2f78c4d9fae5ea237aea6.html css3 box-shadow 内阴影与外阴影 1- box- ...

  6. css3 box-shadow 阴影的用法

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  7. css3 box-shadow阴影(外阴影与外发光)

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  8. css3 box-shadow阴影(外阴影与外发光)讲解

    基础说明:     外阴影:box-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影 ...

  9. CSS-3 文字阴影—text-shadow 的使用

    text-shadow还没有出现的时候,大家在网页中的阴影就是用ps一张图片作为背景.那么现在有了CSS3的这个属性,日后我们的工作会更简洁些. text-shadow之前出现过,不过不久就被Pass ...

随机推荐

  1. [CSS]去除inline-block元素间距的几种方法

    当我们使用inline-block 时,会出现空白间距问题. 但这些间距对我们的布局,或兼容性产生影响,我们需要去除它,该怎么办?下面简单介绍几种方法: 1.去掉html元素之间的空格,直接写在一行. ...

  2. Spark1.4启动spark-shell时initializing失败

    错误信息如下: 5/11/03 16:48:15 INFO spark.SparkContext: Running Spark version 1.4.1 15/11/03 16:48:15 WARN ...

  3. PLSQL_性能优化系列19_Oracle Explain Plan解析计划通过Profile绑定

    20150529 Created By BaoXinjian

  4. sublime运行c++快捷建修改

    打开preferences->key bingings -user 输入 [ {"keys": ["f9"], "command": ...

  5. HDU 2176 取(m堆)石子游戏(Nim)

    取(m堆)石子游戏 题意: Problem Description m堆石子,两人轮流取.只能在1堆中取.取完者胜.先取者负输出No.先取者胜输出Yes,然后输出怎样取子.例如5堆 5,7,8,9,1 ...

  6. 别去研究C++

    转载 YH,今天早晨起来.回想昨天,虽然吐槽了 C++ 的各种问题,但给别人打工,还是要靠 C++ 干活吃饭.我对待 C++ 的态度和云风不同,虽然他所说的 C++ 技术的事情我都懂都理解,而我感受到 ...

  7. 集成paypal支付

    https://developer.paypal.com cocoapods 管理 引入 pod 'PayPal-iOS-SDK' 1.在appdelegate #import <PayPalM ...

  8. Python标准库08 多线程与同步 (threading包)

    Python主要通过标准库中的threading包来实现多线程.在当今网络时代,每个服务器都会接收到大量的请求.服务器可以利用多线程的方式来处理这些请求,以提高对网络端口的读写效率.Python是一种 ...

  9. 处理日期时间NSDate

    获取当前日期时间的代码如下: NSDate *dateToDay = [NSDate date]; NSDateFormatter *df = [[NSDateFormatter alloc] ini ...

  10. 转: Ubuntu 安装字体方法

    命令安装:   以微软雅黑字体为例(其他的宋体.黑体等点阵字体都一样的),我们的雅黑字体文件是:Yahei.ttf(放在自己的主目录下)(在widows目录的Fonts目录下找需要的字体)由于我是双系 ...