Css3

格式：docx
大小：1000.17 KB
文档页数：25

下载文档原格式

CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局

</div>
先来看一下结构布局：
<div <div class="headr">导航栏，头部，搜索框</div> <div class="contain"> <div class="left">物品分类</div> <div class="center">广告内容</div> <div class="right">登录</div> </div> <div class="footer">尾部</div>
博客园用户登录代码改变世界密码登录短信登录忘记登录用户名忘记密码记住我登录第三方登录/注册没有账户, 立即注册
CSS3——弹性盒模型 -flex——等分布局、流式布局、圣杯布局
1.等分布局：
中间固定两边自适应：
固定两个，一个自适应
2.流式布局：
模仿float浮动布局
3.圣杯布局：（自适应布局）

css3通过scale（）、rotate（）实现放大、旋转

css3通过scale（）、rotate（）实现放⼤、旋转⼀、scale()⽅法缩放，指的是“缩⼩”和“放⼤”。

在CSS3中，我们可以使⽤scale()⽅法来将元素根据中⼼原点进⾏缩放。

跟translate()⽅法⼀样，缩放scale()⽅法也有3种情况：（1）scaleX(x)：元素仅⽔平⽅向缩放（X轴缩放）；（2）scaleY(y)：元素仅垂直⽅向缩放（Y轴缩放）；（3）scale(x,y)：元素⽔平⽅向和垂直⽅向同时缩放（X轴和Y轴同时缩放）；1、scaleX(x)语法：transform:scaleX(x)说明：x表⽰元素沿着⽔平⽅向（X轴）缩放的倍数，如果⼤于1就代表放⼤；如果⼩于1就代表缩⼩。

⼤家想想倍数是怎样⼀个概念就很好理解了。

2、scaleY(y)语法：transform:scaleY(y)说明：y表⽰元素沿着垂直⽅向（Y轴）缩放的倍数，如果⼤于1就代表放⼤；如果⼩于1就代表缩⼩。

3、scale(x,y)语法：transform:scale(x,y)说明：x表⽰元素沿着⽔平⽅向（X轴）缩放的倍数，y表⽰元素沿着垂直⽅向（Y轴）缩放的倍数。

注意，Y是⼀个可选参数，如果没有设置Y值，则表⽰X、Y两个⽅向的缩放倍数是⼀样的（同时放⼤相同倍数）。

举例：<!DOCTYPE html><html xmlns="/1999/xhtml"><head><title>CSS3缩放scale()⽤法</title><style type="text/css">/*设置原始元素样式*/.main{margin:100px auto;/*⽔平居中*/width:300px;height:200px;border:1px dashed gray;}/*设置当前元素样式*/#jb51{width:300px;height:200px;color:white;background-color: #3EDFF4;text-align:center;transform:scaleX(1.5);-webkit-transform:scaleX(1.5); /*兼容-webkit-引擎浏览器*/-moz-transform:scaleX(1.5); /*兼容-moz-引擎浏览器*/}/*普通⽅便对⽐*/#jbzj{width:300px;height:200px;color:white;background-color: #3EDFF4;text-align:center;}</style></head><body><div class="main"><div id="jb51">1</div></div><div class="main"><div id="jbzj">2</div></div></body></html>在chrome浏览器预览效果如下：分析：从上图可以看出，元素沿着X轴⽅向放⼤了1.5倍（两个⽅向同时延伸，整体放⼤1.5倍）。

css3实现图片遮罩效果鼠标hover以后出现文字

css3实现图⽚遮罩效果⿏标hover以后出现⽂字⿏标hover 以后。

