CSS3备忘录
本文记录一些CSS3中有用的样式特性，便于个人学习。文章内容摘自《
CSS 3.0 参考手册 (中文版) 》，由
Tencent
的
ISD
Webteam
团队制作。
1. 边框
border-color : <color>
设置对象边框的颜色。
border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}
使用图片作为对象的边界。
none: 默认值。无背景图。
<image>: 使用绝对或相对 url 地址指定背景图像。
<number>: 边框宽度用固定像素值表示。
<percentage>: 边框宽度用百分比表示。
[ stretch | repeat | round ]: 拉伸 | 重复 | 平铺 (其中stretch是默认值。)
2. 背景
background-origin : border | padding | content
用来决定 background-position 计算的参考位置。
background-clip : border-box | padding-box | content-box | no-clip
用来确定背景的裁剪区域。
background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain
设置背景图片的大小。
指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。
3. 颜色
HSL <length> || <percentage> || <percentage>
<length> : Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
<percentage> : Saturation(饱和度)。 取值为0%到100%之间的值；
<percentage> : Lightness(亮度)。 取值为0%到100%之间的值；
HSLA <length> || <percentage> || <percentage>
<length> : Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
<percentage> : Saturation(饱和度)。 取值为0%到100%之间的值；
<percentage> : Lightness(亮度)。 取值为0%到100%之间的值；
<opacity> : alpha(透明度)。 取值在0到1之间；
4. 用户界面
box-sizing : content-box | border-box | inherit
改变容器的盒模型组成方式。
content-box: 此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}
border-box: 此值改变css2.1盒模型组成模式，content|border|padding {element width=content}
resize : none | both | horizontal | vertical | inherit
使元素的区域可缩放，调节元素尺寸大小。适用于任意获得"overflow"条件的容器。
none: UserAgent没提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
both: UserAgent提供双向尺寸调整机制，让用户可以调节元素的宽度和高度。
horizontal: UserAgent提供单向水平尺寸调整机制，让用户可以调节元素的宽度。
vertical: UserAgent提供单向垂直尺寸调整机制，让用户可以调节元素的高度。
inherit: 默认继承。
outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit
outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值使边框边缘的外围偏移，可起到突出元素的作用。
outline 属性可设置元素周围的轮廓线。
轮廓线不会占据空间，也不一定是矩形。
outline 属性是一个简写属性，用于设置元素周围的轮廓线。
<outline-color>: 指定轮廓边框颜色。参见outline-color
<outline-style>: 指定轮廓边框轮廓。参见outline-style
<outline-width>: 指定轮廓边框宽度。参见outline-width
<outline-offset>: 指定轮廓边框偏移位置的数值。参见outline-offset
nav-index : auto | <number> | inherit
该属性是HTML4/XHTML1中属性'tabindex'的取代品，该属性为当前元素指定了其在当前文档中导航的序列号。
auto: User Agent默认的顺序。
<number>: 该数字（必须是正整数）指定了元素的导航顺序。'1'意味着最先被导航。当若干个元素的nav-index值相同时，则按照文档的先后顺序进行导航。
inherit: 默认继承。
5. 内容
content : normal | string | attr() | uri() | counter()
content用于插入生成内容；
content属性与 :before 及 :after 伪元素配合使用，将生成内容放在一个元素内容的前面或后面。
normal: 默认值。
string: 插入文本内容。
attr(): 插入元素的属性值。
uri(): 插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）。
counter(): 计数器，用于插入排序标识。
6. 其它
@media :<sMedia> { sRules }
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.
<sMedia>: 指定设备名称。
{sRules}: 样式表定义。
columns:宽度 || 栏目数
可以同时定义多栏的数目和每栏宽度。
7. 选择器
子串匹配的属性选择符 E[att^="val"]
匹配具有att属性、且值以val开头的E元素
E[att^="val"] : {attribute}
子串匹配的属性选择符 E[att$="val"]
匹配具有att属性、且值以val结尾的E元素
E[att$="val"] : {attribute}
子串匹配的属性选择符 E[att*="val"]
匹配具有att属性、且值中含有val的E元素
E[att*="val"] : {attribute}
结构性伪类 E:empty
匹配没有任何子元素（包括text节点）的元素E
E:empty : {attribute}
UI元素状态伪类 E:checked
匹配所有用户界面（form表单）中处于选中状态的元素E
E:checked : {attribute}
UI元素状态伪类 E:enabled
匹配所有用户界面（form表单）中处于可用状态的E元素
E:enabled : {attribute}
UI元素状态伪类 E:disabled
匹配所有用户界面（form表单）中处于不可用状态的E元素
E:disabled : {attribute}
UI元素状态伪类 E::selection
匹配E元素中被用户选中或处于高亮状态的部分
E::selection : {attribute}
否定伪类 E:not(s)
匹配所有不匹配简单选择符s的元素E
E:not(s) : {attribute}
目标伪类 E:target
匹配相关URL指向的E元素
E:target : {attribute}
通用兄弟元素选择器 E ~ F
匹配E元素之后的F元素
E ~ F : {attribute}