CSS3常用属性(线性渐变，径向渐变，新增background值，新增border值)

“这是我参与更文挑战的第9天，活动详情查看： 更文挑战”

线性渐变linear-gradient

参数：

background: linear-gradient(方向 color1[percent] color2[percent] ...)
复制代码

方向：可以是向8个角的方向（从左到右to right；从上到下to bottom，从左下角到右上角：to top right等等）；
也可以是角度deg，角度45deg相当于从左下角到右上角

color1[percent]：颜色，可以写多个，从颜色1渐变到颜色2，再渐变到颜色3，percent可以设置该颜色在盒子的位置，从x%处开始渐变到下一个颜色

从左到右：

.test {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: linear-gradient(to right, yellow, red); 
}
复制代码

45deg VS 从左下角到右上角：

background: linear-gradient(45deg, yellow, red); 
background: linear-gradient(to top right, yellow, red); 
复制代码

设置三种颜色，黄–绿–红，从盒子的50%处开始从黄渐变成绿，从盒子的80%处从绿渐变成红，到100%处依然是红色，方向从左到右：

background: linear-gradient(to right, yellow 50%,green 80%, red); 
复制代码

运行效果：

径向渐变

参数：

background:radial-gradient(shape radius/(a,b) at position, color [percent], color [percent] )
复制代码

shape：形状，圆circle，椭圆ellipse
radius/(a,b)：半径/（长短轴），a是水平方向，b是垂直方向
position：中心点位置，可以是像素值，百分比，方位（top/left），也可以只写一个值，因为第二个位置默认是center

圆

在盒子中心点处，半径为50px，从黄色到绿色径变的圆：

.test {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background:radial-gradient(circle 50px at 100px 100px,yellow, green);
}
复制代码

设置percent，让黄色部分从半径的50%开始渐变成绿色

background:radial-gradient(circle 50px at 100px 100px,yellow 50%, green);
复制代码

设置透明色transparent，让半径以外的区域都变透明（不是白色）

background:radial-gradient(circle 50px at 100px 100px,yellow 50%, green,transparent);
复制代码

将黄色改成透明，只剩一个圆环：

background:radial-gradient(circle 50px at 100px 100px,transparent 50%, green,transparent);
复制代码

椭圆：

background:radial-gradient(ellipse 50px 100px at 50% ,transparent 50%, green,transparent);
复制代码

position的第二个值默认是center：

background:radial-gradient(ellipse 50px 100px at top left ,transparent 50%, green,transparent);
复制代码

position用方位，设置在左上

也可以设置多个，用逗号隔开

background:radial-gradient(ellipse 50px 100px at top left ,transparent 50%, green,transparent),
           radial-gradient(ellipse 50px 100px at top right ,transparent 50%, green,transparent);
复制代码

新增background值

background-origin：指定绘制背景图像时的起点

参数：border-box | padding-box | content-box
默认是padding-box，代表从padding区域开始放置图片，其他区域平铺
如果是content-box代表从content区域放置图片
border-box代表从border区域就放置图片了
案例：

.test {
    width: 60px;
    height: 60px;
    border: 20px solid rgba(123,123,34,0.5);
    padding: 20px;
    background: url(img1.png);
    background-origin: border-box;            
}
复制代码

图片是56*52大小的
设置三种方式的结果分别如下，圈出来的地方就是设置的origin：

background-clip：指定背景的显示范围

参数：border-box | padding-box | content-box
默认属性值是：border-box
clip是裁剪的意思，设置哪一个属性，就代表哪一个属性以内的区域是有图片的，其他区域显示的图案都被裁剪掉
设置origin是由content开始，保留content内的图案：

        .test {
            width: 60px;
            height: 60px;
            border: 20px solid rgba(123,123,34,0.5);
            padding: 20px;
            background: url(img1.png);
            background-origin: content-box;
            background-clip: content-box;
        }
复制代码

运行结果：

三个属性对比：

background-size：指定背景中图像的尺寸

参数：auto | length | percentage | cover | contain

