CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem

曾经终败给现在 2023-02-27 13:38 7阅读 0赞

## 1、CSS 盒模型 ##

##### 元素尺寸 #####

CSS 盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小，样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>auto、长度值或百分比</td> 
   <td>设置元素的宽度</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>auto、长度值或百分比</td> 
   <td>设置元素的高度</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>min-width</td> 
   <td>auto、长度值或百分比</td> 
   <td>设置元素最小宽度</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>min-height</td> 
   <td>auto、长度值或百分比</td> 
   <td>设置元素最小高度</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>max-width</td> 
   <td>auto、长度值或百分比</td> 
   <td>设置元素最大宽度</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>max-height</td> 
   <td>auto、长度值或百分比</td> 
   <td>设置元素最大高度</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

// 设置元素尺寸
    div {
    	width: 200px;
    	height: 200px;
    }

解释：设置元素的固定尺寸。

// 限制元素尺寸
    div {
    	min-width: 100px;
    	min-height: 100px;
    	max-width: 300px;
    	max-height: 300px;
    }

解释：这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最小的值。

// auto 自适应
    div {
    	width: auto;
    	height: auto;
    }

解释：auto 是默认值，width 在 auto 下是 100%的值，height 在 auto 下是自适应。

// 百分比方式
    #a {
    	background: silver;
    	width: 200px;
    	height: 200px;
    }
    #b {
    	background: gray;
    	width: 80%;
    	height: 80%;
    }
    <div id="a">
    <div id="b">我是 html5</div>
    </div>

解释：百分比就是相对于父元素长度来衡定的。

##### 元素内边距 #####

CSS 盒模型中可以设置元素内部边缘填充空白的大小，我们称为内边距。样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>padding-top</td> 
   <td>长度值或百分比</td> 
   <td>设置顶部内边距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>padding-bottom</td> 
   <td>长度值或百分比</td> 
   <td>设置底部内边距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>padding-left</td> 
   <td>长度值或百分比</td> 
   <td>设置左边内边距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>padding-right</td> 
   <td>长度值或百分比</td> 
   <td>设置右边内边距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>padding</td> 
   <td>1 ~ 4 个长度值或百分比</td> 
   <td>简写属性</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

// 设置四个内边距
    div {
    	padding-top: 10px;
    	padding-bottom: 10px;
    	padding-left: 10px;
    	padding-right: 10px;
    }
    // 简写形式，分别为上 10px、右 10px、下 10px、左 10px
    div {
    	padding: 10px 10px 10px 10px;
    }
    // 简写形式，分别为上 10px，左右 50px，下 200px
    div {
    	padding: 10px 50px 200px;
    }
    // 简写形式，分别是上下 10px，左右 20px
    div {
    	padding: 10px 20px;
    }
    // 简写形式：上下左右均 10px
    div {
    	padding: 10px;
    }

##### 元素外边距 #####

CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们称为外边距。样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>margin-top</td> 
   <td>长度值或百分比</td> 
   <td>设置顶部外边距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>margin-bottom</td> 
   <td>长度值或百分比</td> 
   <td>设置底部外边距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>margin-left</td> 
   <td>长度值或百分比</td> 
   <td>设置左边外边距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>margin-right</td> 
   <td>长度值或百分比</td> 
   <td>设置右边外边距</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>margin</td> 
   <td>1 ~ 4 长度值或百分比</td> 
   <td>简写属性</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

// 设置四个外边距
    div {
    	margin-top: 10px;
    	margin-bottom: 10px;
    	margin-left: 10px;
    	margin-right: 10px;
    }
    // 简写形式，分别为上 10px、右 10px、下 10px、左 10px
    div {
    	margin: 10px 10px 10px 10px;
    }
    // 简写形式，分别为上 10px，左右 50px，下 200px
    div {
    	margin: 10px 50px 200px;
    }
    // 简写形式，分别是上下 10px，左边 20px
    div {
    	margin: 10px 20px;
    }
    // 简写形式：上下左右均 10px
    div {
    	margin: 10px;
    }

##### 处理溢出 #####

当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过 overflow 系列样式来控制它。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>overflow-x</td> 
   <td>溢出值</td> 
   <td>设置水平方向的溢出</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>overflow-y</td> 
   <td>溢出值</td> 
   <td>设置垂直方向的溢出</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>overflow</td> 
   <td>溢出值</td> 
   <td>简写属性</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

