css阴影

文本阴影

• text-shadow css阴影设置，一共有四个值，使用格式如下：

    div{
            text-shadow: 10px 10px 10px red;
        }

• 四个值的意义
  • （1）水平方向位移，可以为负
  • （2）垂直方向位移，可以为负
  • （3）模糊程度
  • （4）颜色
• 若要设置两个阴影，则text-shadow的值设置两个用逗号隔开。

盒子阴影

• box-shadow 盒子阴影标签

.box{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin: 0 auto;
            box-shadow: 10px 10px 5px red;
        }

• 四个值的意义和文本阴影基本一样。
• 多出来的两个值：
  • 模糊的后边颜色前边，阴影的大小，是阴影的大小和原盒子的大小差。
  • 外阴影和内阴影：在颜色之后加一个inset则表示为内阴影。

  box-shadow: 10px 10px 5px 10px red inset;