前端学习——背景渐变

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

最近遇到两个作业里都出现透明度，渐变阴影等要求，现在记录一下相关知识点。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、渐变背景

当渐变用于背景时，可以使用像图像一样的background-image属性设置。

线性渐变

linear-gradient(方位，颜色1，颜色2)

参数：

参数1：表示方位，不写默认为to bottom ，可选值：
（1）to left,to right,to top,to bottom
（2）xxx deg表示角度，度数
（3）turn表示圈
参数2：颜色1
参数3：颜色2

注意

默认情况下，颜色等分占比，可手动指定渐变占比。

平铺的线性渐变

background-image:repeating-linear-gradient(方位，颜色1，颜色2);

二、放射渐变——径向渐变

background-image:radial-gradient(circle, #5c0067 0%, #00d4ff 100%);

参数

参数1：圆心的形状
（1）circle 圆形，ellipse椭圆，

重复渐变

代码如下（示例）：

background:repeating-linear-gradient(to left,#ff0,#0f0);

---