CSS3学习笔记——背景与边框相关样式

1.与背景相关的新增属性

1）指定背景的显示范围——background-clip属性

属性值：padding：表示显示范围不包括边框在内；

border：表示背景的显示范围包括边框在内；

2）指定背景图像的绘制起点——background-origin属性

属性值：border：绘制起点为边框左上角；

padding：内部补白区域左上角；

content：内容的左上角

div{    
    width: 300px;
    height: 200px;    
    background-color: black;        
    background-image: url(flower-green.png);        
    background-repeat: no-repeat;        
    border: dashed 15px green;        
    padding: 30px;   
    color:white;
    font-size:2em;
    font-weight:bold;
    
}
div.div1{     
       /* 显示范围    */ 
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    /* 绘制起点        */
    -moz-background-origin: border;
    -webkit-background-origin: border; 
}

3）指定背景图像的尺寸——background-size属性

background-size:宽度高度；

①维持纵横比： background-size:auto 20px;

② 只设置一个参数：background-size:20px; 表示宽度为20px，auto作为高度值进行处理；

③ 指定为contain关键字：原始图像维持纵横比自动放大或缩小，使得原图像事物宽度或宽度与元素的高度或宽度完全相等；

④ 指定为cover关键字：原始图像维持纵横比，自动放大或缩小填满元素大小，比例不一致的话，就直接把多余的部分去掉；

div{
	    width: 300px;
	    height: 200px;
        background-color: black;
        background-image: url(flower-green.png);
        padding: 30px;
        color:white;
        font-size:2em;
        font-weight:bold;
        /* 设置具体尺寸 */
        background-size: 40px 20px;
        /* 设置百分比 */
        background-size:50% 50%;
        /* contain关键字 */
        background-size:contain;
        /* cover关键字 */
        background-size:cover;
        background-repeat: no-repeat;

}

设置具体尺寸设置百分比

contain关键字 cover关键字

4）用于平铺背景图像选项——background-repeat属性

① no-repeat、repeat、repeat-x、repeat-y

② space：该属性值在水平方向或垂直方向平铺背景图像时并不裁剪掉图像超出背景的部分，也不会调整背景图像的尺寸，

而是自动调整图像与图像之间的间距；

③ round：在水平方向或垂直方向平铺背景图像时不会裁剪掉图像超出背景部分，而是自动调整背景图像的尺寸；

div{
    width:300px;
    height:300px;
    border:1px solid blue;
    background-image: url(sheep.png);
    /* space选项平铺 */
    background-repeat: space;
    /* round选项平铺 */
    background-repeat: round;
   
}

space选项平铺 round选项平铺

5）在一个元素中显示多个背景图像——background-image属性

在CSS3中，通过利用逗号作为分隔符来同时指定多个属性的方法，可以指定多个背景图像；

通过background-image属性指定图像文件的时候，浏览器背景的显示顺序是从上往下指定的，第一个指定的图像文件放在最上面，最后指定的文件是放在最下面的；

div{
        background-image:url(flower-red.png), url(flower-green.png),url(sky.jpg);
        background-repeat: no-repeat, repeat-x, no-repeat; 
        background-position: 3% 98%,85%, center center,  top;        
        width: 300px;        
        padding: 90px 0px; 
}

6）使用渐变色背景

①绘制线性渐变

background:linear-gradient(to bottom,orange,black);

使用Linear-gradient函数实现线性渐变，有三个参数，第一个参数是起点颜色，第三个参数是终点颜色

第一个参数有多个参数值如下：

（1）to bottom：从上往下渐变；

（2）to bottom right：从左上往右下渐变；

（3）to right：从左往右； to up right：从左下往右上；

（4）to up ：从下往上 to up left：从右下往左上；

（5）to left：从右往左 to bottom left ：从右上往左下渐变；

第一个参数可以是一个角度：

background:linear-gradient(30deg,orange,black);

可以在起点色或终点色后边指定离渐变色起点或渐变色终点的偏离位置；

background:linear-gradient(to bottom,orange 20%,black 70%);

添加多个渐变的中间点

background:linear-gradient(to bottom,orange 0%,red 20%,yellow 50%,green 75%,black 100%);

div{
    width:300px;
    height:300px;
    background: linear-gradient(60deg,orange 0%,red 25%,yellow 50%,green 75%,black 100%);  
}

② 绘制放射性渐变

background:radial-gradient(orange,black); 渐变起点色和渐变终点色；

1）渐变的扩散方式：

circle：圆形（默认） ellipse:椭圆

background:radial-gradient(circle,orange,black);

2）在哪个位置扩散

center center ；left top ；center top ；right top ；right bottom ；right center ；center bottom ； left bottom 坐标值（20，30）

background:radial-gradient(circle at center top,orange,black);

3）渐变的尺寸

① closest-side(渐变到离起点最近的一条边) farthest-side

② closest-corner(渐变到起点最近的一个角) farthest-coner

background:radial-gradient(circle farther-side at center top,orange,black);

③ 指定圆形的半径指定尺寸；

  background:radial-gradient(circle 95px at center top,orange,black);

④ 指定椭圆横纵向半径指定渐变尺寸；

   background:radial-gradient(ellipse 235px 95px at center top,orange,black);

4）添加多个渐变色并指定偏离的百分比，在渐变起点与渐变终点中添加多个渐变中间点；

   background:radial-gradient(circle 95px at center top,orange 0%,red 20%,yellow 50%,green 75%,black 100%);

div{
    width:400px;
    height:200px;
    background:radial-gradient(circle 180px at 80px 50px,orange 0%,red 25%,yellow 50%,green 75%,black);
}

2.边框

1）圆角边框

border-radius属性指定好圆角的半径，就可以绘制圆角边框了；

① 一个参数时，四个角的圆角半径都一样；

② 两个参数时，第一个表示左上角和右下角的圆角半径；第二个参数表示右上角和左下角的圆半径；

③ 绘制四个角不同半径的圆角边框：

border-top-left-radius； border-top-right-radius；border-bottom-left-radius；border-bottom-right-radius

div{
        border: solid 5px blue;
        /* 一个参数时 */
        border-radius: 20px;
        /* 两个参数时 */
        border-radius: 40px 20px;
        /* 指定四个不同样式时 */
        border-top-left-radius: 10px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 40px;
        background-color: skyblue;        
        padding: 20px;
        width: 180px;
}

一个参数时两个参数时四个圆角分别指定时

2）图像边框

border-image属性会让浏览器在显示图像边框时，自动将所使用的图像分割为9部分进行处理；

① border-image（图像文件路径）A B C D /border-width topbottom leftright

A B C D这四个参数表示当浏览器自动把边框所使用到的图像进行分割时的上、右、下、左边距。

border-width：指定边框的宽度；（如果四条边框的参数完全相同，可以只写一个参数，否则全写）

topbottom：表示元素的上下两条边中图像的显示方法；（火狐浏览器才看得到效果）

leftright：表示元素的左右两条边中图像的显示方法；（火狐浏览器才看得到效果）

显示方式有三种：repeat stretch round

div{
	/* 四条边中的显示方式的属性只有火狐支持，分割和边框如果参数都一样，则可以只写一个 */
        border-image: url(borderimage.png) 10/5px repeat stretch;
        width:300px;
        height:200px;
}