css3新增的五个属性

css3出来已经有一段时间了,由于工作中经常要考虑使用IE的用户,一直没用上css3的属性。最近时间比较充裕,故参考了一些关于css3的资料,决定亲手练练。
下面简单描述一下css3的五个属性:
这是一个未用到任何css3属性的原始设计
1-原图

1.RGBA


浏览器支持: Apple Safari 4, Firefox 3.0.5, Google Chrome 1
RGBA 可以应用到所有与颜色相关的属性中. 例如: 文字颜色, 边框颜色, 背景颜色, 阴影颜色, 等等.

前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明).
代码中留有rgb或者十六进制的颜色值是提供给其他浏览器使用.


2-透明

2.圆角


浏览器支持: Apple Safari 3, Firefox 1, Google Chrome 1
Box的四个角可以由边框半径来设置弯曲度,其定义方式和margin和padding属性类似(如: border-radius: 20px).

Mozilla 和 Webkit 对圆角属性的命名方式不同

你也可以单独地为某个角设置半径:

CSS3

Mozilla WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius

3-圆角

3.文本阴影


浏览器支持: Apple Safari 3, Firefox 3.0.5, Google Chrome 1
可以在任何文本下面添加阴影,通过控制左/右和上/下的位置偏移还有颜色:

将x设置为负数即将阴影移动到左侧. 将 y设置为负数即将阴影移动到上方
同时你还可以让文本同时有多个阴影,只需用逗号分隔:

4-文本阴影

4.box阴影


浏览器支持: Apple Safari 4, Firefox 3, Google Chrome 1
box阴影的参数格式和文本阴影相同:

同样,Mozilla和Webkit都有各自的命名方式:

同时你还可以同时添加多个阴影,只需用逗号分隔:

5-box阴影

5.多背景


浏览器支持: Apple Safari 1.3, Google Chrome 1
一个元素中包含多个背景需要在背景属性中设置多个值,用逗号分隔.你应该再加一个单独的背景来适应不支持多背景的浏览器

6-多背景

额外的奖励——旋转


浏览器支持: Apple Safari 4, Firefox 3.5, Chrome 1
此外,Webkit实现了他独特的转换属性,Mozilla也效仿起来,转换可以包含一些不同类型的值,其中一个很有用的值是旋转

7-旋转
最后我们来看看不支持css3的浏览器的表现(Opera 9)
8-opera9
查看演示
原文地址:http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today/

1 Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注