css３新特性和新功能

作者: DecadeHeart | 来源:发表于2017-03-06 23:49 被阅读164次

总览

边框
border-color 属性
boder-image 属性
border-radius 属性
box-shadow 属性
背景
background-origin 属性和 background-clip 属性
background-size 属性
多重背景
颜色
HSL 颜色值
HSLA 颜色值
opacity 属性
RGBA 颜色值
文字效果
text-shadow 属性
text-overflow 属性
word-wrap 属性
用户界面
box-sizing 属性
resize 属性
outline 属性
nav-top、nav-right、nav-bottom、nav-left 属性
选择器
属性(attribute)选择器
基本盒模型
overflow-x 属性和 overflow-y 属性
生成的内容
content 属性
其它模块
media queries 模块
multi-column layout 模块
Web 字体模块
Speech 模块

逐个介绍

1.如何通过CSS3创建彩色的边框

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

2.在你的边框中使用图片

另一个令人兴奋的CSS3中新的边框特性是border-image属性。有了这个特性你可以定义一个图片以取代普通边框。这个特性实际上可分为一对属性：border-image和border-corner-image。这两个值可以缩写，如下：

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
border-image目前已经在Safari和Firefox 3.1 (Alpha)下工作了。语法如下：
Code:
border-image: url(border.png) 27 27 27 27 round round; 或
Code:
border-image: url(border.png) 27 27 27 27 stretch stretch;

3.创建圆角边框

Code:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
这些不同的角可以被分别控制，代码如下：
Code:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

4.Box-shadow，CSS3的最牛逼的新特性之一

CSS3背景和边框模块拥有一个非常好的新特性名叫box-shadow，它已经在Safari 3+和Firefox 3.1 (Alpha)中得以实现。其规则提及了多重阴影，但是作者已经对此提出了质疑，并且Safari 3并没有将其实现。
此属性由3个长度参数和一个颜色参数组成，其中长度参数有：

阴影的横向位移量，正值意味着阴影靠右，负值则靠左；
阴影的纵向位移量，负值意味着阴影靠上，正值则靠下；
褪色渐变半径，如果值为0则阴影会被直接切断，值越高褪色渐变的效果就越明显。例如：

Code:
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;

此阴影会被仅靠圆角边框的圆角而创建，例如：

Code:
box-shadow: -10px -10px 0px #000;
border-radius: 5px;

padding: 5px 5px 5px 15px;

5.,background-origin和background-clip

Mozilla、Safari 3和Konqueror都已经实验性实现了CSS3中的background-origin属性和background-clip属性。Opera在上一个公开版本中有一个稳定的、基于早期Opera 2.3中背景和边框规范的基础实现。

background-origin属性用来决定如何在盒模型中计算background-position的值。
此属性有三种取值：border-box、padding-box和content-box。如果你使用了padding-box，则背景的位置计算会相对于内边距区域的左上角；border-box则相对于边框的左上角；content-box则相对于其内容的左上角。基于Gecko或Webkit的浏览器使用了过时的规范版本，其取值为border、padding和content。

background-clip属性用来决定背景是否要扩展到边框里。默认值是border-box，即扩展到边框里。但如果将其赋值padding-box则不会。如果你使用content-box则背景只会在有内容的矩形区域显示(这个可选值已经在最近的规范中去掉了)。
实验性实现的代码如下：

Code:
-webkit-background-origin / -moz-background-origin
-webkit-background-clip / -moz-background-clip

稳定实现的代码如下：

Code:
background-origin
background-clip

6.Background-size

CSS3给了你一种定义背景图片尺寸的方式。你可以通过背景图片宽高的像素值或百分比进行定义。当你使用百分比进行定义时，其图片尺寸是相对于其盒模型通过background-origin定义的区域的长和宽的。
实现这一特性的浏览器有Opera 9.5、Safari 3、Firefox和Konqueror。他们分别使用-o-background-size、-webkit-background-size和-khtml-background-size、-moz-background-size属性。例如：

Code:
background-size: 200px 50px;

7.通过CSS3实现多重背景

CSS3允许同一个元素中有多个背景图片。你可以用逗号将不同的背景定义分隔开已定义多重背景。比如

Code:
background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;

8.HSL颜色值

跟使用16进制的RGB(红、绿、蓝)颜色值一样，CSS3也可以识别HSL(色相、饱和度、亮度)颜色值。
HSL颜色值有三个参数：
色相是指色盘的度数，0度或360度是红色，120度是绿色，240度是蓝色。我们可以在0度到360度之间取值以表示不同的色调。
饱和度值是一个百分数，100%表示完全饱和的颜色。
亮度值也是一个百分数，0%表示全黑，100%表示全白，50%则表示中间值。
这种颜色值为我们确定可用颜色和风格提供了一个非常广阔的空间。
现如今，HSL已经被Opera 9.5、Safari 3、Konqueror和Mozilla浏览器所实现。