溢出处理主要有四种处理值：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>auto</td> 
   <td>浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否则就不显示滚动条</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>如果有溢出的内容，直接剪掉</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式不同</td> 
  </tr> 
  <tr> 
   <td>visible</td> 
   <td>默认值，不管是否溢出，都显示内容</td> 
  </tr> 
 </tbody> 
</table>

// 设置溢出为 auto 值
    div {
    	overflow-x: auto;
    }

##### 元素可见性 #####

使用 visibility 属性可以实现元素的可见性，这种样式一般可以配合JavaScript来实现效果。样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>visibility</td> 
   <td>visible</td> 
   <td>默认值，元素在页面上可见</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>hidden</td> 
   <td>元素不可见，但会占据空间</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>collapse</td> 
   <td>元素不可见，隐藏表格的行与列，如果不是表格，则和 hidden 一样</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

// 设置元素隐藏，但占位
    div {
    	visibility: hidden;
    }
    // 隐藏表格的行或列，但不占位，Chrome 和 Opera 不支持
    table tr:first-child {
    	visibility: collapse;
    };

##### 元素盒类型 #####

CSS 盒模型中的 display 属性，可以更改元素本身盒类型。那么元素有哪些盒类型呢？主要有：1. 块级元素（区块）；2. 行内元素（内联）；3. 行内-块级元素（内联块）；4. 隐藏元素。

1.  块级元素  
    所谓块级元素，就是能够设置元素尺寸、隔离其他元素功能的元素。比如：`<div>、<p>` 等文档元素。
2.  行内元素  
    所谓行内元素，不能够设置元素尺寸，它只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。比如：`<span>、<b>`等文本元素。
3.  行内-块元素  
    所谓行内-块元素，可以设置元素尺寸，但无法隔离其他元素的元素。比如`<img>`。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>display</td> 
   <td>block</td> 
   <td>盒子为块级元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>inline</td> 
   <td>盒子为行内元素</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>inline-block</td> 
   <td>盒子为行内-块元素</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>none</td> 
   <td>盒子不可见，不占位</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

// 将行内元素转成块级元素
    span {
    	background: silver;
    	width: 200px;
    	height: 200px;
    	display: block;
    }
    // 将块级元素转换成行内元素
    div {
    	background: silver;
    	width: 200px;
    	height: 200px;
    	display: inline;
    }
    // 将块级元素转化成行内-块元素
    div {
    	background: silver;
    	width: 200px;
    	height: 200px;
    	display: inline-block;
    }
    // 将元素隐藏且不占位
    div {
    	display: none;
    }

##### 元素的浮动 #####

CSS 盒模型有一种叫浮动盒，就是通过 float 属性建立盒子的浮动方向，样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>float</td> 
   <td>left</td> 
   <td>浮动元素靠左</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>right</td> 
   <td>浮动元素靠右</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>none</td> 
   <td>禁用浮动</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

// 实现联排效果
    #a {
    	background: gray;
    	float: left;
    }
    #b {
    	background: maroon;
    	float: left;
    }
    #c {
    	background: navy;
    	float: left;
    }
    // 实现元素右浮动
    #c {
    	background: navy;
    	float: right;
    }
    // 取消元素的浮动
    #c {
    	background: navy;
    	float: none;
    }

刚才的浮动有一个问题：当一个元素盒子被浮动后，下面的元素会自动堆叠处理，导致元素不可见或部分不可见。我们可以使用 clear 属性来处理。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clear</td> 
   <td>none</td> 
   <td>允许两边均可浮动</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>left</td> 
   <td>左边界不得浮动</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>right</td> 
   <td>右边界不得浮动</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>both</td> 
   <td>两边都不得浮动</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

// 两边均不可浮动
    #c {
    	background: navy;
    	clear: both;
    }

## 2、边框和背景 ##

##### 声明边框 #####

边框的声明有三个属性设置，样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-width</td> 
   <td>长度值</td> 
   <td>设置边框的宽度，可选</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>border-style</td> 
   <td>样式名称</td> 
   <td>设置边框的样式，必选</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>border-color</td> 
   <td>颜色值</td> 
   <td>设置边框的颜色，可选</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

