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;