六、背景与边框的相关样式

一、css3中与背景相关的新增属性

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

在html中，一个具有背景的元素通常由元素的内容、内容补白（padding）、边框、外部补白（margin）构成。当background-clip的属性值为border时，则背景范围包括背景区域；如果设为padding（默认），则不包括边框区域。

 

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

在绘制背景图像时，默认是从内部补白（padding）区域的左上角开始绘制的，但是可以利用background-origin属性来指定从边框左上角绘制图像。该属性可指定属性值border、padding、content，分别代表从边框的左上角、内补白区域左上角、内容左上角开始绘制图像。另外，虽然将background-clip属性指定为padding的时候，边框点划线中点之间的图像不会显示，但任然可以通过将background-origin属性指定为border的方法来指定从边框的左上角开始绘制。

 

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

该属性指定背景图像的宽度与高度，可以是像素值也可以是百分比（图像的储存除以整个边框区域的百分比），如果想维持图像的纵横比例，可以在设置图像宽度或者高度后，将另一个值设定为auto；如果只设置一个值，那么浏览器会把该值作为宽度，auto作为高度值来处理。

• 将background-size属性值设置为contain关键字，这将把原始图像在维持纵横比例的前提下自动放大或缩小，以使原始图的宽度与高度完全等于元素的宽度与高度（确保图像完全显示在元素中）。
• 将background-size属性值设置为cover关键字，这将把原始图像在维持纵横比例的前提下自动缩放到填满元素的内部，如果元素和图像的宽高比例不一致，那么多余部分将被剪去。

 

space与round：新增的用于平铺图像的选项

在css2.1中，平铺图像可以使用4个选项：no-repeat、repeat、repeat-x、repeat-y，虽然这四个选项毫无疑问是有用的，但是如果进行平铺后图像超出了背景的范围，他们并没有对图像进行更好的控制，只是简单的裁剪掉图像超出背景范围的部分。

css3中添加了两个新的用于更好的地平铺背景图像的选项：space与round

• space自动调整图像与图像之间的间距（不会调整背景图像的尺寸）。
• round会自动调整背景图像的尺寸，而不会对背景图像进行裁剪。

 

二、在一个元素中显示多个背景图像

在元素样式代码中，backgronud-image、background-repeat、background-position这些都是在css1中具有的属性，但在css3中可以通过利用逗号作为分隔符同时指定多个属性的方法，指定多个背景图像，实现在一个元素中显示多个背景图像的功能。代码事例如下：

div{
    background-image: url(1.png),url(2.png),url(3.png);    //叠放的顺序从上往下在浏览器中显示
    background-repeat: no-repeat,repeat-x,no-repeat;
    background-origin: border,padding,content;
}

 

三、使用渐变色背景

1、绘制线性渐变

指定方法：background：linear-gradient（to bottom,orange,black），使用linear-gradient函数实现线性渐变，函数中使用三个参数，第一个是渐变路线类型，第二个是起点色，第三个是终点色。当第一个参数指定为一个角度时，其作用为修改渐变线的角度，如果角度为0，则渐变线的方向为从下从下往上，当角度值增加是渐变线顺时针方向旋转。另外，还可以在第二个和第三个参数后面指定离渐变色起点或终点的偏离位置。

2、绘制放射性渐变

指定方法：background：radial-gradient（渐变起点,orange,black），可以通过circle和elipse关键字指定渐变呈圆形还是椭圆（默认）向外扩散方式，可以通过at关键字指定渐变的起点坐标。

 

四、圆角边框的绘制

border-radius

注意：使用border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制。

 

五、使用图像边框

1、border-image属性

在css3之前，如果要使用图像边框，在元素的长度或宽度发生改变的情况下，页面制作者会给元素每条边单独使用一个图像文件，这种做法一方面比较麻烦，另一方面页面上使用的元素比较多。针对这种情况，css3中增加了一个border-image属性，可以让元素的宽度与高度处于随时变化的状态下边框统一使用一个图像文件。使用这个属性时，浏览器会自动将所使用的图像分割为9个部分进行处理。

用法：border-image：url（图像文件路径）A B C D/边框的宽度，ABCD四个参数表示当浏览器自动把边框所使用到的图像进行分割的上边距、右边距、下边距和左边距。

2、指定4条边中图像的显示方法

可以在border-image属性中指定4条边中的图像是以拉伸的方式进行还是以平铺的方式进行。

用法：border-image：url（图像文件路径）A B C D/边框的宽度 上下两条边图像显示方法  上下两条边图像显示方法 ，显示方法可以指定为repeat（平铺）、strech（拉伸）、round三种。

 

background-break：指定内联元素的背景图像进行平铺时的循环方式

 

转载于:https://www.cnblogs.com/LLMjiayou7/p/9163334.html