这三个属性值，只有 border-style 是必须声明，才可以出现边框。而其他两个属性会出现默认值。

// 最简单的边框，边框长度默认 3px，边框颜色为黑色
    div {
    	border-style: solid;
    }
    // 配置完整的边框
    div {
    	border-style: solid;
    	border-width: 2px;
    	border-color: red;
    }

如果元素长和高均为 200px 时，四个边框均为 2 时，元素的长高总尺寸均为 204px。

##### 边框样式 #####

边框的样式主要有三种，分别是边框长度取值、边框的颜色和边框的线条类型。颜色是通用的颜色代码，和所有其他颜色取值一下。而长度和线条类型，边框有自己独到的部分。  
边框宽度取值表如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>长度值</td> 
   <td>CSS长度值：比如 px、em 等</td> 
  </tr> 
  <tr> 
   <td>百分数</td> 
   <td>直接设置百分数：1、2、3 等</td> 
  </tr> 
  <tr> 
   <td>thin</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>medium</td> 
   <td>使用长度名称的预设宽度，这三个值的具体意义由浏览器来定义，从小到大依次增大</td> 
  </tr> 
  <tr> 
   <td>thick</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

一般来说，边框为了更加精准，还要计算元素盒子的总尺寸，使用长度值的比较多。而定义边框线条的样式如下样式表：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>没有边框</td> 
  </tr> 
  <tr> 
   <td>dashed</td> 
   <td>破折线边框</td> 
  </tr> 
  <tr> 
   <td>dotted</td> 
   <td>圆点线边框</td> 
  </tr> 
  <tr> 
   <td>double</td> 
   <td>双线边框</td> 
  </tr> 
  <tr> 
   <td>groove</td> 
   <td>槽线边框</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td>使元素内容具有内嵌效果的边框</td> 
  </tr> 
  <tr> 
   <td>outset</td> 
   <td>使元素内容具有外凸效果的边框</td> 
  </tr> 
  <tr> 
   <td>ridge</td> 
   <td>脊线边框</td> 
  </tr> 
  <tr> 
   <td>solid</td> 
   <td>实线边框</td> 
  </tr> 
 </tbody> 
</table>

// solid 实线使用频率最高
    div {
    	border-style: solid;
    	border-width: 10px;
    	border-color: red;
    }

如果想对四条边中某一条边单独进行设置，可以使用如下样式表：

<table> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>说明</td> 
   <td>CSS版本</td> 
  </tr> 
  <tr> 
   <td>border-top-width</td> 
   <td>定义顶端</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>border-top-style</td> 
  </tr> 
  <tr> 
   <td>border-top-color</td> 
  </tr> 
  <tr> 
   <td>border-bottom-width</td> 
   <td>定义底部</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>border-bottom-style</td> 
  </tr> 
  <tr> 
   <td>border-bottom-color</td> 
  </tr> 
  <tr> 
   <td>border-left-width</td> 
   <td>定义左侧</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>border-left-style</td> 
  </tr> 
  <tr> 
   <td>border-left-color</td> 
  </tr> 
  <tr> 
   <td>border-right-width</td> 
   <td>定义右边</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>border-right-style</td> 
  </tr> 
  <tr> 
   <td>border-right-color</td> 
  </tr> 
 </tbody> 
</table>

// 只设置顶端
    div {
    	border-top-style: solid;
    	border-top-width: 10px;
    	border-top-color: red;
    }

如果四条边都一致，那么没必要分写成三句样式，直接通过简写即可：

<table> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>值</td> 
   <td>说明</td> 
   <td>CSS版本</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>&lt;宽度&gt; &lt;样式&gt; &lt;颜色&gt;</td> 
   <td>设置四条边的边框</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>border-top</td> 
   <td>只设置上边框</td> 
  </tr> 
  <tr> 
   <td>border-bottom</td> 
   <td>只设置下边框</td> 
  </tr> 
  <tr> 
   <td>border-left</td> 
   <td>只设置左边框</td> 
  </tr> 
  <tr> 
   <td>border-right</td> 
   <td>只设置右边框</td> 
  </tr> 
 </tbody> 
</table>

