您的位置:首页> 日志> 前端技术 正文
DTOP

CSS3新功能收集

RockSoar | 2011年08月19日 |

>>收藏本文 已有 0条评论

Border-image:边框中使用图片

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

Code:
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
目前已经在SafariFirefox 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;

Border-radius
:用CSS创建圆角边框!

    W3C已经在CSS3中提供了一些新的选项,border-radius是其中之一,Mozilla/FirefoxSafari 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

 
被众人喻为最牛X的功能的Box-shadow
 
CSS3背景和边框模块拥有一个非常好的新特性名叫box-shadow,它已经在Safari 3+Firefox 3.1 (Alpha)中得以实现。其规则提及了多重阴影,但是作者已经对此提出了质疑,并且Safari 3并没有将其实现。


此属性由3个长度参数和一个颜色参数组成,其中长度参数有:
1. 阴影的横向位移量,正值意味着阴影靠右,负值则靠左;
2. 阴影的纵向位移量,负值意味着阴影靠上,正值则靠下;
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;
 
实现多重背景
 
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;


目前已经实现这一属性的浏览器有:WebkitKHTML (Konqueror)
 
Opacity 透明度

Opacity是目前为止最广泛实现的CSS3特性。这大概也是我们最期待的特性。
例如:

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 >