CSS3略谈（中）

一、渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

1、  linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果

• 语法：

  linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

• 参数说明：

　　1-1、第一个参数表示线性渐变的方向

1. 1. to left：设置渐变为从右到左。相当于: 270deg;
   2. to right：设置渐变从左到右。相当于: 90deg;
   3. to top：设置渐变从下到上。相当于: 0deg;
   4. to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg

　　1-2、第二个参数是起点颜色,可以指定颜色的位置

　　1-3、第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变

• 示例：

  div{
      width: 400px;
      height: 400px;
      margin: 100px auto;
      background: linear-gradient(0deg,red,orange,yellow,green,  #00ffff,blue,purple);
  }

2、  radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

• 语法：

  <radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

• 取值：

1. <position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
2. shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
3. size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
4. <color>：指定颜色。Rgba  hsla

一些案例示例代码：

.div1{
        width: 200px;
        height: 200px;
        margin: 10px auto;
        /*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色*/
        background: radial-gradient(circle at center,red,blue);
    }
    .div2{
        width: 200px;
        height: 200px;
        border-radius: 100px;
        margin: 10px auto;
        /*设置径向渐变效果:从指定坐开始，从一种颜色到另外一种颜色*/
        background: radial-gradient(circle at 50px 50px,#eeffff,#334455);
    }
    .div3{
        width: 200px;
        height: 200px;
        border-radius: 100px;
        margin: 10px auto;
        /*设置径向渐变效果:从指定坐标开始，从一种颜色到另外一种颜色，同时指定颜色的位置*/
        background: radial-gradient(circle at 50px 50px,#eeffff 0%,#666 70%,rgba(33,33,33,0.8) 80%);
    }
    /*指定渐变的形状*/
    .div4{
        width: 200px;
        height: 100px;
        margin: 10px auto;
        /*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色*/
        background: radial-gradient(ellipse at center,red,green,blue);
    }
    /*指定渐变的size*/
    .div5{
        width: 200px;
        height: 100px;
        margin: 10px auto;
        /*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色,同时指定了大小为渐变到最近的边*/
        background: radial-gradient(circle closest-side at center,red,green,blue);
    }
    /*使用系统提供的位置设置*/
    .div6{
        width: 200px;
        height: 100px;
        margin: 10px auto;
        /*设置径向渐变效果:从右上角点开始，从一种颜色到另外一种颜色*/
        background: radial-gradient(circle at top right,red,green,blue);
    }
</style>

二、背景

• background-size属性：

CSS里的background-size属性能够让程序员决定如何在指定的元素里展示,它通过改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。往往建议不要将图放大，如果有需要，尽量让图缩小

语法：

background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

参数说明：

1. auto：此值为默认值，保持背景图片的原始高度和宽度;
2. number：此值设置具体的值，可以改变背景图片的大小;
3. percentage：此值为百分值，可以是0%?100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
4. cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小
5. contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止。
6. 当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。
7. 使用案例：

   <style>
   
       *{
           padding: 0;
           margin: 0;
       }
       .div1{
            width: 200px;
            height: 200px;
            margin:10px auto;
            /*默认的背景设置，会让背景图片从左上角原点位置进行设置，不会自动的让背景图片适应容器的大小从而进行缩放*/
            background: url("../images/1.jpg");
        }
       .div2{
           width: 200px;
           height: 200px;
           margin:10px auto;
           background: url("../images/1.jpg");
           /*设置背景图片的大小,指定大小，有可能会让背景图片变形*/
           background-size: 200px 200px;
       }
       .div3{
           width: 200px;
           height: 200px;
           margin:10px auto;
           background: url("../images/1.jpg");
           /*设置背景图片的大小,cover:会让宽或者高适应当前容器的宽或者高，进行等比例缩放，但是超出的部分不会显示，所以有些图片的区域可能会无法显示*/
           background-size: cover;
       }
       .div4{
           width: 200px;
           height: 200px;
           margin:10px auto;
           background: url("../images/1.jpg") no-repeat;
           /*设置背景图片的大小,cover:会让宽或者高适应当前容器的宽或者高，进行等比例缩放，图片完全在容器以内，但是在不重复背景图片的情况下，会造成容器的部分区域空白*/
           background-size: contain;
       }
   </style>

•    background-origin:

1. 作用：background-origin 属性规定 background-position 属性相对于什么位置来定位。默认值是left top左上角
2. 语法：background-origin: padding-box|border-box|content-box;
3. 属性值说明：

background-clip:

1. background-clip 属性规定背景的绘制区：虽然是设置裁切，但是控制的是显示。说白了，就是设置最终显示那些区域
2. 语法：background-clip: border-box|padding-box|content-box;
3. 属性值说明：

几个属性的综合案例：精灵图的使用。

1、需求：为块设置精灵图背景，需要更大的展示区域，能够以更大的范围响应用户的需要，但是只需要显示指定的背景图片

2、代码：

.jd_topEeum {
    height: 44px;
    width: 40px;
    position: absolute;
    background: url("../images/sprites.png") no-repeat;
    background-clip: content-box;
    background-origin: content-box;
    background-size: 200px 200px;
    padding: 12px;
    top: 0;
}

三、过渡

通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上，2.规定效果的时长

1、语法：

transition: property duration timing-function delay;

2、参数说明：

transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function |transition-delay

补充说明tansition-timing-function: 属性规定过渡效果的速度曲线

1、案例说明

div{
    width: 200px;
    height: 200px;
    background-color: red;
    /*添加单个过渡效果*/
    /*transition:background-color 2s;*
    /*也可以同时设置多个过渡效果*/
    /*transition:background-color 2s,left 1s;*/
    /*可以设置某个过渡效果的延迟*/
    /*transition:background-color 2s,left 1s 1s;*/
    /*可以设置过渡效果的速率曲线*/
    /*transition:background-color 2s,left 1s ease-out 1s;*/
    /*还可以一次性的为所有属性添加过渡效果*/
    transition:all 1s;
    position: absolute;
    left: 0;
    top: 0;
}

2、使用建议：

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去，如

-moz-transition: all 5s ease 1s;

-webkit-transition: all 1s ease 1s;

-o-transition: all 1s ease 1s;

transition: all 1s ease 1s;

四、2D转换

通过 CSS3  transform转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸.

1、2D移动：translate()。使用translate()函数，你可以把元素从原来的位置移动。移动参照元素左上角原点

1. 语法：translate(tx)  | translate(tx,ty)
2. tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。
3. ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。如果ty没有显式设置时，相当于ty=0。
4. 也可以使用translateX(tx) 或者 translateY(ty)
5. 案例示例：

   div:hover{
       /*设置两个值，第一个参数表示X方向  第二个参数表示Y方向*/
       /*transform: translate(100px,100px);*/
       /*也可以只传入一个参数，表示X方向*/
       /*transform: translate(100px);*/
       /*也可以指定具体的方向,如下代码，表示Y方向正值方向上移动100px*/
       transform:translateY(100px);
   }

2、2D缩放：scale()：缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大.缩放是参照元素中心点。

1. 语法：scale(sx|ty)  | scale(sx,sy)
2. sx：用来指定横向坐标（X轴）方向的缩放向量，如果值为0.01~0.99之间，会让对象在X轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大。
3. sy：用来指定纵向坐标（Y轴）方向的缩放量，如果值为0.01~0.99之间，会让对象在Y轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大
4. 也可以使用scaleX(sx) 或者scaleY(sy)
5. 案例示例：

   div:hover{
       /*传入两个值，第一个参数表示X方向的缩放 第二个参数表示Y方向上的缩放*/
       /*transform: scale(2,0.5);*/
       /*也可以只传入一个值，表示X方向和Y方向上相同的缩放*/
       /*transform: scale(2);*/
       /*也可以指定具体方向上的缩放*/
       transform: scaleX(2);
   }

3、2D旋转：rotate()：旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转

1. 语法：rotate(a);
2. a: 代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转
3. 案例示例：

   div:hover{
       /*传入旋转的角度，如果正值，则进行顺时针旋转*/
       /*transform: rotate(90deg);*/
       /*如果传入负值，则逆时针旋转*/
       transform: rotate(-270deg);
   }

4、2D翻转：skew()：能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状

1. 语法：skew(ax)  |  skew(ax,ay)
2. ax：用来指定元素水平方向（X轴方向）倾斜的角度。
3. ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。
4. 也可以使用skewX(sx) 或者 skewY(sy)
5. 案例示例：

   div:hover{
       /*在X方向上倾斜30度*/
       transform: skewX(30deg);
   }

6. transform-origin: 允许你改变被转换元素的位置。
7. 示例：

   div{
       width: 100px;
       height: 100px;
       margin: 100px auto;
       background-color: red;
       /*添加过渡*/
       transition:all .5s;
       /*设置缩放的中心，默认是元素中心位置,现修改为元素左上角*/
       transform-origin: 0px 0px;
   }
   div:hover{
       transform: scale(2);
   }