CSS3新特性详解(一)：CSS3选择器、边框、背景使用细节及案例演示
CSS3 是 最新的CSS标准，这套新标准提供了更加丰富且实用的规范，如：盒子模型、背景和边框、文字特效、过度、动画等等。在 Web 和小程序开发中采用 CSS3 将会显著的美化我们的应用程序，提升用户体验。从本篇起将陆续讲解CSS3的常用新特性，力求提供更多案例、特效，一来对CSS3做个总结，二来便于今后工作查阅。
1、CSS3实用选择器
| 序号 | 选择器 | 例子 | 例子描述 |
|---|---|---|---|
| 1 | element1~element2 | p~ul | 选择前面有 p 元素的每个 ul 元素 |
| 2 | [attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个 a 元素 |
| 3 | [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 “.pdf” 结尾的所有 a 元素 |
| 4 | [attribute*=value] | a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个 a 元素 |
| 5 | :first-of-type | p:first-of-type | 选择属于其父元素的首个 p 元素的每个 p 元素 |
| 6 | :last-of-type | p:last-of-type | 选择属于其父元素的最后 p 元素的每个 p 元素 |
| 7 | :only-of-type | p:only-of-type | 选择属于其父元素唯一的 p 元素的每个 p 元素 |
| 8 | :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 p 元素 |
| 9 | :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 p 元素 |
| 10 | :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数 |
| 11 | :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 p 元素的每个 p 元素 |
| 12 | :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数 |
| 13 | :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 p 元素 |
| 14 | :empty | p:empty | 选择没有子元素的每个 p 元素（包括文本节点） |
| 15 | :enabled | input:enabled | 选择每个启用的 input 元素 |
| 16 | :disabled | input:disabled | 选择每个禁用的 input 元素 |
| 17 | :checked | input:checked | 选择每个被选中的 input 元素 |
| 18 | :not(selector) | :not(p ) | 选择非 p 元素的每个元素 |
| 19 | ::selection | ::selection | 选择被用户选取的元素部分 |
关于CSS3选择器更详细介绍，比如：nth-last-of-type和nth-last-child的区别，属性选择器的更多应用，nth-of-type(n)元素各种定位情况，请参考：css attribute属性匹配、nth-child元素位置索引匹配等复杂选择器使用总结
2、边框
使用CSS3可以实现圆角边框，边框阴影效果，我们看下css3跟边框相关的2个常用属性：
1）border-radius， 圆角设置
语法： border-radius: 1-4 length|% / 1-4 length|%;
解释： 按顺序设置每个 radius 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
border-radius:20px; 同 border-radius:20px 20px 20px 20px;
border-radius:20px 10px; 同 border-radius:20px 10px 20px 10px;
border-radius:20px 10px 8px; 同 border-radius:20px 10px 8px 10px;
案例：
- 案例1: border-radius:20px; 同下述css
border-top-left-radius:2em; /*上左*/
border-top-right-radius:2em; /*上右*/
border-bottom-right-radius:2em; /*下左*/
border-bottom-left-radius:2em;
上左，上右，下右，下左都是2em; 2em的感念是以2em为半径画个圆，与矩形区域进行正切得到的1/4圆即为圆角，上左即为上左1/4圆。
- 案例2: border-radius: 2em 1em 4em / 0.5em 3em;同下述css
border-top-left-radius: 2em 0.5em; /*上左 水平半径2em 垂直半径.5em */
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
border-radius: 值1 ，水平半径、垂直半径都为值1
border-radius: 值1 ／ 值2，值1为水平半径，值2为垂直半径
2）box-shadow，边框阴影
语法： box-shadow: h-shadow v-shadow blur spread color inset;
解释： box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。
- h-shadow 必需。水平阴影的位置。允许负值。
- v-shadow 必需。垂直阴影的位置。允许负值。
- blur 可选。模糊距离。
- spread 可选。阴影的尺寸, 正值扩大阴影，负值缩小阴影。
- color 可选。阴影的颜色.
- inset 可选。将外部阴影 (outset) 改为内部阴影。
案例：
- 案例1：box-shadow:5px 5px black;
- 案例2：box-shadow:20px 20px 5px black; 带模糊阴影
- 案例3：box-shadow:20px 20px 5px 5px black; 带模糊阴影，阴影尺寸增加5px
- 案例4：box-shadow:10px 10px 5px 10px pink inset; 内阴影，可实现立体按钮效果
- 案例5：box-shadow: 3px 3px red, -1em 0 0.4em olive; 2个阴影
3、背景
CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制，具体属性如下：
- background-size：背景图片缩放
- background-origin：背景图片定位区域
- background-clip：规定背景的绘制区域
1）background-size：背景图片缩放
语法： background-size: length|percentage|cover|contain;
解释： 规定背景图像的尺寸，缩放、拉伸等，具体参数说明如下。
- length：设置背景图像的高度和宽度，第一个值表示宽度，第二个值表示高度，如果只有1个值，第二个值为auto
- percentage：以父元素的百分比来设置背景图像的宽度和高度，第一个值宽度，第二个值高度，如果只有1个值，第二个值为auto
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
- 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
案例，容器宽120px 高80px，背景图原图大小为400*270：
- background-size:120px 80px; // 背景图缩放到宽120px，高80px
- background-size:100px; // 背景图缩放到宽100px，高自适应67.5：270*100/400
- background-size:50%; // 背景图缩放到宽60px=120 * 0.5，高40.5：270*60/400
- background-size:cover; // 图片完全填满最合适尺寸, 宽度|高度有可能发生裁剪，
假设图片宽度取120，则高度 = 120/400 * 270 = 81 >= 80，可以完全填满
假设图片高度取80，则宽度 = 80/270 * 400 = 118.5 < 120，不能完全填满
所以本例，填充图片的宽度120，高度81，高度被裁剪了1px
- background-size:contain; // 图片不发生裁剪的情况下，尽可能填满的最合适尺寸，宽度或高度有可能填充不满
假设图片宽度取120，则高度 = 120/400 * 270 = 81 >= 80，高度发生裁剪
假设图片高度取80，则宽度 = 80/270 * 400 = 118.5 < 120，不会发生裁剪
所以本例，填充图片的宽度118.5，高度80，高度完全填满，宽度右侧留白1.5px
2）background-origin：背景图片填充位置
语法： background-origin: padding-box|border-box|content-box;
解释： background-origin 属性规定 background-position 属性相对于什么位置来定位，具体有3个位置：
- padding-box 背景图像相对于内边距框来定位
- border-box 背景图像相对于边框盒来定位
- content-box 背景图像相对于内容框来定位
案例： - background-origin:padding-box; //背景从边框内边距开始打
- background-origin:border-box; //背景从边框开始打，注意边框颜色有可能盖住背景图
- background-origin:content-box; //背景从内容区域开始打
3）background-clip：限定背景色的绘制区域
语法： background-clip: border-box|padding-box|content-box;
解释： background-clip 属性规定背景色绘制区域，类似background-origin，具体参数同background-origin。
案例：
- background-clip:padding-box; // 边框内边距开始填充
- background-clip:border-box; //背景从边框开始填充，注意边框颜色有可能盖住背景色
- background-clip:content-box; //背景色从内容区域开始填充
