CSS 常用属性之 阴影

　　　　text-shadow 是一个给文字添加阴影的属性

　　　　text-shadow: X偏移量,Y偏移量,模糊值,颜色 　　　　可以同时设置多个文本阴影,需要用逗号隔开

　　　　如果是需要兼容低版本的浏览器

　　　　-webkit-text-shadow

　　　　-moz-text-shadow

　　　　-o-text-shadow

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p {
            text-align: center;
            padding: 24px;
            margin: 0;
            font-family: helvetica, arial, sans-serif;
            color: #000;
            background-color: #000;
            font-size: 80px;
            font-weight: bold;
            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>
    <p>Text Shadow</p>
</body>
</html>

这是效果图

 

盒子阴影   box-shadow

box-shadow 属性和 text-shadow 属性差不多

使用方法   box-shadow:(inset内阴影 可选), x偏移量, y偏移量, 模糊值(可选), 阴影尺寸(可选), 颜色(可选)

也可以同时设置多个阴影，用逗号分隔

 

posted @ 2018-01-20 16:04  木头人_a  阅读(569)  评论(0)  编辑  收藏  举报