CSS3新特性

/*********by garcon1986******/

 

 

 

1) border边框

border-color: 边框颜色
如：
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

 

border-image:
如：
    * border-image:边框图像
          o border-top-image
          o border-right-image
          o border-bottom-image
          o border-left-image

    * border-corner-image: 边框边角图像
          o border-top-left-image
          o border-top-right-image
          o border-bottom-left-image
          o border-bottom-right-image

border-radius:给边框加圆角
如：
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
div { 
    -moz-border-radius-topright: 6px; 
    -moz-border-radius-topleft: 6px; 
    -moz-border-radius-bottomright: 6px; 
    -moz-border-radius-bottomleft: 6px; 
    -webkit-border-top-right-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    border-top-right-radius: 6px; 
    border-top-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
    border-bottom-left-radius: 6px; 
    }

box-shadow:盒子阴影
box-shadow 属性可以对HTML元素添加阴影 而不用额外的标签或背景图片。
如：
box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;
2）Background背景
background-origin
background-clip
background-size背景大小，如：
-moz-background-size（firefox）
-o-background-size（opera）
-webkit-background-size（safari）
-khtml-background-size(konqueror)
Multiple backgrounds多背景，如：
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;

3）颜色

HSL（Hue色度, Saturation饱和度, Lightness亮度）颜色：
* Hue is a degree on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades.
* Saturation is a percentage value; 100% is the full colour.
* Lightness is also a percentage; 0% is dark (black), 100% is light (white),  and 50% is the average.
如：
<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>

HSLA(Hue色度, Saturation饱和度, Lightness亮度, Alpha):添加了设置透明度
<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>

Opacity透明度：
如：
<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

RGBA（Red，Green，Blue，Alpha）
<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>

4）Text effects文字效果

text-shadow：文本阴影
如：
text-shadow: 2px 2px 2px #000;

text-overflow：文本溢出
如：
text-overflow: ellipsis;
text-overflow: clip;
text-overflow: ellipsis-word;

word-wrap:它是用来防止太长的字符串溢出的。
如：
word-wrap:normal; 不起作用，跟不适用这个属性的结果相同
word-wrap:break-word; 用于把过长的词分开

5）User Interface用户界面：

box-sizing: content-box
-moz-box-sizing
-webkit-box-sizing

Resize:重定义大小
div.resize {
    width: 100px;
    height: 100px;
    border: 1px solid;
    resize: both;
    overflow: auto;
}
resize:both;
resize:vertical;
resize:horizonal;

outline轮廓
如：
outline-offset:12px;
nav-top, nav-right, nav-bottom, nav-left

6） Selectors选择器

attribute selectors属性选择器：
* [att^="value"]
 匹配包含以特定的值开头的属性的元素
* [att$="value"]
 匹配包含以特定的值结尾的属性的元素
* [att*="value"]
 匹配包含含有特定的值的属性的元素

p[title^="ho"] {background: green;}
p[title$="t"] {background: green;}

7）media queries媒体查询

媒体查询（media queries）可以让你为不同的设备基于它们的能力定义不同的样式。

#sidebar { 
    float: right; 
    display: inline; /* IE Double-Margin Bugfix */
}
@media all and (max-width:480px) { 
    #sidebar { 
        float: none; 
        clear: both; 
        } 
}
a { 
    color: grey; 
} 
@media screen and (color){
    a { 
        color: red; 
    }  
}

8) multicolumn layout多栏布局

.index #content div { 
    -webkit-column-count : 4; 
    -webkit-column-gap : 20px; 
    -moz-column-count : 4; 
    -moz-column-gap : 20px; 
}
我们可以通过这个选择器定义三件事情：栏数(column-count)、栏宽(column-width、例子中没有用到)和各栏之间的空白/间距(column-gap)。 如果column-count未设定，浏览器会在允许的宽度内容纳尽可能多的栏目。

 

9) Web fonts @font-face

 

尽管是最被期待的CSS3 特性 (甚至它在CSS2中就已经被引入了)， @font-face在网站上仍然没有像其它CSS3属性那样被广泛采用.这主要因为字体授权和版权问题：嵌入的字体很容易从网站上下载到，这是字体厂商的主要顾虑。
@font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
}
@font-face {
    font-family: Delicious;
    font-weight: bold;
    src: url('Delicious-Bold.otf');
}

10) Speech语音

    * 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 { 
    voice-family: female; 
    voice-balance: left; 
    voice-volume: soft; 
    cue-after: url(sound.au); 
} 

 

参考：

http://www.blueidea.com/tech/web/2009/6930.asp

http://www.css3.info/preview/