阴影

文字阴影

  • text-shadow属性：适用于文本阴影
  • text-shadow属性的四个值个值：指定了水平阴影，垂直阴影，模糊度，以及阴影的颜色
  • 文本可以加多种阴影
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style>
       #text1{
           text-shadow: 1px 2px 2px orange,1px 2px 1px red;
       }
    </style>
</head>
<body>
   <div id="text1">家宝</div>
</body>
</html>

盒子阴影

  • box-shadow属性的六个值：h-shadow v-shadow blur spread color inset；
  • 可以加多重阴影，中间用逗号分开
值 说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色
inset 可选。让阴影由内向外延伸改为由外向内延伸
例：彩虹色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            padding: 0;
            margin: 200px auto;
            border: 1px red solid;
            border-radius: 100px;
            box-shadow: 0px 0px 3px 5px #FF0000 inset,
                        0px 0px 3px 10px #FF7F00 inset,
                        0px 0px 3px 15px #FFFF00 inset,
                        0px 0px 3px 20px #00FF00 inset,
                        0px 0px 3px 25px #00FFFF inset,
                        0px 0px 3px 30px #0000FF inset,
                        0px 0px 3px 35px #8B00FF inset;
        }
    </style>
</head>
<body>
        <div id="box1"></div>
</body>
</html>