CSS 高级属性之 radial-gradient 径向渐变详解

1.1 概述

https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient

径向渐变：默认的形状是椭圆，至少得有两个颜色值。

形状：ellipse 椭圆（默认），circle（圆）

background: radial-gradient(#e66465, #9198e5);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);

关键字用于描述边缘轮廓的具体位置。以下为关键字常量：

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

背景 - 纹理、图案、渐变、雪碧图动画、背景图尺寸适应

1.2 浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

“webkit” 或 “moz” 或 “o” 指定的数字为支持该函数的第一个版本号前缀。

兼容语法：

background: -webkit-radial-gradient(circle farthest-side at center,red,blue);/* Safari 5.1-6.0 */
background:      -o-radial-gradient(circle farthest-side at center,red,blue); /* Opera 11.6-12.0 */
background:    -moz-radial-gradient(circle farthest-side at center,red,blue);/* Firefox 3.6-15 */
background:         radial-gradient(circle farthest-side at center,red,blue);/* 标准语法 */

1.3 示例

.box1{
      background: radial-gradient(cyan 0%,transparent 20%,salmon 40%);
    }
    .box2 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 10px solid rgba(255,255,255,0.6);
      background: radial-gradient(circle,#fff 30%,transparent 0),#00caf5;
      background-size: 30px 30px;
    }
    .box3 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 10px solid rgba(255,255,255,0.6);
      background: radial-gradient(circle,#fff 30%,transparent 0) 0 0,
      radial-gradient(circle,#fff 30%,transparent 0) 15px 15px,
      #00caf5;
      background-size: 30px 30px;
    }
    .box4 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid #00caf5;
      box-shadow: 0 0 0 10px rgba(255,255,255,0.8) inset;
      background: radial-gradient(circle,#00caf5 9px,transparent 10px),
      repeating-radial-gradient(ellipse,#00caf5 0,#00caf5 4px,transparent 5px,transparent 20px,#00caf5 21px,#00caf5 25px,transparent 26px, transparent 50px),
      #fff;
      background-size: 30px 30px,90px 90px;
    }