详解css3渐变，背景和过渡

一、渐变

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

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

a) 语法：
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
b) 参数说明：

• 第一个参数表示线性渐变的方向，

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

• 第二个参数是起点颜色,可以指定颜色的位置
• 第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变
  c) 示例：

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

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

a) 语法：
<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
b) 取值：

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

c) 一些案例示例代码：

 .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>

二、背景

1.background-size属性：

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

1. 语法：
   background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
2. 参数说明：

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

3. 使用案例：

<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>

2. background-origin:

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

padding-box	背景图像相对于内边距框来定位。
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

3. background-clip:

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

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

三、过渡

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

1. 语法：
   transition: property duration timing-function delay;
2. 参数说明：
   transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function |transition-delay

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

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

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4. 案例说明

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;
}

5. 使用建议：
   因为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;

四、边框图片

• border-image-sorce：指定边框的路径，默认为四个角点
• border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充
• border-image-width:边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
  细节：1.边框图片的本质是背景，并不会影响元素内容的放置 2.内容只会被容器的border和padding影响
  建议：一般将值设置为原始的边框的宽度
• border-image-outset:扩展边框
• border-image-repeat
  • repeat:直接重复平铺
  • round:将内容缩放进行完整的重复平铺

缩写：

border-image: source slice / width/outset repeat;