1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

IE9下CSS3多种新功能尝鲜

作者:用户 来源:互联网 时间:2016-03-03 18:45:53

圆角css3属性版本效果形状

IE9下CSS3多种新功能尝鲜 - 摘要: 本文讲的是IE9下CSS3多种新功能尝鲜, 无意中看到CSS3的强大功能,比较感兴趣,分享下先。。。呵呵 首先你得安装IE9,,,, 如果你没安装IE9 beata,来这里试试。。。 http:/

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

首先你得安装IE9,,,,

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

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

选择语言和版本,

IE9下CSS3多种新功能尝鲜-<a href=css3新功能">

或者是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显示:

IE9下CSS3多种新功能尝鲜-ie9 css3

2.background-clip属性:

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

Css:

IE9下CSS3多种新功能尝鲜-ie9支持css3吗

两个div的显示:

IE9下CSS3多种新功能尝鲜-ie9不支持css3动画

3. border-x-x-radius属性

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

CSS:

IE9下CSS3多种新功能尝鲜-css3动画兼容ie9

效果:

IE9下CSS3多种新功能尝鲜-css3新功能

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

CSS+Html:

IE9下CSS3多种新功能尝鲜-ie9 css3

效果:

IE9下CSS3多种新功能尝鲜-ie9支持css3吗

5.圆角文本输入框

Css+Html:

IE9下CSS3多种新功能尝鲜-ie9不支持css3动画

效果:

IE9下CSS3多种新功能尝鲜-css3动画兼容ie9

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

IE9下CSS3多种新功能尝鲜-css3新功能

Css+Html:

IE9下CSS3多种新功能尝鲜-ie9 css3

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

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

【编辑推荐】



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索圆角 , css3 , 属性 , 版本 , 效果 形状 css3新功能、ie9 css3、ie9支持css3吗、ie9不支持css3动画、css3动画兼容ie9,以便于您获取更多的相关知识。

ie 7-关于IE不同版本的兼容问题

... 请问怎样将IE7/IE8兼容到IE9呢? 用html5和css3做了一个网站,结果发现低版本的IE浏览器不支持css3,网站打开以后格式全部乱了,客户机大部分都是XP系统,没办法装IE9。 在网上搜了个办法,说是调用ieBetter-min.js...

IE9+已经不对document.createElement向下兼容的解决方法_javascript技巧

今天发现某网站上,IE9和chrome中页面的功能居然有差异,于是在IE9下打开console,发现一堆js报错,用fiddler跟踪了一下,原来代码里有一句是这样的: if(ie){ var iframe = document.createElement(''); } 是的,问题就出在这里:DOM Exception:...

IE10/11不支持条件性注释后的替代方法

...浏览器统称为现代浏览器,因为它们开始实现新的HTML5和CSS3统一标准。但愿望是美好的,现实却是残酷的,很多WEB开发人员在开发实践中发现,同一个CSS在IE9/10/11上显示的效果和其它浏览器渲染的效果还是不一样。也就是说,我...

c2c电子商务模式功能介绍

...、财付通、银行汇款、网银支付、paypal支付、货到付款等多种支付手段;新闻发布;广告管理;友情链接;交易邮箱提醒;交易信用评价;站内短信通知;后台分权限管理等功能;系统前端完全遵循W3C网页标准,采用XHTML+CSS开发...

裁剪图片利器svg(各种形状基本都支持)

...是乎,记得之前有看到某篇博客是讲css3是可以支持这种多种形状裁剪图片的。找了下资料,发现css3的clip-path可以实现这种多边形的图片裁剪。但是它的兼容性不是很好,如下图: Paste_Image.png 由于这个css3属性其实就是从之前的...

前三篇
后三篇