1.渐变色

有时普通的背景颜色已经不足以满足项目的需求，那就会使用到渐变色。
我们先熟悉渐变色的代码再说属性：

background:linear-gradient(属性值)

那么如上，我们需要在background中选择linear-gradient这个选项才可以设置渐变色，会有哪些值？

background: linear-gradient(184deg, #000000 0%, #ff0000 50% ,#FFFFFF 100%);

我们详解以下其中的数据：

• 184deg，即多少的角度便宜，一般从上到下
• #000000，即16进制的颜色
• 0%，即从容器的多少地方开始染色

那么一般角度定义了渐变的方向，可以是角度值或关键字。常见的关键字包括 to top(从下到上)、to bottom（从上到下）、to left、to right，以及它们的组合如 to top left。

2.阴影

看看阴影的标签：

box-shadow：(属性值)

我们阔以通过增加属性值以调整具体的阴影的表现方式来达到我们的项目所需要的需求：
以下从前到后介绍：

• h-shadow：水平阴影的位置。可以是正值（阴影位于对象右侧），也可以是负值（阴影位于对象左侧）。
• v-shadow：垂直阴影的位置。可以是正值（阴影位于对象下方），也可以是负值（阴影位于对象上方）。
• blur：可选。模糊半径。值越大，阴影越模糊，0 表示无模糊。
• spread：可选。阴影的尺寸。正值扩展阴影，负值缩小阴影。
• color：阴影的颜色。可以是颜色关键字、十六进制、RGB、RGBA 等。
• inset：可选。如果存在，则阴影在边框内（即在内容和边框之间）而不是在边框外。

例如：

.box {
  margin: 20px 0 0 30px;
  height: 80px;
  width: 80px;
  background-color: green;
  border-radius: 50%;
  box-shadow: 8px 8px 10px -1px #000,  -5px -5px 10px red;
}