浏览器前缀/ css3 渐变 /

浏览器私有前缀

为了浏览器兼容新的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%); }