浏览器前缀/ 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%); }

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值