`

IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

 
阅读更多

IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法

1.下载ie-css3.htc

 

2.CSS

复制代码

box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari 和 Chrome */
  border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

  behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}

复制代码

 

3.问题

一、只能同时4角圆角,不能单独设置;

二、div上可以正常使用,测试text文本框,会出现异常;

三、CSS文件要和页面在同一目录下,否则无效

四、当前元素一定要有定位属性,像是position:relative或是position:absolute属性。

五、z-index值一定要比周围元素的要高,否则……只能说抱歉了~~

 

4.支持的样式及状态说明

参见下表:

样式 生效 无效
border-radius 为元素四个角设置圆角属性
元素边框
只设置一个角落的圆角属性
box-shadow 模糊大小参数
偏移值
不支持除了黑色(#000)以外的其他颜色
text-shadow 模糊大小参数
偏移值
颜色值
IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详
 
 
标签: css3

在这时碰到了一个圆角边框的问题,以前的代码是在每个页面写一个固定结构的div,使用背景图片来实现圆角边框。代码结构大致如下:

.top_border{background:url(topborder.png);}
.left_border{background:url(leftborder.png);}
.right_border{background:url(rightborder.png);}
.bottom_border{background:url(bottomborder.png);}
复制代码
<div>
      <div class="top_border"></div>
      <div class="left_border"></div>

     <div class="content">
    ...
     </div>

      <div class="right_border"></div>
      <div class="bottom_border"></div>
<div>
复制代码

在重构时,我直接把这个结构修改为最简化的版本

<div class="content"></div>

这里就有点问题:使用boder-radius可以实现圆角边框,但是不支持IE7 、IE8。

当时我认为,我的这个规范是正确的,所以希望通过不修改HTML的代码结构来完成对IE7/IE8的兼容。

搜索了一下IE7/IE8的解决方案:http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

就以此为基础,使用js来对IE7/IE8进行兼容。主要代码逻辑如下: 

复制代码
if( typeof (document.documentElement.style["border-radius"]) == "string")//判断是否支持
{
    $.fn.extend({//实现圆角
          borderRadius : function (r)
          {
        var b = this.wrap("<div></div>").parent();
        //以下代码 主要以逻辑为主 并非真实执行代码 ,为四角 border-radius = 5的实现        

             //调整margin 及 宽度 以符合旧div的布局   
             b.css( {margin : this.css("margin") , "width ": this.clientWidth});        
             this.css({margin:"0"});                
             var borderColor = this.css("border-color");
        var background = this.css("background-color");        var borderStyle = this.css("borer-style");         //重设边框,只保留两侧边框         this.css({"border-top-width":"0","border-bottom-width":"0"});//
        //创建HTML结构,实现上下边框         var setting = { m: [1,2,3,5],bw : [1,1,2,0] };         var i = 0;         for(; i < 3; i++)         {           var t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px",               "border-left-width" : setting.bw[i] +"px","border-right-width" : setting.bw[i] +"px",               "border-color":borderColor,"background-color":background});           b.append(t);           b.prepend(t.clone(true));         }         var t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px",               "border-width" : "0",               background-color":borderColor});         b.append(t);         b.prepend(t.clone(true)); } }); $(".content").borderRadius(5);//设置圆角 $(".border1").borderRadius(5); }
复制代码

虽然运行时的HTML结构变化了,但是编码时的HTML结构没有变化,也算是一种兼容方式吧。

 

分享到:
评论

相关推荐

    CSS3属性box-shadow使用指南

    今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...

    支持IE6,7,8 版本的css3圆角

    我们都知道IE6,7并不支持CSS3的属性,IE8也不能很好的支持CSS3。但是有一个小脚本能够做到,它可以让IE支持 CSS3,包括:border-radius (rounded), box-shadow ( shadow), text-shadow等……

    CSS3圆角边框和边界图片效果实例

     •圆角 border-radius •盒阴影 box-shadow •边界图片 border-image 1.圆角 border-radius XML/HTML Code复制内容到剪贴板 &lt;div&gt;border-radius 属性允许您为元素添加圆角边框!   div { width: 200...

    PIE.htc让IE 6,7,8支持CSS3的部分属性

    让IE 6,7,8支持CSS3的部分属性。它可以让低版本IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。

    使用css3 属性如何丰富图片样式(圆角 阴影 渐变)

    在css3中,直接在图片上使用box-shadow 和 border-radius,浏览器并不能很好的渲染。但是如果把图片作为background-image,添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 ...

    css3圆角边框和边框阴影示例

    border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。 语法: 复制代码代码如下:border-...

    CSS3 边框

    CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加...在 CSS3 中 border-radius 属性被用于创建圆角: 这是圆角边框! 实例 在div中添加圆角元素: div { border:2px solid; border-radius:25px; }   CSS3

    CSS和CSS3思维导图(xmind版)

    border-radius(圆角边框) opacity(不透明度)  box-sizing(控制盒模型的组成模式):指定两个boxes接壤 resize(元素缩放):指定一个div元素,允许用户调整大小 outline(外边框) background-origin(指定背景图片从...

    css常用代码分享(css圆角代码、渐变、密码框)

    复制代码代码如下:.rad{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}.rad-bl{ -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; border-bottom-left-...

    css3 边框、背景、文本效果的实现代码

    一、边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset);...border-radius 圆角 border-radius: 1-4 length|% / 1-4 length|%; //第一个参数:水平半径 第二个参数:

    PIE-2.0beta1解决ie8以下兼容性插件

    border-radius 圆角 box-shadow 块阴影 border-image 图片边框 multiple background images 多背景 linear-gradient as background image 线性渐变背景图片 CSS3 Pie是一个/PIE-2.0beta1/PIE.htc文件

    前端必须要掌握的几个CSS3的属性详解

    当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时,CSS圆角,一个很初级的知识,将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是,当这种方法出现在桌面浏览器上...

    css效果之边框内圆角

    本文主要介绍了css效果之边框内圆角,分享给大家,也给自己留个笔记,具体如下: 效果如下 你可能想到的方法 padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px; 如果采用上面的方式,会产生一个与...

    CSS3 网页下拉菜单代码解释 中文翻译

    查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,box-shadow 和 text-shadow 创建。在 Firefox,Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容 CSS3 的浏览器,也可以...

    common.css

    box-shadow: 2px 2px 5px #bbb;  float: left; clear: both; 2、外边距自动适应(窗口大小自动适应,这个配置后看着非常舒服): 样式:margin: auto; 3、内边距,内容与边框的距离 padding: 20px; ...

    CSS3 边框效果

    什么是CSS# CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或“级联样式表”,简称样式表...您将学到以下边框属性:border-radius、box-shadow、border-image。 一、圆角边框border-radius# 在 CSS3 中,bor

    css 设置overflow:scroll 滚动条的样式

    css 设置overflow:scroll 滚动条的样式 /* 定义滚动条样式 */ ::-webkit-scrollbar { ... box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); border-radius: 10px; background-color: rgba(240, 240,

    CSS实现大小相同、颜色深浅不一的粒子旋转加载动画

    主要介绍了CSS实现大小相同、颜色深浅不一的粒子旋转加载动画的相关代码,运用CSS3的border-radius圆角属性、box-shadow阴影属性等属性制作出来的,感兴趣的小伙伴们可以参考一下

Global site tag (gtag.js) - Google Analytics