首页 > 代码库 > CSS3之阴影

CSS3之阴影

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;                   }    </style></head><body>    <div id="sbox">Box Shadow</div></body></html>

图图:

技术分享

CSS3之阴影