当前位置: 首页 > HTML5培训 > 前端开发 > CSS > CSS阴影效果

CSS阴影效果时间：2018-01-04 来源：CSS阴影效果讲解

CSS3中新增属性-阴影，可以做出很多漂亮的效果。作为一名web前端工程师掌握CSS阴影效果在今后的工作中是十分重要的，今天这篇文章将为大家详细讲解CSS阴影效果，想学习的伙伴们看过来了。

CSS3阴影之文本阴影

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

文字阴影text-shadow

text-shadow属性值的顺序：

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

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

一个例子：

CSS3阴影

<!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>华清远见</p>
</body>
</html>

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

<!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>华清远见</p>
</body>
</html>

如图：

CSS阴影

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

<!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>华清远见</p>
</body>
</html>

如图：

CSS阴影

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

<!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>

如图：

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

<!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>华清远见</p>
</body>
</html>

如图：

4.浮雕效果：

<!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>华清远见</p>
</body>
</html>

如图：

CSS3阴影之盒子阴影

盒子阴影 box-shadow

box-shadow属性值的顺序：

box-shadow: x-offset y-offset blur-radius spread-radiuscolor;

参数分别表示X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色。

浏览器的兼容：

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。

#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;

}

注意：出于方便，后文的css属性有的地方只写了box-shadow属性，没有写-moz-和-webkit-前缀的形式，在使用中不要忘记加上。

为了更清楚的了解box-shadow的特征，做几个小测试，看效果：

相关代码：

<div class="obj box-shadow-1"></div>
<div class="outer">
<div class="inner"></div>
</div>
<div class="obj box-shadow-2"></div>
<div class="obj box-shadow-3"></div>
<div class="obj box-shadow-4"></div>
<div class="obj box-shadow-5"></div>
<div class="obj box-shadow-6"></div>
<div class="obj box-shadow-7"></div>
<div class="obj box-shadow-8"></div>
<div class="obj box-shadow-9"></div>

结论：

1) 从.box-shadow-1的效果可以得出不指定属性阴影颜色的情况下，阴影在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色。

2) 从内外两个div块inner、outer的对比来看，所有支持box-shadow的主流浏览器都表现为：内层阴影撑破外层容器将整个阴影效果呈现出来。W3C标准用图示的方式对box-shadow的原理和表现进行了解读：

3).box-shadow-2是xy没有偏移，阴影大小10px，没有扩展半径，颜色#0CC即rgba(0, 204,204, 1)，这里我们使用的是颜色HEX值;效果

而. box-shadow-3是在. box-shadow-2效果的基础上，应用了rgba颜色值，好处是给box-shadow阴影添加了alpha透明效果。效果：

. box-shadow-4在. box-shadow-2效果的基础上添加了阴影扩展半径15px。

CSS阴影

. box-shadow-5在. box-shadow-2效果的基础上，将外阴影设为内阴影。

CSS阴影

4). box-shadow-6一个元素使用了多个阴影，多个阴影之间用逗号分隔。给对象四边设置阴影效果，我们是通过改变x-offset和y-offset的正负值来实现，其中x-offset为负值时，生成左边阴影，为正值时生成右边阴影，y-offset为正值是生成底部阴影，为负值时生成顶部阴影。并且把模糊半径设置为0，如果不设置为0的话那么其他三边也将会有阴影。这点需要注意!

CSS阴影