// 简写形式四条边设置
    div {
    	border: 10px solid red;
    }

##### 圆角边框 #####

CSS3 提供了一个非常实用的圆角边框的设置。使用 border-radius 属性，就可以达到这种效果，样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-radius</td> 
   <td>长度值或百分数</td> 
   <td>四条边角</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>border-top-left-radius</td> 
   <td>长度值或百分数</td> 
   <td>左上边角</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>border-top-right-radius</td> 
   <td>长度值或百分数</td> 
   <td>右上边角</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>border-bottom-left-radius</td> 
   <td>长度值或百分数</td> 
   <td>左下边角</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>border-bottom-right-radius</td> 
   <td>长度值或百分数</td> 
   <td>右下边角</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

// 设置圆角矩形
    div {
    	border: 10px solid red;
    	border-radius: 10px;
    }
    // 四条边分别设置
    div {
    	border: 10px solid red;
    	border-radius: 10px 20px 30px 40px;
    }

##### 设置背景 #####

盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。CSS 背景设置的样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-color</td> 
   <td>颜色</td> 
   <td>背景的颜色</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>background-image</td> 
   <td>none 或 url</td> 
   <td>背景的图片</td> 
   <td>1/3</td> 
  </tr> 
  <tr> 
   <td>background-repeat</td> 
   <td>样式名称</td> 
   <td>背景图片的样式</td> 
   <td>1/3</td> 
  </tr> 
  <tr> 
   <td>background-size</td> 
   <td>长度值或其他</td> 
   <td>背景图像的尺寸</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td>位置坐标</td> 
   <td>背景图像的位置</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>background-attachment</td> 
   <td>滚动方式</td> 
   <td>背景图片的滚动</td> 
   <td>1/3</td> 
  </tr> 
  <tr> 
   <td>background-clip</td> 
   <td>裁剪方式</td> 
   <td>背景图片的裁剪</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>background-origin</td> 
   <td>位置坐标</td> 
   <td>背景图片起始点</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>background</td> 
   <td>复合值</td> 
   <td>背景图片简写方式</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

###### background-color ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>颜色</td> 
   <td>设置背景颜色为指定色</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>transparent</td> 
   <td>设置背景颜色为透明色</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

div {
    	background-color: silver;
    }

解释：设置元素的背景颜色。属性值是颜色值。

div b {
    	background-color: transparent;
    }

解释：默认值为 transparent，为透明的意思。这样`<div>`内部的元素就会继承`<div>`的背景色。一般来说这个属性使用频率很低，原因是不需要改变色彩时就默认，需要改变色彩时又是颜色值。

body {
    	background-color: silver;
    }

解释：在`<body>`元素下可以设置整个页面的背景色。

###### background-image ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>取消背景图片的设置</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>通过 URL 设置背景图片</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

body {
    	background-image: url(loading.gif);
    }

解释：url 里面是图片的路径，设置整个页面以这个图片为背景，如果图片不足以覆盖，则复制扩展。

div {
    	background-image: none;
    }

解释：如果多个 div 批量设置了背景，而其中某一个不需要背景，可以单独设置 none值取消背景。  
在 CSS3 中，背景图片还设置了比如线性、放射性等渐变方式。

###### background-repeat ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>repeat-x</td> 
   <td>水平方向平铺图像</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>repeat-y</td> 
   <td>垂直方向平铺图像</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>repeat</td> 
   <td>水平和垂直方向同时平铺图像</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>no-repeat</td> 
   <td>禁止平铺图像</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

body {
    	background-image: url(loading.gif);
    	background-repeat: no-repeat;
    }

解释：让背景图片只显示一个，不平铺。

###### background-position ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>top</td> 
   <td>将背景图片定位到元素顶部</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>将背景图片定位到元素左部</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>将背景图片定位到元素右部</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>将背景图片定位到元素底部</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>将背景图片定位到元素中部</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>长度值</td> 
   <td>使用长度值偏移图片的位置</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>百分数</td> 
   <td>使用百分数偏移图片的位置</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

body {
    	background-image: url(loading.gif);
    	background-repeat: no-repeat;
    	background-position: top;
    }

解释：将背景图片置于页面上方，如果想置于左上方则值为：top left。