图⽚上⾯出现⼀个遮罩, 透明度变化，显⽰设置好的⽂字的⽂字，完全使⽤css 实现，下图是效果关键代码复制代码代码如下:.featured-image:hover {opacity: 0.9;color: #fff;background: rgba(0,0,0,0.8);}看源码吧复制代码代码如下:<!doctype html><html><head><meta charset="utf-8"><title>⽆标题⽂档</title><style>#content article {float: left;margin-right: 4%;max-width: 236px;position: relative;width: 22%;margin-bottom: 3.5%;}#content article:nth-child(4n+4) {margin-right: 0;}.post-format-content {position: relative;background: #111;}.post-thumbnail {max-width: 100%;height: auto;overflow: hidden;}.content-wrap {padding: 0;position: absolute;text-align: center;width: 100%;top: 0;bottom: 0;display: table-cell;vertical-align: middle;overflow: hidden;}.content-wrap h1.entry-title {display: table;font-size: 110%;height: 100%;text-transform: uppercase;width: 100%;margin:0;}.edit-link {z-index: 2;}.featured-image {display: table-cell;position: relative;transition: opacity .25s ease-in-out, background .25s ease-in-out;-moz-transition: opacity .25s ease-in-out, background .25s ease-in-out;-webkit-transition: opacity .25s ease-in-out, background .25s ease-in-out;vertical-align: middle;z-index: 1;color: #fff;text-decoration: none;opacity: 0;padding: 10%;}.featured-image:hover {opacity: 0.9;color: #fff;background: rgba(0,0,0,0.8);}.post-thumbnail img {display: block;}img {max-width: 100%;height: auto;}</style></head><body><div id="content"><article class="post-152 post type-post status-publish format-standard hentry category-people category-photos"><div class="post-format-content"><div class="post-thumbnail"> <img width="480" height="640" src="assets/img/1.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </div><div class="content-wrap"><h1 class="entry-title"><a href="" class="featured-image" rel="bookmark">Music & Fashion</a></h1></div></div></article><article class="post-152 post type-post status-publish format-standard hentry category-people category-photos"><div class="post-format-content"><div class="post-thumbnail"> <img width="480" height="640" src="assets/img/2.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </div><div class="content-wrap"><h1 class="entry-title"><a href="" class="featured-image" title="amp; Fashion" rel="bookmark">Music & Fashion</a></h1> </div></div></article></div></body></html>。

css3 父元素的兄弟元素样式

css3 父元素的兄弟元素样式CSS3作为一种前端样式表语言，为网页设计师提供了更加丰富多样的样式选择，使网页具备更加炫丽的视觉效果。

在CSS3中，我们可以通过选择器来选择元素并对其进行样式定义，其中，父元素的兄弟元素样式也是我们需要掌握的一项重要内容。

本文将为大家详细介绍如何在CSS3中对父元素的兄弟元素进行样式设置。

在CSS3中，我们可以通过使用"+"选择器来选择父元素的直接下一个兄弟元素，通过使用"~"选择器来选择父元素的所有后续兄弟元素。

这两种选择器的使用方式相似，但功能略有不同。

首先，我们来学习使用"+"选择器。

该选择器的作用是选择父元素的直接下一个兄弟元素，并对其进行样式设置。

例如，我们有如下HTML代码：<div class="parent"><span>兄弟元素1</span><span>兄弟元素2</span><span>兄弟元素3</span></div>如果我们想要为父元素的第一个兄弟元素设置样式，可以使用以下CSS代码：.parent span:first-of-type {/* 样式设置 */这样，我们就可以对父元素的第一个兄弟元素进行样式设置了。

同样的道理，如果我们想要对父元素的第二个兄弟元素进行样式设置，可以使用":nth-of-type()"伪类选择器：.parent span:nth-of-type(2) {/* 样式设置 */接下来，我们来学习使用"~"选择器。

该选择器的作用是选择父元素的所有后续兄弟元素，并对它们进行样式设置。

同样考虑上述HTML代码，如果我们想要为父元素的所有后续兄弟元素设置样式，可以使用以下CSS代码：.parent span~span {/* 样式设置 */这样，父元素的所有后续兄弟元素都将应用相同的样式。

css3微元素

css3微元素
CSS3微元素是CSS3中引入的一种特殊的元素选择器，主要
用于选择DOM树中的特殊元素和生成内容。

它们以双冒号(::)开头，区别于伪类选择器的以单冒号(:)开头。

常见的CSS3微元素包括：
1. ::before：在元素的内容前面插入生成的内容。

2. ::after：在元素的内容后面插入生成的内容。

3. ::first-letter：选择元素中的首字母，并对其应用样式。

4. ::first-line：选择元素中的第一行，并对其应用样式。

5. ::selection：选择用户选择的元素部分，并对其应用样式。

使用CSS3微元素时，可以通过设置其content属性来生成内容，并可以对其应用样式。

例如，可以使用::before来插入一个元素之前的图标：
```css
.icon::before {
content: "\f005";
font-family: "Font Awesome";
}
```
上述代码会在class为icon的元素前插入一个表示星星的Font Awesome图标。

css3——transition属性和opacity属性

css3——transition属性和opacity属性【transition-duration】是⼀个css3属性，规定完成过度效果需要花费的时间（⼀秒或毫秒计）。

语法：transition-duration: time;time ：规定完成过渡效果需要花费的时间（以秒或毫秒计）。

默认值是 0，意味着不会有效果。

该属性其实是transition属性的⼀个⼦属性，下⾯总结⼀下css3中的transition属性：【transition】⽤于在⼀定的时间内平滑的过度，这种效果可以在⿏标单击，获取焦点，被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS属性的属性值。

从定义可以知道transition是⼀个⽤于动画过度的属性，然⽽transiton属性只不过是⼀个简写属性，⽤于设置四个过度属性，这四个过度属性分别是:transition-property (执⾏变换的属性 )transition-duration (变换延续时间)transition-timing-function (延续时间内，变换速率的变化)transition-delay (变换延迟时间)下⾯来分别介绍⼀下各个属性transition-property 即⽤来指定当元素其中⼀个属性改变是执⾏transition效果值:none(没有属性改变)，all(所有属性都改变)或指定某⼀元素(⽐如color，background等属性)。

transition-duration 是动画执⾏的时间，单位(s)⽐如"0.1s"也可以写成".1s"，它可以作⽤于任何元素，包括before和after伪元素。

transition-timing-function 动画的执⾏⽅式值:ease(逐渐慢下来)，linear(匀速)，ease-in(由慢到快)，ease-out(由快到慢)，ease-in-out(先慢到快再到慢)，cubic-bezier(该值允许你去⾃定义⼀个时间曲线)。

CSS3的content属性详解及CSS中content使用字体图标

CSS3的content属性详解及CSS中content使⽤字体图标 CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有⼀个content属性，能够实现页⾯中的内容插⼊。

content属性⼀般⽤于::before、::after伪元素中，⽤于呈现伪元素的内容。

平时content属性值我们⽤的最多的就是给个纯字符，其实它还有很多值可供选择。

1、插⼊纯⽂字：content: '插⼊纯字符';2、插⼊图⽚：content: url('http://**.png');3、插⼊元素属性：<h1>3、插⼊元素属性</h1><div class="content fill-dom-attr"data-title="我是.fill-dom-attr元素的 data-title 属性值"></div>.content.fill-dom-attr::before{content: attr(data-title);}<p><a href="//">菜鸟教程</a> - 免费的编程学习⽹站。

</p>a:after {content: " (" attr(href) ")";}4、插⼊当前元素编号（即当前元素索引）<style>*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}.content{position: relative;padding: 10px;border: 1px solid #666;margin: 10px;}.fill-dom-index li{position: relative;/* 给计数器加器起个名字，它只会累加 li 标签的索引，li元素中间的div并不会理会 */counter-increment: my;}.fill-dom-index li div::before{/* 使⽤指定名字的计算器 */content: counter(my)'- ';color: #f00;font-weight: 600;}</style><body><h1>4、插⼊当前元素编号(即当前元素索引)</h1><div class="content fill-dom-index"><ul><li><div>我是第1个li标签</div></li><div>我是li标签中的第1个div标签</div><li><div>我是第2个li标签</div></li><li><div>我是第3个li标签</div></li><div>我是li标签中的第2个div标签</div><li><div>我是第4个li标签</div></li><li><div>我是第5个li标签</div></li></ul></div></body>5、插⼊当前元素编号(指定种类)<style>*{margin: 0;padding: 0;box-sizing: border-box;}li{list-style: none;}.content{position: relative;padding: 10px;border: 1px solid #666;margin: 10px;}.fill-dom-index2 li{position: relative;counter-increment: my2;}.fill-dom-index2 li div::before{/* 第⼆个参数为list-style-type，可⽤值见： /cssref/pr_list-style-type.asp*/content: counter(my2,lower-latin)'- ';color: #f00;font-weight: 600;}</style><body><h1>5、插⼊当前元素编号(指定种类)</h1><div class="content fill-dom-index2"><ul><li><div>我是第1个li标签</div></li><div>我是li标签中的第1个div标签</div><li><div>我是第2个li标签</div></li><li><div>我是第3个li标签</div></li><div>我是li标签中的第2个div标签</div><li><div>我是第4个li标签</div></li><li><div>我是第5个li标签</div></li></ul></div></body>6、CSS中content使⽤字体图标，⽐如iconfont ⽬前字体图标使⽤最⼴泛的是阿⾥巴巴的iconfont（具体使⽤请⾃⾏百度），然后找到我们需要的字体图标，点击编译图标，这个Unicode(16进制)的符号是我们需要的：其中content：“”中\e667之前必须有空格，不然显⽰不正确。

css3

参数
各种长度单位都可以：px，%，… %有时很方便但宽高不一致时不太好
圆角(2)
用法
1个：四个方向都一样 border-radius: 一样 2个：对角 border-radius: 左上&右下右上&左下 3个：斜对角 border-radius: 左上右上&左下右下 4个：全部，顺时针 border-radius: 左上右上右下左练习：风车效果
盒模型阴影
用法 box-shadow:[inset] x y blur [spread] color 参数 [inset]：投影方式 inset：内投影不写：外投影 x、y：阴影偏移 blur：模糊半径 [spread]：扩展阴影半径先扩展原有形状，再开始画阴影 Color：颜色练习：做一个有左上内阴影和右下外阴影的效果
实例：边框背景
子元素的padding设置百分比：不管哪个方向都是父元素宽度的百分比
Css3分栏布局
多列
column-width 指定列的宽度 column-count 要分的列数 column-gap 列之间的距离 column-rule 栏目间隔线 /cssref/css3-pr-columnrule-style.html //间隔线类型
Css3 选择器 –结构性伪类（2）
E:first-child 表示E父元素中的第一个子节点，且类型为E E:last-child 表示E父元素中的最后一个子节点，且类型为E E:first-of-type 表示E父元素中的第一个E子节点 E:last-of-type 表示E父元素中的最后一个E子节点 E:only-child表示E父元素中只有一个子节点。注意：不包含文本节点 E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：不包含文本节点

css3 元素对齐

css3 元素对齐CSS3是一种强大的样式表语言，它提供了许多用于对齐元素的属性和方法。

在本文中，我们将讨论一些常见的 CSS3 元素对齐技术，以及如何使用它们来实现各种布局。

一、水平对齐1. text-align 属性text-align 属性用于水平对齐文本。

它可以设置为 left、right、center 或 justify，分别代表左对齐、右对齐、居中和两端对齐。

例如：```.container {text-align: center;}```2. margin 属性margin 属性可以用于水平对齐块级元素。

设置 margin-left 和margin-right 属性的值为 auto 可以使元素水平居中对齐。

例如：```.container {width: 50%;margin: 0 auto;}```3. flexbox 布局flexbox 是一种强大的布局模式，它可以轻松实现水平和垂直对齐。

使用 display: flex 将容器元素设置为 flex 容器，然后使用justify-content 属性来指定子元素的水平对齐方式。

例如：```.container {display: flex;justify-content: center;}```二、垂直对齐1. line-height 属性line-height 属性用于设置行高，它可以用于垂直对齐内联元素和行内块元素。

将 line-height 属性的值设置为等于容器高度可以使元素垂直居中对齐。

例如：```.container {height: 100px;line-height: 100px;}```2. vertical-align 属性vertical-align 属性用于垂直对齐表格单元格中的内容。

它可以设置为 top、middle、bottom 或 baseline，分别代表顶部对齐、居中对齐、底部对齐和基线对齐。

例如：```td {vertical-align: middle;}```3. flexbox 布局flexbox 布局也可以用于垂直对齐。

css3 变量运算

css3 变量运算CSS3变量运算是CSS的一项新功能，它允许使用数学运算和逻辑运算来定义和操作CSS变量。

这使得CSS的灵活性和可重用性进一步提高，可以更方便地管理和调整样式。

CSS变量运算可以使用加减乘除、取模、比较和逻辑操作符来进行数学运算和逻辑运算。

下面是一些常见的CSS3变量运算的示例：1. 加法运算：```:root {--width: 100px;--height: 200px;--sum: calc(var(--width) + var(--height));}.box {width: var(--sum);height: var(--sum);background-color: red;}```在上面的示例中，我们定义了两个变量--width和--height，并使用calc()函数来将它们相加，将结果存储在--sum变量中。

然后，我们可以在.box类中使用--sum变量来设置宽度和高度。

2. 乘法运算：```:root {--base-font-size: 16px;--font-size: 1.2;--calculated-font-size: calc(var(--base-font-size) * var(--font-size));}p {font-size: var(--calculated-font-size);}```在上面的示例中，我们定义了一个变量--base-font-size，并将它与另一个变量--font-size相乘，结果存储在--calculated-font-size变量中。

然后，我们可以在p元素中使用--calculated-font-size变量来设置字体大小。

3. 逻辑运算：```:root {--primary-color: blue;--secondary-color: green;--link-color: var(--primary-color);}a {color: var(--link-color);}button {color: var(--primary-color);}.active {--link-color: var(--secondary-color);}```在上面的示例中，我们定义了两个颜色变量--primary-color和--secondary-color，并将--primary-color变量的值赋给--link-color 变量。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

目前主流浏览器chrome,safari,firefox,opera,甚至360都已经支持css3的大部分功能，IE10以后也开始全面支持CSS3 编写Css3样式时，浏览器需要不同的前缀，表示css属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性

Css3把很多需要使用图片和脚本实现的效果，甚至动画效果，只需要短短的几行代码就能搞定，简化了前端开发工作人员的设计过程，加快页面载入速度 Css3减少在标签中的class和ID的数量更方便的维护样式表，更好的实现结构和表现的分离

边框

1.圆角效果border-radius border-radius 是向元素添加圆角边框 Border-radius其实是：border-top-left-radius;border-top-right-radius,border-bottom-right-radius,border-bottom-left-radiusde 的简写方式 Border-radius:5px 4px 3px 2px (左上角，右上角，右下角，左下角，顺时针) 只有一个值时表示所有的圆角半径是一样的，当然可以以百分比为单位，但是兼容性不好实心上半圆：高度为宽度的一半，并且设置左上角和右上角的半径与元素的高度一致 div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:50px 50px 0 0; } 实心圆：宽度和高度值设置为一致，并且四个角的值都设置为他们的值的一半 div.circle{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } 2.阴影box-shadow Box-shadow 是向盒子添加阴影，支持添加一个或多个 Box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

Inset可以卸载参数的第一个或者最后一个，其他位置是无效的添加多个阴影：只需要用逗号隔开样式和样式 .boxshadow-multi{ width:100px; height:100px; box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }

3.阴影box-shadow 模糊半径和扩展半径的区别：模糊半径的值只能是正值,如果值为0，则阴影不具备模糊效果，值越大阴影的边缘就越模糊扩展半径：参数可以是正负值，值为正，整个阴影都延展扩大，为负，则缩小 X和Y轴偏移量可以设置为负数 4.为边框应用图片border-image 就是为边框应用背景图片，和background属性较相似 Border-image:url(border.png) 70 70 70 70 repeat Url图片路径中间的像素为切割图片的宽度，可以使用百分比或px，遵循顺时针的规律来分别设置，亦可以简写像素图片延伸方式：round(平铺，圆满的铺，但是图片会被压缩) repeat(重复，超出的部分被裁剪掉，而且居中开始重复) stretch(拉伸有多长拉多长)

颜色相关

1颜色之RGBA RGB是一种色彩标准，由红绿蓝的变化以及叠加来得到各种各样的颜色，RGBA是在RGB的基础上增加了控制alpha透明度的参数 Color(R,G,B,A) RGB 三个参数正整数取值范围0-255 百分数取值0.0%～100%超出范围的数值将被截至最接近的取值极限 A为透明度取值在0～1之间 background-color:rgba(100,120,60,0.5); 2渐变色彩 CSS3 Gradient分为线性渐变(linear) 和径向渐变(radial) 不同的渲染引擎实现渐变的语法不同线性渐变 Linear-Gradient(to bottom,#fff,#999) to bottom 渐变方向，等价于180deg 可以用“角度”的关键词或“英文”来表示，此参数可以省略，表示默认to bottom #fff,#999表示颜色的起始点和结束点，可以有多个色值,表示颜色的起始点和结束点

background-image:linear-Gradient(to top left,blue,green); 文字与字体

1.text-overflow与word-wrap Text-overflow用来设置是否使用一个省略标记(...)表示对象文本的溢出 Text-overflow:clip|ellipsis clip表示剪切 ellipsis表示显示省略标记但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还需要定义强制文本在一行内显示(white-space:nowrap)以及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果 text-overflow:ellipsis; overflow:hidden; white-space:nowrap; Word-wrap可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行 Word-wrap:nomal | break-word nomal表示控制连续文本换行，浏览器的默认值 break-word表示内容将在边界内换行 2，嵌入字体@font-face @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体 @font-face {font-family:字体名称; src: 字体文件在服务器上的相对或绝对路径} 这样设置之后就可以向使用普通字体一样在(font-*)中设置字体样式 @font-face{ font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");//在文件服务器上的路径 } .demo { width: 340px; padding: 30px; color: #566F89; background: #000; font-size:58px; font-family: "MOOC Font";和@font-face中的font-family同样的值 } 3.文本阴影text-shadow Text-shadow用来设置文本的阴影效果 Text-shadow:X-offset Y-offset blur color; X-offset:表示阴影的水平偏移距离，为正阴影向右偏移，为负阴影向左偏移 Y-offset表示垂直偏移距离,为正向下偏移，为负向上偏移 Blur:阴影的模糊程度，不能为负值，值越大阴影越模糊，反之阴影越清晰，如果不需要阴影，可以将阴影模糊设置为0 Color:阴影的颜色，可以使用rgba色

与背景相关的样式

1.background-orgin 设置元素背景图片的原始起始位置 Background-origin:border-box|padding-box|content-box; 参数分别表示背景图片是从边框，还是内边框(默认值),或者是内容区域开始显示如果背景不是no-repeat，这个属性无效，它会从边框开始显示 .wrap { width:220px; border:20px dashed #000; padding:20px; font-weight:bold; color:#000; background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; background-origin:content-box; position: relative; } 2.Background-clip 用来将背景图片做适当的裁剪以适应实际需要 Background-clip:border-box|padding-box|content-box|no-clip 参数分别表示从边框，或内填充，或者内容区域向外裁剪背景，no-clip表示不裁切，和参数border-box显示同样的效果 3.background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过conver和contain来对图片进行伸缩 Background-size:auto |长度值|百分比|cover|contain Auto:不改变背景图片的原始高度和宽度；长度值:成对出现，即宽和高百分比：成对 Cover:覆盖，等比缩放以填满整个容器 Contain容纳，即将背景图片等比缩放至某一边津贴容器边缘为止 4.multiple backgrounds 多重背景，也就是css2中的background的属性外加origin、clip、size组成的新的background的多次叠加，缩写时用逗号隔开的每组值

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 分解写法： background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意：用逗号隔开每组background的缩写值；如果有size值需要紧跟position并且用”/”隔开；如果有多个背景图片，而其他的属性只有一个，表明所有背景图片应用该属性的值；background-color：只能设置一个