CSS基础（6）

背景样式

边框的三要素

border属性需要三个要素：
    border: 1px solid red;
      线宽，线型，线颜色

线形
实线：solid
虚线：dashed
点状线：dotted

border属性可以写成三个小属性：
border-width：线宽
border-color：线颜色
border-sytle：线形

四个方向上的边框
border-top：上边框
border-right：右边框
border-bottom：下边框
border-left：左边框

四个方向上的边框的小属性
border-top-width：上边框线宽
border-top-color：上边框线颜色
border-top-style：上边框线形
border-right-width：右边框线宽
border-right-color：右边框线颜色
border-tright-style：右边框线形
border-bottom-width：下边框线宽
border-bottom-color：下边框线颜色
border-bottom-style：下边框线形
border-left-width：左边框线宽
border-left-color：左边框线颜色
border-left-style：左边框线形

去掉某个边框
border-left: none   属性即可去掉左边框，以此类推。

利用边框制造三角形
示例：

	.box3 {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-top-color: red;
            margin-bottom: 10px;
        }
        .box4 {
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-bottom-color: red;
            margin-bottom: 10px;
        }

效果：

盒子阴影

box-shadow属性
举例：
  box-shadow: 10px 20px 30px rgba(0,0,0,.4);

第一个属性值 10px表示x偏移量
第二个属性值 20px表示y偏移量
第三个属性值 30px表示模糊量
第四个属性值 rgba(0,0,0,.4)表示颜色

当属性值有五个时，多出来的属性值表示延展
举例：
  box-shadow: 10px 20px 30px 20px rgba(0,0,0,.4);
第四个属性值表示延展

效果：

内阴影：
  box-shadow: inset 10px 10px 20px red;
在box-shadow的属性值前加 inset 表示内阴影
效果：

多阴影叠加
多个阴影可以叠加，用逗号隔开。
示例：
box-shadow: 10px 10px 20px red, 10px 10px 20px blue, 10px 10px 20px green, inset 10px 10px 20px yellow;
效果：

背景基础知识

background-color属性

background-color属性表示背景颜色，可以使用十六进制，rgb()，argb()格式表示。
注意：padding区域是含有背景颜色的。

background-image属性

background-image属性用来设置背景图片，图片路径要写在url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径。图片默认是平铺的。

如果样式表采用外链式，那么采用相对路径引用图片时是从css目录开始的，而不是html目录。

background-repeat属性

background-repeat属性使用来设置背景的重复模式。

属性值	意义
repeat；	x，y均平铺（默认）
repeat-x；	只有x平铺
repeat-y；	只有y平铺
no-repeat；	没有平铺

示例：

	 .box1 {
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            background-image: url(./images/wx/0.jpg);
            margin-bottom: 20px;
        }
        .box2 {
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            background-image: url(./images/wx/0.jpg);
            background-repeat: repeat-x;
            margin-bottom: 20px;
        }
        .box3 {
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            background-image: url(./images/wx/0.jpg);
            background-repeat: repeat-y;
            margin-bottom: 20px;
        }
        .box4 {
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            background-image: url(./images/wx/0.jpg);
            background-repeat: no-repeat;
            margin-bottom: 20px;
        }

效果：

背景尺寸

background-size属性用来设置背景图片的尺寸，兼容到 IE
9，属性值可以用百分数表示。需要等比例设置时，可以使用auto。

示例：background-size: 100px 200px;
第一个参数表示图片宽
第二个参数表示图片高

background-size的两个特殊值
contaion：表示将背景图片智能改变尺寸以容纳到盒子里。
cover：表示将背景图片智能改变尺寸以撑满盒子。

背景裁切

background-clip属性用来设置元素的背景裁切到哪个盒子。兼容到IE9。

属性值	意义
border-box	背景延伸至边框（默认）
padding-box	背景延伸至内边（padding），不会绘制到边框处
content-box	背景被裁剪至内容区

举例：

