CSS属性中的阴影属性

CSS3中的阴影属性包括文本阴影属性和盒子阴影属性。

一、文本阴影属性text-shadow

书写方式：text-shadow：x y a c;

　　　　　1）x代表的是水平方向的距离值（该值必须有，并且支持负值）

　　　　　2）y代表的是垂直方向的距离值（该值必须有，并且支持负值）

　　　　　3）a代表的是阴影的模糊程度（不支持负值）

　　　　　4）c代表的是阴影的颜色

tips:只有水平和垂直方向支持负值

　　x和y的位置不能互换

　　可以用逗号分隔的方式进行多阴影设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border: 1px solid #888888;
                margin: 50px auto;
                font-size: 50px;
                text-align: center;
                text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
            }
        </style>
    </head>
    <body>
        <div>
            我会冒火噢
        </div>
    </body>
</html>

二、盒子阴影属性box-shadow

书写方式：box-shadow：x y blur spread color inset;

　　　　1）x代表的是水平阴影的位置（该值必须有，并且支持负值）

　　　　2）y代表的是垂直阴影的位置（该值必须有，并且支持负值）

　　　　3）blur代表的是模糊距离，可选可不选

　　　　4）spread代表的是阴影的大小，可选可不选

　　　　5）color代表的是阴影的颜色

　　　　6）从外层的阴影（开始时）改变阴影内侧阴影可选可不选

tips：水平和垂直方向允许设置负值

　　可用逗号分隔的方式设置多阴影

　　　x和y的位置不能互换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border: 1px solid #888888;
                margin: 50px auto;
                font-size: 50px;
                text-align: center;
                text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;
                box-shadow: 10px 10px 20px 20px springgreen inset;
            }
        </style>
    </head>
    <body>
        <div>
            我会冒火噢
        </div>
    </body>
</html>

CSS属性中的阴影属性

相关推荐