body {
    	background-image: url(loading.gif);
    	background-repeat: no-repeat;
    	background-position: 20px 20px;
    }

解释：使用长度值或百分数，第一值表示左边，第二个值表示上边。

###### background-size ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>auto</td> 
   <td>默认值，图像以本尺寸显示</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>cover</td> 
   <td>等比例缩放图像，使图像至少覆盖容器，但有可能超出容器</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>contain</td> 
   <td>等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>长度值</td> 
   <td>CSS 长度值，比如 px、em</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>百分数</td> 
   <td>比如：100%</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

body {
    	background-image: url(loading.gif);
    	background-size: cover;
    }

解释：使用 cover 相当于 100%，全屏铺面一张大图，这个值非常实用。在等比例放大缩小的过程中，可能会有背景超出。

div {
    	background-image: url(loading.gif);
    	background-size: contain;
    }

解释：使用 contain 表示，尽可能让图片完整的显示在元素内。

body {
    	background-image: url(loading.gif);
    	background-size: 240px 240px;
    }

解释：长度值的用法，分别表示长和高。

###### background-attachment ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scroll</td> 
   <td>默认值，背景固定在元素上，会随着内容一起滚动</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>背景固定在视窗上，内容滚动时背景不动</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

body {
    	background-image: url(loading.gif);
    	background-attachment: fixed;
    }

解释：fixed 属性会导致背景产生水印效果，拖动滚动条而背景不动。

###### background-origin ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>在元素盒子内部绘制背景</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>在内边距盒子内部绘制背景</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>在内容盒子内部绘制背景</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

div {
    	width: 400px;
    	height: 300px;
    	border: 10px dashed red;
    	padding: 50px;
    	background-image: url(img.png);
    	background-repeat: no-repeat;
    	background-origin: content-box;
    }

解释：设置背景起始位置。

###### background-clip ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-box</td> 
   <td>在元素盒子内部裁剪背景</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>在内边距盒子内部裁剪背景</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>在内容盒子内部裁剪背景</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

div {
    	width: 400px;
    	height: 300px;
    	border: 10px dashed red;
    	padding: 50px;
    	background-image: url(img.png);
    	background-repeat: no-repeat;
    	background-origin: border-box;
    	background-clip: padding-box;
    }

解释：在内边距盒子内部裁剪背景。

###### background ######

div {
    	width: 400px;
    	height: 300px;
    	border: 10px dashed red;
    	padding: 50px;
    	background: silver url(img.png) no-repeat scroll left top/100%
    	border-box content-box;
    }

解释：完整的简写顺序如下：

[background-color]
    [background-image]
    [background-repeat]
    [background-attachment]
    [background-position] / [ background-size]
    [background-origin]
    [background-clip];

## 3、表格和列表 ##

##### 表格样式 #####

表格有五种独有样式，样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-collapse</td> 
   <td>边框样式</td> 
   <td>相邻单元格的边框样式</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>border-spacing</td> 
   <td>长度值</td> 
   <td>相邻单元格边框的间距</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>caption-side</td> 
   <td>位置名称</td> 
   <td>表格标题的位置</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>empty-cells</td> 
   <td>显示值</td> 
   <td>空单元格是否显示边框</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>table-layout</td> 
   <td>布局样式</td> 
   <td>指定表格的布局样式</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

###### border-collapse ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>separate</td> 
   <td>默认值，单元格边框独立</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>collapse</td> 
   <td>单元格相邻边框被合并</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

table {
    	border-collapse: collapse;
    }

解释：单元格相邻的边框被合并。

###### border-spacing ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>长度值</td> 
   <td>0 表示间距，其他使用 CSS 长度值</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

table {
    	border-spacing:10px;
    }

解释：border-collapse: separate;的状态下才有效，因为要设置间距，不能合并。

###### caption-side ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>top</td> 
   <td>默认值，标题在上方</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>标题在下方</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

table {
    	caption-side: bottom;
    }

解释：设置表格标题。

###### empty-cells ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show</td> 
   <td>默认值，显示边框</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td>不显示边框</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

table {
    	empty-cells: hide;
    }

解释：单元格内容为空时隐藏边框。

###### table-layout ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>auto</td> 
   <td>默认值，内容过长时，拉伸整个单元格</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td>内容过长时，不拉伸整个单元格</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

