思洋互动网站建设学前班

box-shadow 属性可以对HTML元素添加阴影 而不用额外的标签或背景图片。类似text-shadow 属性，它增强设计的细节；而且因为它不影响内容的可读性，随意他可以是增加那种额外感觉/效果的一种很好的方法。

10to1 为它的导航北京和hover状态使用了box-shadow 属性.

10to1 为其导航区域增加的一个简单的阴影并将该属性应用于导航链接的hover效果:

1. #navigation {  
2.     -webkit-box-shadow: 0 0 10px #000;  
3.     -moz-box-shadow: 0 0 10px #000;  
4.     }  
5.     #navigation li a:hover,  
6.     #navigation li a:focus {  
7.     -webkit-box-shadow: 0 0 5px #111;  
8.     -moz-box-shadow: 0 0 5px #111;  
9.     } 

box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。在一个div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：

1. div {  
2.     -moz-box-shadow: 4px 4px 0 #f00;  
3.     -webkit-box-shadow: 4px 4px 0 #f00;  
4.     box-shadow: 4px 4px 0 #f00;  
5.     } 

浏览器支持: box-shadow目前只有Webkit核心浏览器支持，但是即将发布的Firefox 3.5 也将提供很好的支持。

11. 盒子大小

根据CSS 2.1 规范，在计算盒子的总大小的时候，元素的边框和padding应该被加入到宽度和高度之中的。但是众所周知，旧的浏览器却以它们自己的非常有“创意”的方式来解释这个规范。box-sizing属性允许你指定浏览器如何计算一个元素的宽度和高度。

WordPress 在控制面板的所有的输入框元素中使用border-box 属性。WordPress 后台区域在它的所有text类型的input标签和textarea标签上使用了该属性:

1. input[type="text"],  
2.     textarea {  
3.     -moz-box-sizing: border-box;  
4.     -webkit-box-sizing: border-box;  
5.     -ms-box-sizing: border-box;  
6.     box-sizing: border-box;  
7.     } 

第三个属性(-ms-box-sizing) 只有在Internet Explorer 8下有效。通过其他选择器，WordPress 的样式表同样添加了Konqueror 属性： -khtml-box-sizing。

box-sizing 属性可以两个值中的一个：border-box 和content-box。 Content-box如CSS2.1中的定义的那样渲染宽度。Border-box 从设定的宽度和高度中扣除padding和边框(如老式浏览器那样。)。

浏览器支持：box-sizing 被IE8、Opera、Gecko核心和Webkit核心浏览器支持。

12. 媒体查询

媒体查询（media queries）可以让你为不同的设备基于它们的能力定义不同的样式。比如，在可视区域小于480像素的时候，你可能想让网站的侧栏显示在主内容的下边，这样它就不应该浮动并显示在右侧了：

1. #sidebar {  
2.     float: right;  
3.     display: inline; /* IE Double-Margin Bugfix */  
4.     }   
5.    
6.  
7. @media all and (max-width:480px) {  
8.     #sidebar {  
9.         float: none;  
10.         clear: both;  
11.         }  
12.     } 

你也可以指定使用虑色屏的设备：

1. a {  
2.     color: grey;  
3. }   
4. @media screen and (color) {  
5.     a {  
6.         color: red;  
7.         }  
8.     } 

潜力是无限的。这个属性是很有用的因为你你不在需要必须为不同的设备写独立的样式表了，而且你也无需使用JS来确定每个用户的浏览器的属性和功能。一个实现一个灵活的布局的更加流行的基于Javascript的方案是使用智能的流体布局，让布局对于用户的浏览器分辨率更加灵活。

浏览器支持： 媒体查询被基于webkit核心的浏览器和Opera支持。Firefox将在3.5版本中支持它。IE目前不支持这些属性而且在将来的版本中，也没有支持的计划。   13. 语音

CSS3的语音模块CSS3可以让你为屏幕阅读者指定语音样式。你可以控制语音的不同设置，比如:

◆voice-volume

使用从0到100的数字(0 即静音)、百分数或关键词(silent,x-soft,soft,medium,loud 和x-loud等)来设置音量。

◆voice-balance

控制来自哪个声道(如果用户的音箱系统支持立体声)。

◆Speak

指示屏幕阅读器阅读相关的文字、数字或标点符号。可用的关键词为none, normal, spell-out, digits, literal-punctuation, no-punctuation 和inherit.

◆Pauses and rests

在一个元素的被读完之前或之后设定暂停或停止。你可以使用时间单位(比如, “2s” 表示2 秒钟) 或关键词(none,x-weak, weak, medium, strong 和x-strong)。

◆Cues

使用声音限制特定元素并控制器音量。

◆voice-family

设定特定的声音类型和声音合成(就像font-family)。

◆voice-rate

控制阅读的速度。可以设置为百分数或关键词: x-slow, slow,medium, fast 和x-fast.

◆voice-stress

指示应该使用的任何重音(强语气)，使用不同的关键词: none, moderate,strong 和 reduced. 比如，告诉屏幕阅读器使用男声读取所有的h2 标签，用左边的喇叭，用软调按照指定的声音，可以像下面这样指定样式：

广州网站建设,网站建设,广州网页设计,广州网站设计

1. h2 {  
2.     voice-family: female;  
3.     voice-balance: left;  
4.     voice-volume: soft;  
5.     cue-after: url(sound.au);  
6.     } 

不幸的是，这个属性现在只有非常少的支持，但是显然值得关注因为我们可以在将来提高我们网站的易用性。浏览器支持: 现在，只有Opera 浏览器（Windows XP and 2000）支持语音模块的部分属性。为了使用它们，需要使用-xv- 前缀，比如-xv-voice-balance: right。   结尾

CSS3属性可以极大的提高你的工作流，让一些最耗时的CSS任务不费吹灰之力就能搞定，并且可以使用更好、更简洁和更轻的代码标签。一些属性尚未被广泛的支持，甚至是最新的浏览器，但这并不意味着我们不能用它们进行试验或者为使用先进浏览器的用户更高级的功能和CSS样式。

在这点儿上，请记住，培养我们的用户 也同样是有用和必须的：网站无需看起来在每个浏览器里都要保持一致，而且如果一个差异不（负面）影响美学和网站的可用性，它就应该是被考虑的。如果我们继续浪费大量的时间和金钱以使每个细节绝对一致(而不是采用更灵活的和未来导向的方案)， 用户将没有升级他们的浏览器的任何需要/动机，这样我们就不得不在旧的浏览器变为古董级浏览器以及强大的现代浏览器变为标准之前等待很长的时间

我们试验和使用新的CSS3属性越早，它们就被流行的浏览器支持的更早，我们也就能够更早的广泛使用它们。    

广州网站建设,网站建设,广州网页设计,广州网站设计