CSS3之阴影-文字阴影text-shadow

当前位置 : 首页 > 网页制作 > CSS > CSS3之阴影-文字阴影text-shadow

CSS3之阴影-文字阴影text-shadow

来源: 作者: 时间:2016-01-20 09:22
CSS3中新增属性-阴影,可以做出很多漂亮的效果。文字阴影text-shadowtext-shadow属性值的顺序:text-shadow: h-shadow v-shadow blur color;参数分别表示水平阴影位置,垂直阴影位置,模糊半径,阴影
CSS3中新增属性-阴影,可以做出很多漂亮的效果。
 
文字阴影text-shadow
 
text-shadow属性值的顺序:
 
text-shadow: h-shadow v-shadow blur color;
 
参数分别表示水平阴影位置,垂直阴影位置,模糊半径,阴影颜色。
 
一个栗子:
 
<!DOCTYPE >
<html>
<head>
    <meta charset="utf-8">
    <title>3阴影</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>
Tag:
网友评论

<