table {
    	table-layout: fixed;
    }

解释：内容过长后，不会拉伸整个单元格。

##### 列表样式 #####

列表有四种独有样式，样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>list-style-type</td> 
   <td>类型值</td> 
   <td>列表中的标记类型</td> 
   <td>1/2</td> 
  </tr> 
  <tr> 
   <td>list-style-image</td> 
   <td>none或url</td> 
   <td>图像作为列表标记</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>list-style-position</td> 
   <td>位置值</td> 
   <td>排列的相对位置</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>list-style</td> 
   <td>简写属性</td> 
   <td>列表的简写形式</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

###### list-style-type ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>没有标记</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>disc</td> 
   <td>实心圆</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>circle</td> 
   <td>空心圆</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>square</td> 
   <td>实心方块</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>decimal</td> 
   <td>阿拉伯数字</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>lower-roman</td> 
   <td>小写罗马数字</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>upper-roman</td> 
   <td>大写罗马数字</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>lower-alpha</td> 
   <td>小写英文字母</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>upper-roman</td> 
   <td>大写英文字母</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

ul {
    	list-style-type: square;
    }

解释：列表前缀的标记类型，这里是 CSS1 版本的。CSS2 版本还包含比如日文、亚美尼亚数字、希腊文等前缀。

###### list-type-position ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>outside</td> 
   <td>默认值，标记位于内容框外部</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>inside</td> 
   <td>标记位于内容框内部</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

ul {
    	width: 120px;
    	list-style-position: inside;
    }

解释：标记位于内容框的内部。

###### list-type-image ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>不使用图像</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>通过 url 使用图像</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

ul {
    	list-style-image: url(bullet.png);
    }

解释：使用图片作为前缀的标记。

###### list-style ######

ul {
    	list-style: lower-alpha inside url(bullet.png);
    }

解释：简写形式。

##### 垂直对齐 #####

在`<table>`中`<td>`单元格，我们可以使用 text-align 属性水平对齐，但是垂直对齐就无法操作了。CSS 提供了 vertical-align 属性用于垂直对齐。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>baseline</td> 
   <td>内容对象与基线对齐</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>内容对象与顶端对齐</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>middle</td> 
   <td>内容对象与中部对齐</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>内容对象与底部对齐</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

table tr td {
    	vertical-align: bottom;
    }

解释：将单元格内的内容对象实现垂直对齐。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>sub</td> 
   <td>垂直对齐文本的下标</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>super</td> 
   <td>垂直对齐文本的上标</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

b {
    	vertical-align: super;
    }

解释：文本上下标设置。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>长度值</td> 
   <td>设置上下的偏移量，可以是负值</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>百分比</td> 
   <td>同上</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

div span {
    	vertical-align: -200px;
    }

解释：负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用正值。

## 4、颜色和透明度 ##

颜色包括字体颜色、背景颜色、边框颜色，设置字体颜色也称为文本块的前景色。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>颜色值</td> 
   <td>设置文本前景色</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

p {
    	color: red;
    }

解释：设置文本颜色。  
CSS3 提供了一个属性 opacity，可以设置元素的透明度。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>opacity</td> 
   <td>0 ~ 1</td> 
   <td>设置元素的透明度</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

p {
    	color: red;
    	opacity: 0.5;
    }

解释：设置元素的透明度。

## 5、盒子阴影和轮廓 ##

##### box-shadow #####

CSS3 提供了一个非常实用的效果样式，就是阴影效果。通过 box-shadow 属性来实现，样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>box-shadow</td> 
   <td>hoffset</td> 
   <td>阴影的水平偏移量，是一个长度值，正值表示阴影向右偏移，负值表示阴影向左偏移</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>voffset</td> 
   <td>阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子的下方，负值代表阴影位于元素盒子上方</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>blur</td> 
   <td>（可选）指定模糊值，是一个长度值，值越大盒子的边界越模糊。默认值为 0，边界清晰</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>spread</td> 
   <td>（可选）指定阴影延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>color</td> 
   <td>（可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>inset</td> 
   <td>（可选）将外部阴影设置为内部阴影</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

div {
    	width: 200px;
    	height: 200px;
    	border: 10px solid silver;
    	box-shadow: 5px 4px 10px 2px gray;
    }

