浏览器前缀/ css3 渐变 /_-webkit-radial-gradient-CSDN博客

浏览器私有前缀

为了浏览器兼容新的css3属性

-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀
-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀
-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加---webkit-前缀

css3 渐变 gradient

[gradient 渐变]

CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡. background属性

线性渐变 linear-gradient

[ linear 线的,直线的 ]

语法：
{background: linear-gradient( 方向, 颜色1, 颜色2, ...);} 至少两个或两个以上的颜色

 div:nth-child(1) {
        background: linear-gradient(to right bottom, red, green, blue, purple);
      }
      div:nth-child(2) {
        background: linear-gradient(to right, red, green, blue, purple);
      }
      div:nth-child(3) {
        background: linear-gradient(180deg, red, green, blue, purple);
      }

说明：
方向：

1.使用方位名词 ;

默认为to bottom，即从上向下的渐变；

可以设置为 to left(从右到左)、top right(从左到右)、to bottom(从上到下 默认值)、to top(从下到上) , to right bottom,(从左上到右下);等等

2. 使用角度(deg);
background :{ linear-gradient(90deg, red, blue) }

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

径向渐变 radial-gradient 不兼容无效加浏览器私有前缀例: -webkit-

radial [辐射状的]

 div {
        width: 200px;
        height: 200px;
        border: 2px skyblue solid;
        float: left;
        margin: 0 20px;
      }
      div:nth-child(1) {
        width: 300px;
        background: -webkit-radial-gradient(
          /* 改变默认的形状 */ circle,
          red,
          green,
          blue,
          purple
        );
      }
      div:nth-child(2) {
        background: -webkit-radial-gradient(
          /* 大小,最远/最近边, 最远/最近角 */ farthest-side,
          red,
          green,
          blue,
          purple
        );
      }
      div:nth-child(3) {
        background: -webkit-radial-gradient(
            /* 改变中心位置,默认是center center,可以用百分比或px值(元素的宽高) */
          right bottom,
          red,
          green,
          blue,
          purple
        );
      }

径向渐变是从“一个点”向四周的颜色渐变

语法：
{ background: radial-gradient(圆心位置, 形状, 大小, 颜色1,颜色2, 颜色3;}

圆心位置、形状、大小、颜色

注：渐变大小和渐变形状不能一起使用。

圆心位置: 渐变起点的位置，可以为百分比/px/方位名词，默认是图形的正中心。

形状: 渐变的形状，ellipse表示椭圆形(默认值)，circle表示圆形。如果元素形状为正方形的元素，也显示为圆形。

size：渐变的大小，即渐变到哪里停止，它有四个值。

closest-side：最近边； [closest 最近的] [side 边,侧]

farthest-side：最远边；

closest-corner：最近角； [farthest 最远的] [corner 角,墙角]

farthest-corner：最远角

 div {
        background: -webkit-radial-gradient(
          60% 40%,
          /* 最近边 */
          closest-side,
          blue,
          green,
          yellow,
          black
        );
      }
      div {
        background: -webkit-radial-gradient(
          60% 40%,
          /* 最远边 */
          farthest-side,
          blue,
          green,
          yellow,
          black
        );
      }
      div {
        background: -webkit-radial-gradient(
          60% 40%,
          /* 最近角 */
          closest-corner,
          blue,
          green,
          yellow,
          black
        );
      }
      div {
        background: -webkit-radial-gradient(
          60% 40%,
          /* 最远角 */
          farthest-corner,
          blue,
          green,
          yellow,
          black
        );
      }

重复性渐变

1.重复性线性渐变

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

0%到10% 是red到 yellow ; 10%到20% 是yellow到绿; 重复五次;

 div{
        background: repeating-linear-gradient(red, yellow 10%, green 20%);
      }

2.重复性径向渐变

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

0%到20% 是red到 yellow ; 20%到50% 是yellow到绿; 重复两次;

div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }