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,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...
我们都知道IE6,7并不支持CSS3的属性,IE8也不能很好的支持CSS3。但是有一个小脚本能够做到,它可以让IE支持 CSS3,包括:border-radius (rounded), box-shadow ( shadow), text-shadow等……
•圆角 border-radius •盒阴影 box-shadow •边界图片 border-image 1.圆角 border-radius XML/HTML Code复制内容到剪贴板 <div>border-radius 属性允许您为元素添加圆角边框! div { width: 200...
让IE 6,7,8支持CSS3的部分属性。它可以让低版本IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。
在css3中,直接在图片上使用box-shadow 和 border-radius,浏览器并不能很好的渲染。但是如果把图片作为background-image,添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 ...
border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。 语法: 复制代码代码如下:border-...
CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加...在 CSS3 中 border-radius 属性被用于创建圆角: 这是圆角边框! 实例 在div中添加圆角元素: div { border:2px solid; border-radius:25px; } CSS3
border-radius(圆角边框) opacity(不透明度) box-sizing(控制盒模型的组成模式):指定两个boxes接壤 resize(元素缩放):指定一个div元素,允许用户调整大小 outline(外边框) background-origin(指定背景图片从...
复制代码代码如下:.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-...
一、边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset);...border-radius 圆角 border-radius: 1-4 length|% / 1-4 length|%; //第一个参数:水平半径 第二个参数:
border-radius 圆角 box-shadow 块阴影 border-image 图片边框 multiple background images 多背景 linear-gradient as background image 线性渐变背景图片 CSS3 Pie是一个/PIE-2.0beta1/PIE.htc文件
当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时,CSS圆角,一个很初级的知识,将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是,当这种方法出现在桌面浏览器上...
本文主要介绍了css效果之边框内圆角,分享给大家,也给自己留个笔记,具体如下: 效果如下 你可能想到的方法 padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px; 如果采用上面的方式,会产生一个与...
查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,box-shadow 和 text-shadow 创建。在 Firefox,Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容 CSS3 的浏览器,也可以...
box-shadow: 2px 2px 5px #bbb; float: left; clear: both; 2、外边距自动适应(窗口大小自动适应,这个配置后看着非常舒服): 样式:margin: auto; 3、内边距,内容与边框的距离 padding: 20px; ...
什么是CSS# CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或“级联样式表”,简称样式表...您将学到以下边框属性:border-radius、box-shadow、border-image。 一、圆角边框border-radius# 在 CSS3 中,bor
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实现大小相同、颜色深浅不一的粒子旋转加载动画的相关代码,运用CSS3的border-radius圆角属性、box-shadow阴影属性等属性制作出来的,感兴趣的小伙伴们可以参考一下