解释：给元素盒子增加阴影效果。

box-shadow: 5px 4px 10px 2px gray inset;

解释：实现内部阴影。

##### outline #####

CSS3 还提供了轮廓样式，它和边框一样，只不过它可以在边框的外围再加一层。样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>outline-color</td> 
   <td>颜色</td> 
   <td>外围轮廓的颜色</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>outline-offset</td> 
   <td>长度</td> 
   <td>轮廓距离元素边框边缘的偏移量</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>outline-style</td> 
   <td>样式</td> 
   <td>轮廓样式，和 border-style 一致</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>outline-witdh</td> 
   <td>长度</td> 
   <td>轮廓宽度</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>outline</td> 
   <td>简写</td> 
   <td>&lt;颜色&gt; &lt;样式&gt; &lt;宽度&gt;</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

div {
    	width: 200px;
    	height: 200px;
    	border: 10px solid silver;
    	outline: 10px double red;
    }

解释：在边框的外围再增加一圈轮廓。

## 6、光标样式 ##

我们不但可以指定页面上的元素样式，就连光标的样式也可以指定。样式表如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>说明</th> 
   <th>CSS版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cursor</td> 
   <td>光标样式</td> 
   <td>auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,vertical-text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

div {
    	cursor: move;
    }

解释：设置当前元素的光标为移动光标。

## 7、CSS3 前缀 ##

在 CSS3 的很多新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法。各大厂商前缀列表如下：

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>厂商前缀</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Chrome、Safari</td> 
   <td>-webkit-</td> 
  </tr> 
  <tr> 
   <td>Opera</td> 
   <td>-o-</td> 
  </tr> 
  <tr> 
   <td>Firefox</td> 
   <td>-moz-</td> 
  </tr> 
  <tr> 
   <td>Internet Explorer</td> 
   <td>-ms-</td> 
  </tr> 
 </tbody> 
</table>

我们之前学习过几个 CSS3 的新属性，比如：box-shadow、border-radius、opacity等。这几个属性我们在前面的使用中，并没有添加所谓的浏览器厂商前缀。那是因为，这些属性已经在主流浏览器或版本成为了标准。具体进化步骤如下：

1.  属性尚未提出，这个属性所有浏览器不可用；
2.  属性被提出，但未列入标准，浏览器厂商通过私有前缀来支持该属性；
3.  属性被列入标准，可以使用前缀或不使用前缀来实现属性特性；
4.  属性不需要再使用前缀，所有浏览器都稳定支持。

我们就拿 border-radius 举例，它是 CSS3 的标准属性。早期的时候处于实验阶段，尚未列入标准时，需要使用厂商前缀。具体浏览器支持度如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>浏览器</th> 
   <th>带前缀版本</th> 
   <th>不带前缀版本</th> 
   <th>标准/实验</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-radius</td> 
   <td>IE</td> 
   <td>不支持</td> 
   <td>9.0+</td> 
   <td>标准</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>Firefox</td> 
   <td>3.0 需带-moz-</td> 
   <td>4.0+</td> 
   <td>标准</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>Safari</td> 
   <td>3.1 需带-webkit-</td> 
   <td>5.1+</td> 
   <td>标准</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>Chrome</td> 
   <td>4.0</td> 
   <td>5.0+</td> 
   <td>标准</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>Opera</td> 
   <td>不支持</td> 
   <td>10.5+</td> 
   <td>标准</td> 
  </tr> 
 </tbody> 
</table>

如果是手机等移动端一般采用的是 IOS 或安卓系统，那么基本上它的引擎是 webkit，直接参考-webkit-即可。  
在 CSS3 手册上，Chrome 支持 border-radius 的版本为 13.0，而部分教材和文章上写到只要 5.0。当然，这里可能表达的含义可能不同。而截至到 2015 年 4 月份最新的 Chrome 版本已经到 41.0 了，所以，不管是 5.0 还是 13.0 都是老古董了，没必要深究。Opera 支持 border-radius 版本为 11.5，而目前的版本是 28.0，也无伤大雅了。而被列入标准的 box-shadow 和 opacity 基本与 border-radius 前缀版本一致。

