CSS:-放射性渐变radial-gradient

语法规则：

background-image:radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);	

<radial-gradient> = radial-gradient(
  [ [ circle               || <length> ]                          [ at <position> ]? , |
    [ ellipse              || [ <length> | <percentage> ]{2} ]    [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]                  [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

/* where.. */
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

/* and */
<color-stop> = <color> [ <percentage> | <length> ]?
复制代码

中心点就是色块的起点（0%），ending shape就是渐变的边界形状。ending shape只能是正圆(circle)或者椭圆(ellipse)。

属性	描述
position	指的是中心点的位置，这个定位和background-position的定位是一样的，比如“50px 40px”，“30% 44px”，“left center”等值，一个代表x坐标，一个代表y坐标。如果缺省，代表的是正中间（center）。
shape	只能为正圆或者椭圆，正圆表示半径是一样的，椭圆则有x轴、y轴两个半径。默认的值是椭圆（ellipse）
color-stop	沿着渐变线的色彩的值和位置的值。位置的值可以是百分比或者具体的像素，和线性渐变的写法是一样的。比如“#f00 0%”，“red 25%”，“rgba(255,255,255,0.5) 200px”等。
extent-keyword	表示ending shape放射性渐变结束的形状的大小 。 closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边； closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角； farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边； farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角，这个是默认值；

例子

.box{
    width:400px;
    height:200px;
}
复制代码

1. 简单渐变

定义	展现
radial-gradient(yellow, #009966, purple)
radial-gradient(circle,yellow, #009966, purple)
radial-gradient(yellow, #009966 20%, purple)
radial-gradient(yellow, #009966 20%, #009966 50%, purple)
radial-gradient(yellow, yellow 20%, #009966 20%, #009966 50%, purple 50%, purple)
radial-gradient(at 0% 0%, yellow, #009966, purple)
radial-gradient(circle at 0% 50%, yellow, #009966, purple)
radial-gradient(100px circle at 0% 50%, yellow, #009966, purple)
radial-gradient(100px 50px ellipse at 25% 50%, yellow, #009966, purple)
radial-gradient(30px circle at 75px 45px, yellow, #009966, purple)
radial-gradient(closest-side circle at 75px 45px, yellow, #009966, purple)
radial-gradient(15px 30px ellipse at 100px 40px, yellow, #009966, purple)
radial-gradient(closest-side ellipse at 100px 40px, yellow, #009966, purple)
radial-gradient(closest-corner ellipse at 150px 20px, yellow, #009966, purple)
radial-gradient(closest-corner circle at 150px 20px, yellow, #009966, purple)

2. 重复背景

<div class="container">
  <div class="element"></div>
</div>
复制代码

css代码：

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

.element {
  width: 100%;
  height: 250px;
  border: 1px solid black;
  margin: 0 auto;
  
  // 设置圆点图案+大小，默认repeat
  background-image: radial-gradient(circle, white, white 10px, black 10px, black);
  background-size: 50px 50px;
}
复制代码

转载于:https://juejin.im/post/5a98fa64f265da23a2288c92