您的位置： 首页 >日志>前端技术>详细内容

前端技术

CSS3新功能收集

来源：本站原创 发布时间：2011-01-26 17:37:21 浏览次数： 次 【字体：小 大】

Border-image：边框中使用图片

    另一个令人兴奋的CSS3中新的边框特性是border-image属性。有了这个特性你可以定义一个图片以取代普通边框。这个特性实际上可分为一对属性：border-image和border-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目前已经在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;

Border-radius：用CSS创建圆角边框！

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

目前已经实现这一属性的浏览器有： Webkit 和 KHTML (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 >
×

用户登录