// 因为目前处在标准阶段，没必要写前缀了
    div {
    	border-radius: 50px;
    }
    // 实验阶段的写法
    div {
    	-webkit-border-radius: 50px;
    	-moz-border-radius: 50px;
    	border-radius: 50px;
    }

实验阶段的写法有三句，分别解释一下：-webkit-表示 Chrome 浏览器的私有属性前缀、-moz-表示 Firefox 私有属性前缀，如果是处于实验阶段的旧版本浏览器，那么不支持 border-radius，从而通过厂商前缀的方式来支持。如果是新版浏览器，已经是处于标准阶段，那么又有两种说法：1.如果新版浏览器废弃了前缀，那么前缀写法就不支持了，仅支持标准写法；2.如果新版浏览器没有废弃前缀，那么两种写法都可以，但要注意顺序，且属性值要保持一致。  
如果同时出现四个前缀+一个标准写法，四个前缀是当实验阶段时让四种引擎的浏览器厂商支持自己的私有属性，一个标准写法表示当这个属性列入标准后，使用新版浏览器运行时直接执行这个标准属性。

// 前缀写法写在标准后面，且值不一样，就会出现问题
    div {
    	border-radius: 50px;
    	-webkit-border-radius: 100px;
    }

特别注意：1. IE 的前缀-ms-，和 Opera 的前缀-o-，在 border-radius 中不存在；2. 现在的Opera浏览器也支持-webkit-前缀，-webkit-border-radius就能支持；3. Safari for Windows 已被苹果公司在 2012 年放弃，遗留版本为 5.1.7。  
最后说明：W3C 官方的立场表示实验阶段的属性仅为了测试，未来有可能修改或删除。而大量的开发者也认为在实际项目中不应该使用前缀，而使用一种优雅降级保证一定的用户体验，而通过渐进增减的方式让新版高级浏览器保证最高的效果。

## 8、长度单位 rem ##

CSS3 引入了一些新的尺寸单位，这里重点推荐一个：rem 或者称为（根 em）。目前主流的现代浏览器都很稳定的支持。它和 em、百分比不同的是，它不是与父元素挂钩，而是相对于根元素`<html>`的文本大小来计算的，这样能更好的统一整体页面的风格。

// 首先，来一段 HTML
    <h1>标题<em>小标题</em></h1>
    <p>我是一个段落，我是一段<code>代码</code></p>
    // 其次来一段 CSS
    html {
    	font-size: 62.5%;
    }
    h1 {
    	font-size: 3em;
    }
    p {
    	font-size: 1.4em;
    }

这里做几个解释，我们在之前的 Web 设计中大量使用了 px 单位进行布局。因为，早期的固定布局使用 px 较为方便，逐渐养成了这种习惯。而使用 em 单位其实更加灵活，尤其是在修改样式时，只需要修改一下挂钩元素的那个大小即可，无须每个元素一个个修改。  
但就算是 em，还是有一定问题。网页默认的字号大小为 16px，然后通过`<html>`设置62.5%，将网页基准设置为 10px。而`<h1>`设置为 3em，就是自身大小的 3 倍；`<p>`设置为1.4em，就是 10px 的 1.4 倍，即 14px。  
现在问题来了，`<code>`里面的文本想设置 11px，怎么办呢？设置 1.1em 吗？不对，因为它挂钩的父元素不是`<html>`而是`<p>`变成了 14px 的 1.1 倍了，而想设置 11px，则需要设置 0.786 倍才行。但是，这样的计算量太大了。所以，W3C 推出了直接基于根元素单位：rem。

// 直接基于<html>的单位
    code {
    	font-size: 1.1rem;
    }

<table> 
 <thead> 
  <tr> 
   <th>浏览器</th> 
   <th>rem 单位支持</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Opera</td> 
   <td>11.6+</td> 
  </tr> 
  <tr> 
   <td>Firefox</td> 
   <td>3.6+</td> 
  </tr> 
  <tr> 
   <td>Safari</td> 
   <td>5.0+</td> 
  </tr> 
  <tr> 
   <td>Chrome</td> 
   <td>6.0+</td> 
  </tr> 
  <tr> 
   <td>IE</td> 
   <td>9.0+</td> 
  </tr> 
 </tbody> 
</table>