《课工场中关村：css3新特性》由会员分享，可在线阅读，更多相关《课工场中关村：css3新特性（12页珍藏版）》请在金锄头文库上搜索。
1、http:/ 课工场中关村：课工场中关村：CSS3 新特性新特性简介CSS 即层叠样式表（Cascading Stylesheet） 。Web 开发中采用 CSS 技术， 可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单 的修改，就可以改变网页的外观和格式。CSS3 是 CSS 的升级版本，这套新标 准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语 言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继 支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。在 Web 开 发中采用 CSS3 技术将会显著的美
2、化我们的应用程序，提高用户体验，同时也 能极大的提高程序的性能。本文将重点介绍一些比较绚丽且实用 CSS3 新特性。CSS3 选择器（Selector）写过 CSS 的人应该对 CSS 选择器不陌生，我们所定义的 CSS 属性之所 以能应用到相应的节点上，就是因为 CSS 选择器模式。参考下述代码：清单 1. CSS 选择器案例 Body .mainTabContainer div span5 Border: 1px solod red; Background-color: white; Cursor: pointer; 此处的 CSS 选择器即：“body .mainTabContainer
3、 div span5” 代表这 这样一条路径：1. “body”标签直接子元素里 class 属性值为“mainTabContainer”的所有元素 A2. A 的后代元素（descendant）里标签为 div 的所有元素 B3. B 的直接子元素中的第 5 个标签为 span 的元素 C这个 C 元素（可能为多个）即为选择器定位到的元素，如上的 CSS 属性 也会全部应用到 C 元素上。以上为 CSS2 及之前版本所提供的主要定位方式。现在，CSS3 提供了更 多更加方便快捷的选择器：清单 2. CSS3 选择器案例 Body .mainTabContainer tbody:nth-chi
4、ld(even) Background-color: white; Body .mainTabContainer tr:nth-child(odd) Background-color: black; :not(.textinput) Font-size: 12px; http:/ Div:first-child Border-color: red; 如上所示，我们列举了一些 CSS3 的选择器，在我们日常的开发中可能会 经常用到，这些新的 CSS3 特性解决了很多我们之前需要用 JavaScript 脚本才 能解决的问题。tbody: nth-child(even)， nth-child(od
5、d)：此处他们分别代表了表格（tbody） 下面的偶数行和奇数行（tr） ，这种样式非常适用于表格，让人能非常清楚的看 到表格的行与行之间的差别，让用户易于浏览。: not(.textinput)：这里即表示所有 class 不是“textinput”的节点。div:first-child：这里表示所有 div 节点下面的第一个直接子节点。除此之外，还有很多新添加的选择器： E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-
6、type E:empty E:checked E:enabled E:disabled E:selection E:not(s) 这里不一一介绍。学会利用这些新特性可以极大程度的减少我们的无畏代 码，并且大幅度的提高程序的性能。Font-face 特性Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件， 让客户端显示客户端所没有安装的字体。先来看一个客户端字体简单的案例：清单 3. Font-face 客户端字体案例 arial courier verdana 我们可以通过这种方式直接加载字体样式，因为这些字体（arial）已经安 装在客户端了。清单 3 这种写法的作
7、用等同于清单 4：清单 4. 字体基本写法 arial courier verdana 相信这种写法大家应该再熟悉不过了。接下来我们看看如何使用服务端字体，即：未在客户端安装的字体样式。参看如下代码：清单 5. Font-face 服务端字体案例 font-face http:/ font-family: BorderWeb; src:url(BORDERW0.eot); font-face font-family: Runic; src:url(RUNICMT0.eot); .border FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: “Border
8、Web“ .event FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: “Runic“ 清单 5 中声明的两个服务端字体，其字体源指向“BORDERW0.eot”和“RUNICMT0.eot”文件，并分别冠以“BorderWeb”和“Runic”的字体名称。声明之后，我们就可以在页面中使用了：“ FONT-FAMILY: “BorderWeb“ ” 和 “ FONT-FAMILY: “Runic“ ” 。这种做法使得我们在开发中如果需要使用一些特殊字体，而又不确定客户 端是否已安装时，便可以使用这种方式。Word-wrap overflow:hidde
9、n; white-space:nowrap; width:200px;background:#ccc; .ellipsistext-overflow:ellipsis; overflow:hidden; white-space:nowrap; http:/ background:#ccc; 不显示省略标记，而是简单的裁切条当对象内文本溢出时显示省略标记如清单 7 所示，这里我们均使用“overflow: hidden” ，对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。见图 3 的效果图。图 3. Text-overflow 效果图这里我们可以看到，e
10、llipsis 的显示方式比较人性化，clip 方式比较传统， 我们可以依据需求进行选择。文字渲染（Text-decoration）CSS3 里面开始支持对文字的更深层次的渲染，我们来看看下面的例子：清单 8. Text-decoration 案例 div -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 2.75px; 这里我们主要以 webkit 内核浏览器为例，清单 8 的代码效果如图 4：图 4. Text-decoration 效果图Text-fill-
11、color: 文字内部填充颜色Text-stroke-color: 文字边界填充颜色Text-stroke-width: 文字边界宽度CSS3 的多列布局（multi-column layout）CSS3 现在已经可以做简单的布局处理了，这个 CSS3 新特性又一次的减 少了我们的 JavaScript 代码量，参考如下代码：清单 9. CSS3 多列布局 .multi_column_style -webkit-column-count: 3; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; . . http:/ we
12、bkit 内核浏览器为例：Column-count：表示布局几列。Column-rule：表示列与列之间的间隔条的样式Column-gap：表示列于列之间的间隔清单 9 的代码效果图如图 5：图 5. 多列布局效果图边框和颜色（color, border）关于颜色，CSS3 已经提供透明度的支持了：清单 10. 颜色的透明度 color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);这里的“rgba”属性中的“a”代表透明度，也就是这里的“0.75” ，同时 CSS3 还支持 HSL 颜色声明方式及其透明度：清单 11. H
13、SL 的透明度 color: hsla( 112, 72%, 33%, 0.68); 对于 border，CSS3 提供了圆角的支持：清单 12. 圆角案例 border-radius: 15px; 参见下面圆角效果：Figure xxx. Requires a headingCSS3 的渐变效果（Gradient）线性渐变左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：清单 13. 左到右的渐变 background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E); 这里 linear
14、表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色 （#FE280E）的渐变。效果图如下：图 6. 简单线性渐变效果图同理，也可以有从上到下，任何颜色间的渐变转换：图 7. 各种不同线性渐变效果图还有复杂一点的渐变，如：水平渐变，33% 处为绿色，66% 处为橙色：清单 14. 复杂线性渐变 background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),color- stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E); 这里的“color-stop”为拐点
15、，可见效果图：图 8. 复杂线性渐变效果图径向渐变接下来我们要介绍径向渐变（radial） ，这不是从一个点到一个点的渐变，http:/ 而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。来看一个例子：清单 15. 径向渐变（目标圆半径为 0） backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color- stop(0.5,red),to(blue); 前面“50,50,50”是起始圆的圆心坐标和半径， “50,50,0”蓝色是目标圆的 圆心坐标和半径， “color-stop(0.5,red)”是断点的位置和色彩。这里需要说明一 下，和放射由内至外不一样，径向渐变刚好相反，是由外到内的渐变。清单 15 标识的是两个同心圆，外圆半径为 50px，内圆半径为 0，那么就是从黑色到红 色再到蓝色的正圆形渐变。下面就是这段代码的效果：图 9. 径向渐变（目标圆半径为 0）效果图如果我们给目标源一个大于 0 半径，您会看到另外一个效果：清单 16. 径向渐变（目标圆半径非 0） backgroud: -webkit-gradient(radial,50 50,50,50 50,10,from(black)