1.cover：用一张图片铺满盒子，
如果图片相对于盒子较长/宽，图片会在长/宽的方向上冲出盒子，让这一张图片缩放到占满整个盒子，没有空隙；
如果图片冲出了box，又希望图片中间部分被展示出来，可以使用background-position

2.contain：让盒子保留一张完整的背景图片，与cover相反

cover解释：

先看一看不设置背景图片的size的效果，为了看得更清除，设置不重复no-repeat

        .test {
            width: 60px;
            height: 60px;
            border: 20px solid rgba(123,123,34,0.5);
            padding: 20px;
            background: url(img1.png);
            background-repeat: no-repeat; 
        }
复制代码

运行效果：默认origin是padding-box：

当我设置宽高都填满整个box时：

background-size: 100% 100%;
复制代码

强制指定宽高很可能会拉伸图片，如果只设置一个值，就可以按比例缩放

background-size: 70px;
复制代码

案例：打星图的显示（雪碧图/精灵图）

评分打星，可能是5颗星，可能是4.5颗星；打星的效果如果都用图片来实现，需要很多张图片；
图片是要单独请求的，所以这样就要请求很多次，是耗性能且耗时的
因此可以将多个图放在一张大图里面，然后去控制显示的部分
可以调整box的长高，足够显示出你想要的部分即可，然后调整background-position，调出想要的内容

.test {
    background-image: url(./start.jpg);
    width:500px;
    height:107px;
    background-position: 0 -107px;
    }
复制代码

start.jpg是500*535大小的，一共五行，所以我设置高度是107px，足够显示出一行，设置宽度为500px，足够显示出一整行，
在background-position调整位置，上移107px，露出第二行的星星，即4颗星

想要图片的哪一部分，用position寻找就好了

完整一整张图片是这样的（百度下载）：

新增border值

css2.1有的属性，但是之前没详细讲过的

border-width:1px;
border-style:solid;
border-color:red;
复制代码

border-color还可以拆开：

border-top-color; border-right-color; 
border-bottom-color; border-left-color;
复制代码

四个方向分别设置颜色

案例：用border画一个小三角

.test {
    width:0px;
    height:0px;
    border : 50px solid transparent;
    border-top-color: rgba(100,123,3,0.8);
    }
复制代码

border-width是50px，除了top，其他方位都设置透明色

过程解释：
1.如果其他方向不设置透明色，宽高设置很小的数，可以看出来，宽高减小时，两边靠近有三角的趋势

2.如果其他三个方向不设置透明度，就可以很明显看出来，当box的宽高为0，padding为0，而border-width不为0时，只剩下border，是会有三角形的形状的

给某一方向设置非透明色，其余透明色，就可以画出朝向不同的小三角

CSS3新增border值：border-image

border-image：给border添加背景图片

参数：url number style
复制代码

url：图片地址
number：图片裁剪的值
style：图片添加的方式 stretch，round，repeat

number：会将图片按number裁剪，从上到下算number px，裁剪一下，从下到上number px裁剪一下，从左到右number px裁剪，从右到左number px处裁剪；划分成9个区域，分别标记1-9，放到border的指定位置：
1、3、7、9分别放到左上、右上、右下、左下；
2放在top处，4放在left，6放在right，8放在bottom；
5位置不用
所以要算好了number，要从哪里切

默认style是拉伸平铺stretch，会将位置2、4、6、8的图片拉伸，直到铺满border（除了4角的位置）；
round会将2、4、6、8的图片平铺，但会完整保留整张图片，适当进行缩放
repeat会从2、4、6、8位置的中间开始平铺，平铺到角落会显示多少就显示多少

案例：花边

.test {
    width:200px;
    height:200px;
    border : 50px solid rgba(100,123,3,0.5);
    border-image:url(border-test1.png) 27 stretch;
    background-image: url("img1.png")
    }
复制代码

效果：平铺拉伸

三种style对比：

如果我改变了number，让中间的菱形不完整裁剪：

border-image:url(border-test1.png) 35 round;
复制代码

可以看到，中间的菱形不完整

number切图：