码迷,mamicode.com
首页 > Web开发 > 详细

转 CSS3圆角圆边 支持IE6-IE8浏览器

时间:2015-02-08 20:40:16      阅读:409      评论:0      收藏:0      [点我收藏+]

标签:

文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao571.shtml

非常简单实用,兼容ie----不转对不起程序员

CSS3圆角圆边样式,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角。

本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE 9支持CSS 3和HTML 5的标准。让IE支持CSS 3的解析方法有很多种,下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角。

在CSS中使用CSS插件文件即可让IE6/IE7/IE8浏览器。

具体CSS代码

 

  1. .yuan { 
  2. border: 2px solid #C0C0C0; 
  3. -moz-border-radius: 10px; 
  4. -webkit-border-radius: 10px; 
  5. border-radius: 10px; 
  6. position:relative; 
  7. padding:5px; 
  8. background:#FFF; 
  9. z-index:2; 
  10. width:330px; 
  11. height:200px; 
  12. behavior: url(iecss3.htc) 
  13. }

 

CSS中使用behavior引入“iecss3.htc”插件文件即可。DIVCSS5提示注意,要让IE6-IE8支持,需要将“behavior: url(iecss3.htc)”引人CSS代码直接放到HTML文件源代码内才能生效。

让IE6-IE8支持CSS3圆角必备条件:
1、behavior: url(iecss3.htc)必须直接HTML中引人;
2、position:relative; z-index:2; 必须同时使用position和z-index两个CSS属性。

 

html应用代码:

 

 

    1. <div class="yuan"
    2. DIVCSS5圆角实例<br
    3. CSS3版本圆角实例,<br
    4. 支持低版本IE6-IE9浏览器 
    5. </div>

 

圆角效果截图

 

技术分享

 

转 CSS3圆角圆边 支持IE6-IE8浏览器

标签:

原文地址:http://www.cnblogs.com/wentian2010/p/4280366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!