文字阴影 text-shadow

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .hello {
      
      
        text-align: center;
        font-size: 100px;
    }
  </style>
</head>
<body>
  <p class="hello">Hello world !</p>
</body>
</html>

在这里插入图片描述

水平偏移阴影

text-shadow: 3px 0px 3px red;	text-shadow: -3px 0px 3px red;

垂直偏移阴影

text-shadow: 0px 3px 3px red;	text-shadow: -3px 0px 3px red;

盒子阴影 box-shadow

语法

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>box-shadow</title>
  <style>
    .box {
      
      
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background-color: olivedrab;
    }
  </style>
</head>
<body>
 <div class="box"></div>
</body>
</html>