第十三天：盒子模型（背景渐变）

背景渐变

在css中，可以通过linear-gradient线性渐变或者radial-gradient倾向渐变为元素添加渐变背景，这样的渐变操作可以让盒子更加美观，更吸引用户

线性渐变：方向可以是方位名词，也可以是deg（角度），位置色标的位置，不是一定要写的

.box {
width: 200px; /* 内容宽 */
height: 100px; /* 内容高 */
padding: 20px; /* 内边距 */
border: 2px solid red; /* 边框 */
margin: 30px; /* 外边距 */
}

首先我们写渐变代码我们要写一个box盒子的框架，如果我们想要一个从上到下的渐变，那么代码就是：

.box {
width: 300px;
height: 200px;
background: linear-gradient(red, blue);
}

注意！：

渐变写在 background 里，不是 color，渐变可以写N 种颜色，逗号隔开，方向可以用 to 方向 或 角度deg

• 线性渐变：linear-gradient(方向, 色1, 色2)
• 径向渐变：radial-gradient(色1, 色2)
• 盒子 = 内容 + padding + border + margin
• 渐变 = 颜色平滑过渡