例如：
Code:
<div style="background-color: hsl(0,100%, 50%);"></div>
<div style="background-color: hsl(120,100%, 50%);"></div>
<div style="background-color: hsl(240,100%, 50%);"></div>

相当于：

Code:
<div style="background-color: rgb(255,0,0);"></div>
<div style="background-color: rgb(0,255,0);"></div>
<div style="background-color: rgb(0,0,255);"></div>

9.HSLA颜色值

HSLA与HSL的关系跟RGBA与RGB的关系一样，即这里允许出现第四个参数，以表示其透明度(通过Alpha通道)。

Code:
<div style="background-color: hsla(0,100%,50%,0.2);"></div>
<div style="background-color: hsla(0,100%,50%,0.4);"></div>
<div style="background-color: hsla(0,100%,50%,0.6);"></div>
<div style="background-color: hsla(0,100%,50%,0.8);"></div>
<div style="background-color: hsla(0,100%,50%,1);"></div>

其RGBA的写法是：

Code:
<div style="background-color: rgb(243,191,189);"></div>
<div style="background-color: rgb(246,143,142);"></div>
<div style="background-color: rgb(249,95,94);"></div>
<div style="background-color: rgb(252,47,47);"></div>
<div style="background-color: rgb(255,0,0);"></div>

10.Opacity

Code:
<div style="background: #ff0000; opacity: 0.2;"></div>
<div style="background: #ff0000; opacity: 0.4;"></div>
<div style="background: #ff0000; opacity: 0.6;"></div>
<div style="background: #ff0000; opacity: 0.8;"></div>
<div style="background: #ff0000; opacity: 1;"></div>

11.RGBA颜色值

CSS3已经添加了一个颜色赋值的新特性。即RGB之后你现在也可以使用RGBA。这个"A"指的就是你猜测的alpha(透明度)。这个新特性允许我们定义颜色的透明度。它让网页工程师的日子变得轻松许多。
如今，这个特性已经在Safari 3和Firefox 3 pre-alpha中得以实现。
例子：

Code:
<div style="background: rgba(255, 0, 0, 0.2);"></div>
<div style="background: rgba(255, 0, 0, 0.4);"></div>
<div style="background: rgba(255, 0, 0, 0.6);"></div>
<div style="background: rgba(255, 0, 0, 0.8);"></div>
<div style="background: rgba(255, 0, 0, 1);"></div>

12.Text-shadow：用CSS实现类似Photoshop的特效

当我们需要实现一个简单的阴影的时候，CSS3最终消除了我们对Photoshop的需求。text-shadow属性可以被如下方式使用：

Code:
text-shadow: 2px 2px 2px #000;

各个参数和box-shadow的参数表意一致。
目前Webkit、Opera 9.5、Firefox 3.1 (pre-Alpha)、Konqueror、iCab已经实现这一特性。
注：这个特性并不是CSS3的新特性，而是CSS2提出的。Safari从第1个版本就有这个特性了。

13.Text-overflow

有的时候文本不得不被切割。比如当其溢出元素的矩形区域的时候。一旦这样的现象出现，你就需要一个视觉上的暗示，告诉用户文本被截断了。这时我们引入了text-overflow-props。最普遍的方式就是通过省略号来表示文本溢出，如规则中所说，“当前的字符表现可能有所不同”。Opera通过-o-text-overflow支持了这一特性。
支持这些特性现在变得很棘手。Webkit只支持text-overflow的简写方式，且这些特性只是部分实现。text-overflow: ellipsis-word; 和 text-overflow: inherit; 并没有工作。搞笑的是Internet Explorer从IE6开始支持了这一特性。具体参照：http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/textoverflow.asp

Code:
text-overflow: ellipsis;
text-overflow: clip;
text-overflow: ellipsis-word;

14.Word-wrap

Word-wrap属性已经被微软发明并加入了CSS3中。它允许长单词在必要的情况下被截断换行。

Code:
word-wrap: normal;
word-wrap: break-word

15.Box-sizing：盒模型为简单应用做了扩展

一直不完全理解盒模型？CSS3提供了一个叫做box-sizing的新的属性，这个属性让我们改变浏览器在计算元素宽度方面的特性。默认情况下，box-sizing的值是content-box。在这种情况下，计算宽高时会遵照CSS2.1的相关规则，再加入边框和内边距的宽高。如果把值设置为border-box，则你可以强制浏览器不按照规范中的宽高进行渲染，而是把边框和内边距直接算在盒模型内。
Firefox已经实现了这一特性，属性名为-moz-box-sizing。Safari使用-webkit-box-sizing属性名，Opera直接使用box-sizing属性名。

