CSS3-径向渐变

女爷i 2023-07-02 09:24 14阅读 0赞

径向渐变就是从一个中心点开始向四周产生渐变的效果；CSS3 中提供了实现径向渐变的 `radial-gradent()` 函数；使用该函数时，至少需要两个终止色。

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

*  `shape` 用于设置径向渐变的的形状；未指定渐变形状时，会根据元素的长宽比来决定渐变的形状，位置默认居中。
    
     *  `ellipse` 椭圆形
     *  `circle` 圆形
 *  `size` 渐变的大小
 *  `position` 确定圆心的位置，可以用具体数值(可为负值)、百分比(可为负值)、方位词；如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即 center
 *  `start-color、last-color` 渐变的起止色

CSS:

div { 
      width: 200px;
      height: 200px;
      margin: 10px;
      border: 1px solid gray;
      /* 只设置了渐变终止值 */
      background-image: radial-gradient(red, yellow, orange);
    }

HTML:

![在这里插入图片描述][20200129160025113.png]

修改宽度：

width: 100px;

![在这里插入图片描述][20200129160203318.png]

设置渐变大小：

/* 可以设置两个参数，一个用于设置水平方向另一个用于设置垂直方向；如果只设置一个另一个参数默认相同 */
    background-image: radial-gradient(50px, red, yellow, orange)

![在这里插入图片描述][20200129160914181.png]

设置渐变形状为椭圆：

background-image: radial-gradient(50px 100px, red, yellow, orange)

![在这里插入图片描述][20200129161211489.png]  
设置中心点的位置为左上角：

/* 通过 at 来设置中心点的位置，有两个参数，一个用于设置水平方向，另一个用于设置垂直方向；只设置水平方向时垂直方向默认居中 */
    background-image: radial-gradient(50px 100px at left top, red, yellow, orange);

![在这里插入图片描述][20200129162118709.png]

重复的径向渐变：

CSS3 提供了 `repeating-radial-gradient()` 函数，通过该函数可以实现重复的径向渐变。

语法：

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

*  `shape` 渐变的形状
 *  `size` 渐变的大小
 *  `position` 圆心位置
 *  `start-color、last-color` 渐变的起止色；必须要指定每个起止色的范围

示例：

CSS:

div { 
      width: 200px;
      height: 200px;
      margin: 10px;
      border: 1px solid gray;
      background: repeating-radial-gradient(50px at center, red 20% , yellow 40%);
    }

HTML:

![在这里插入图片描述][20200129163638152.png]

[20200129160025113.png]: https://img-blog.csdnimg.cn/20200129160025113.png
[20200129160203318.png]: https://img-blog.csdnimg.cn/20200129160203318.png
[20200129160914181.png]: https://img-blog.csdnimg.cn/20200129160914181.png
[20200129161211489.png]: https://img-blog.csdnimg.cn/20200129161211489.png
[20200129162118709.png]: https://img-blog.csdnimg.cn/20200129162118709.png
[20200129163638152.png]: https://img-blog.csdnimg.cn/20200129163638152.png