IE9下CSS3多种新功能尝鲜

开发 前端
今天我们来尝试一下CSS3的多种新功能,首先你需要安装IE9这样的新平台。希望对大家有所帮助。

无意中看到CSS3的强大功能,比较感兴趣,分享下先。。。呵呵

首先你得安装IE9,,,,

如果你没安装IE9 beata,来这里试试。。。

http://windows.microsoft.com/en-US/internet-explorer/download/ie-9/worldwide

选择语言和版本,

image

或者是FireFox3.1版本以上,Opera9.5版本以上。(我只是在IE9下面测试)。

1. border-radius属性:

很好看的形状不再需要image来实现啦。。我们看看如何让一个DIV显示为不规则。并在里面存放一些文本。使用CSS3中的border-radius属性:

  1. div    
  2.             {    
  3.                 border: solid black;    
  4.                 border-radius: 40px;    
  5.                 height: 1in;    
  6.                 width: 2in;    
  7.                 overflow: hidden;    
  8.             }  

div显示:

image

2.background-clip属性:

background=clip结合border-radius使用,可以设计出不错的形状。

Css:

image

两个div的显示:

image

3. border-x-x-radius属性

x代表top,right,left,bottom,想让哪边有圆角就可以把x设置为哪边,例如top-right就是右上角,top-left就是左上角,。。。。。,另外后面还可以添加百分比来设置圆角的显示弧度。

CSS:

image

效果:

image

4.background-clip+父子结构的div使用

CSS+Html:

image

效果:

image

5.圆角文本输入框

Css+Html:

image

效果:

image

6、CSS3使用border属性画圆画方:

image

Css+Html:

image

确实很强大,以后很多的图片都可以用CSS来取代了。。。。。。而且不需要为了一个圆角写那么多CSS和js了。

原文链接:http://www.cnblogs.com/n-pei/archive/2010/12/10/1901757.html

【编辑推荐】

  1. CSS中block级和inline级对象区别
  2. JavaScript动态创建div属性和样式
  3. DIV CSS建站对浏览器兼容性和注意事项
  4. CSS2.0中page-break-after属性用法
  5. 解读DIV CSS网页布局中CSS无效十个原因
责任编辑:彭凡 来源: 博客园
相关推荐

2011-03-23 10:23:56

IE9尝鲜体验浏览器

2010-08-05 09:08:22

IE9 Platfor

2013-03-06 10:03:25

Open WebHTML5CSS3

2010-10-15 14:22:26

IE9智能过滤

2011-03-08 11:14:35

IE7、IE8、IE

2010-09-01 13:23:52

CSS3

2011-01-04 10:25:23

IE9

2011-02-18 10:06:48

IE9

2009-12-06 09:32:39

IE9Chrome

2010-12-17 09:16:21

2010-03-24 09:12:02

IE9性能测试

2010-12-21 14:59:10

CSS 3IE

2010-03-09 09:04:00

IE9Google

2010-05-04 09:19:32

IE9微软

2010-03-15 09:45:56

IE9发布

2011-02-14 14:21:10

IE9IE8Chrome

2011-05-12 10:20:12

IE9HTML5

2010-09-26 16:32:20

2011-05-11 09:12:30

Firefox 4IE9

2010-03-19 09:21:17

IE9新特性
点赞
收藏

51CTO技术栈公众号