03-渐变

径向渐变

与其他渐变相同，径向渐变是一个不固定尺寸的图片，譬如，它没有默认尺寸、比例。具体尺寸由它所定义的元素尺寸决定。

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。

径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。

• 径向渐变的中心点至边缘形状以及其延伸的部分是由连续缩放的若干同心轮框组成的。
• 颜色结束点用于设定虚拟渐变射线的变化方式，由中心点水平变化至右侧。颜色结束点由百分比设定，中心点为0%，终止点位100%。终止点未渐变射线与边缘形状相交点的渐变半径。
• 渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆） 默认为椭圆。

使用

• 语法：radial gradient ([<shape>]||<extent-keyword>] [at<position>]?)

  • shape:用来定义径向渐变的形状，包含circle(圆形) 和 ellipse(椭圆形)

  • extent-keyword：用于定义径向渐变的边缘形状的位置

    closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
    closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
    farthest-side	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
    farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

  • position ：中心点的位置 如缺省，默认为中心点。

• 创建一个由中心点辐射开的径向渐变的图片。

  • 语法：radial gradient(at<position>,<color-stop>[,<color-stop>]+)
    • color-stop:用于定义径向渐变的颜色终止点。
  • 理解径向渐变

  html

      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
  

  css

      <style type="text/css">
          .c1,.c2,.c3{
              width: 500px;
              height: 200px;
              margin: 50px auto;
          }
          .c1{
              background-image: radial-gradient(yellowgreen,blue);
          }
  
          .c2{
              background-image: radial-gradient(yellowgreen,blue,gold);
          }
  
          .c3{
              background-image: radial-gradient(yellowgreen,blue,gold,peachpuff);
          }
  
      </style>
  

  效果图

可以看到，第一个颜色会位于中心 最后一个会包裹在外面 中间的值会包裹着中心。这就是 径向渐变的中心点至边缘形状以及其延伸的部分是由连续缩放的若干同心轮框组成的。

• 上面的我们直接设置了颜色的值没由给他设定位置 ，也就是颜色结束点用于设定虚拟渐变射线的变化方式，由中心点水平变化至右侧。颜色结束点由百分比设定，中心点为0%，终止点位100%。终止点未渐变射线与边缘形状相交点的渐变半径。 上面的这句话。 虽然我们没有给他设置位置，但是浏览器自动给我们分配了位置。下面我们来给渐变设定位置。

  html

      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
  

  css

      <style type="text/css">
          .c1,.c2,.c3{
              width: 500px;
              height: 200px;
              margin: 50px auto;
          }
          .c1{
              background-image: radial-gradient(yellowgreen 0%,blue 20%);
          }
  
          .c2{
              background-image: radial-gradient(yellowgreen 20%,blue);
          }
  
          .c3{
              background-image: radial-gradient(yellowgreen 40%,blue);
          }
  
      </style>
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4XgRqXIy-1593010659646)(C:\Users\84411\Desktop\学习笔记\学习笔记-css3\imgs\08.png)]

  可以看到我们给中心颜色设置的值让其逐渐变大 ，中心的大小也随机变大。

• 反之我们给最后以一个颜色设置，可以得到

• 设置变换椭圆 radial gradient ([<shape>]||<extent-keyword>] [at<position>]?)

  • shape 默认是椭圆 但长宽相同时就时

    • circle - 圆
    • ellipse -椭圆

            .c3{
                background-image: radial-gradient(circle ,yellowgreen ,blue 40%);
            }
    

• 除了可以设置大小之外我们可以使用position来规定位置。

  • radial gradient(at<position>,<color-stop>[,<color-stop>]+)
    • position - 规定中心点的位置 位置是两个值 （x,y）

可以更具上面给定属性来参照 这里使用 farthest-corner

        .c4{
            background-image: radial-gradient(farthest-corner at 40px 40px,
            #f35 0%, #43e 100%);
        }

• 画一个渐变的圆

  html

      <div class="c5"></div
  

  css

          .c5{
              width: 200px;
              height: 200px;
              margin: 0 auto;
              border-radius: 50%;
              background:  radial-gradient(at 50px 50px ,red,yellow);
          }
  

00px;
margin: 0 auto;
border-radius: 50%;
background: radial-gradient(at 50px 50px ,red,yellow);
}