16.CSS3中的resize属性

总是希望元素可以由我们随意调整大小？使用过很多乱七八糟的技巧？CSS3在用户界面这部分提供了解决方案：resize属性。它允许你定义盒模型是否可以调整大小。Webkit最新的深夜版本实现这一特性。

Code:
div.resize { width: 100px; height: 100px; border: 1px solid; resize: both; overflow: auto; }

其中resize: both表示其宽度和高度都可以调整。同时还有resize: horizontal;和 resize: vertical;允许只调整宽度或只调整高度。还可以搭配max-width/min-width/max-height/min-height等属性限制其调整的范围。

16.Outline

Outlines已经在CSS3中得到了扩展，它包含了outline-offset属性。这个属性允许设置渲染轮廓线时向外位移的量。比如：

Code:
outline: 2px solid blue;
outline-offset: 12px;

17.CSS3结点属性(Attribute)选择器

6.3.2 属性选择器的部分值匹配
我们提供了三个属性选择器用以部分匹配其属性值
[att^=val]代表att属性值包含“val”前缀的元素
[att$=val]代表att属性值包含“val”后缀的元素
[att*=val]代表att属性值包含“val”的元素
属性值必须是标示符或字符串。属性名在选择其中是否大小写敏感取决于文档语言。

18.Media Queries

CSS2增加了media="screen"的支持，通过这种方式我们定义了显示数据用的样式表。CSS3增加了一个这方面的新的特性，即media queries。
基本上，这意味着你可以基于不同的宽高的视图区域改变样式表。在更广泛的领域中，这代表着规范中提到的：“通过使用Media Queries，其表现可以针对不同规格的输出设备表现出不同的内容。”
下面是有关min-width和max-width的两个测试，当前只在Safari 3、Opera和Firefox 3.1 (Alpha)中可用。无论如何这是未来的Web开发，它使得我们可以很轻松的同时在移动或传统设备中生成各自的页面。

Code:
@media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0; } } @media screen and (max-width: 2000px) { #media-queries-2 { background-color: #0f0; } }

19.Multi-column layout

W3C提供了把文本按照报纸一样按列排版的方式。Multi-column layout自成一个模块。它允许Web开发者通过两种方式把文字填到栏目中：定义每列的宽度或定义列数。第一种方式可以由column-width属性完成，第二种方式则由column-count完成。为了在栏目之间创建空白，你需要定义另一个属性column-gap的宽度。
Multi-column layout当前只有基于Mozilla的浏览器以及Safari 3支持，他们通过各自的前缀-moz-和-webkit-加以实现。下面的代码用到了column-width：

Code:
-moz-column-width: 13em;
-moz-column-gap: 1em;

-webkit-column-width: 13em;
-webkit-column-gap: 1em;

还有一个例子是用到了column-count：

Code:
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;

-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

有一个已经不再被支持的特性是column-space-destribution，曾经用以描述如何划分列间距。

20.通过@font-face定义Web字体

说@font-face是CSS3的新特性并不准确，CSS2就已经第一次支持了这一特性，并且Internet Explorer早在第5个版本的时候就已经支持它了。尽管如此，他们的实现方式是通过专有的eot(Embeded Open Type)字体格式，没有别的浏览器决定使用这个格式。随着Safari 3.1的发布，网站的发布者可以在网页中使用任意持有证书的ttf(TrueType)字体文件或orf(OpenType)字体文件。
为了使用Web字体，每个字体表格必须使用@font-face规则。

Code:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

然后调用该字体：

Code:
h3 { font-family: Delicious, sans-serif; }

21.CSS3 Speech

CSS2添加了听觉媒体类型的支持。这项支持用来定义在听觉设备中合成语音的“样式”。本规则添加了几个这种新媒体类型的属性。
目前的CSS2.1草案提出了media="speech"的特性，但是没有明确定义可以应用的属性。所以听觉媒体类型没有被认可。
CSS3的Speech模块移除了一些老的属性，添加了新的属性。这些都分配在speech媒体类型中。
Opera是实现最多CSS3 Speech属性的最流行的浏览器。

Code:
voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; }
voice-balance { -xv-voice-balance: left; }
speech-cue { cue-after: url(ding.wav); }
voice-rate { -xv-voice-rate: x-slow; }
voice-family { voice-family: female; }
voice-pitch { -xv-voice-pitch: x-low; }
speech-speak { speak: spell-out; }