.box1 {
            width: 300px;
            height: 300px;
            border: 10px dotted #000;
            padding: 60px;
            background-image: url(images/bj/0.jpg);
            margin-bottom: 10px;
        }
        .box2 {
            width: 300px;
            height: 300px;
            border: 10px dotted #000;
            padding: 60px;
            background-image: url(images/bj/0.jpg);
            background-clip: padding-box;
            margin-bottom: 10px;
        }
        .box3 {
            width: 300px;
            height: 300px;
            border: 10px dotted #000;
            padding: 60px;
            background-image: url(images/bj/0.jpg);
            background-clip: content-box;
            margin-bottom: 10px;
        }

效果：

背景起源
background-o’rigin属性，当属性值为content-box时，显示的图片是从真实的图片左上开始渲染
举例：

.box4 {
            width: 300px;
            height: 300px;
            border: 10px dotted #000;
            padding: 60px;
            background-image: url(images/bj/0.jpg);
            background-clip: content-box;
            background-origin: content-box;
            margin-bottom: 10px;
        }

效果：

背景固定

background-attachment属性决定背景图片位置是在视口内固定，或者随着包含它的区块滚动。

值	意义
fixed	自己的滚动条滚动图不动，外部滚动条滚动图也不动
local	自己的滚动条滚动图动，外部滚动条滚动图也动
scroll	自己的滚动条滚动图不动，外部滚动条滚动图动（默认）

.box1 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow-y: scroll;
            background-image: url(./images/bj/0.jpg);
            background-attachment: fixed;
        }
        .box2 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow-y: scroll;
            background-image: url(./images/bj/0.jpg);
            background-attachment: local;
        }
        .box3 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow-y: scroll;
            background-image: url(./images/bj/0.jpg);
            background-attachment: scroll;
        }

背景图片位置

background-position属性可以设置背景图片出现在盒子的什么位置。
可以使用top、bottom、center、left、right描述图片出现的位置。

示例：background-position: 100px 200px;
第一个属性值表示x轴方向的位置
第二个属性值表示y轴方向的位置

举例：

.box1 {
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;
            padding: 30px;
            background-image: url(./images/bj/0.jpg);
            background-size: 50%;
            background-repeat: no-repeat;
            background-clip: content-box;
            background-position: center bottom;
        }

效果：

css精灵

将多个图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做css精灵技术，也叫做css雪碧图

css精灵可以减少http请求数，加速网页显示速度。缺点也很明显：不方便测量，后期改动麻烦。

background综合属性

一些常见的背景相关的小属性，可以和写在一条background属性内。
示例：

	background white url(images/0.png) no-repeat center center;

第一个属性：背景颜色
第二个属性：背景图片
第三个属性：背景重复
第四个属性：背景位置

线性渐变

盒子的background-image属性可以用linear-gradient()形式常见线性渐变背景。
第一个属性为渐变方向，第二个属性为开始的渐变颜色，第三个属性为结束的渐变颜色。
示例：

	background-image: linear-gradient(to right, blue, red);

渐变方向也可以写成度数/。
示例：

	background-image: linear-gradient(45deg, blue, red);

可以有多个颜色值，并且可以用百分数定义它们出现的位置。
示例：

	background-image: linear-gradient(to bottom, blue, yellow 20%, red);

举例：

	.box1 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            background-image: linear-gradient(to right, blue, red);
        }
        .box2 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            background-image: linear-gradient(45deg, blue, red);
            
        }
        .box3 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            background-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
        }
        .box3 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            background-image: linear-gradient(to right, red, yellow 50%, blue);
        }

效果：

浏览器私有前缀

不同的浏览器有不同的私有前缀，用来对试验性质的css属性加以标识。

浏览器	前缀
Chrome	-webkit-
Firefox	-moz-
IE、Edge	-ms-
open	-o-

径向渐变

盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景。
第一个和第二个属性值表示圆心坐标，第三个元素表示渐变开始的颜色，第四个元素表示结束的颜色。
示例：

	background-image: radial-gradient(50% 50%, red, blue);

举例：

	.box1 {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            background-image: radial-gradient(50% 50%, red, yellow, blue);
        }

效果：