让IE也支持圆角

1.首先要下载一个压缩包,里面有一个微软的脚本文件(11KB),里面是IE利用VML矢量可标记语言作为画笔绘出圆角。

下载地址:百度网盘下载

使用方法:

.main{

border2px solid #C0C0C0;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

position:relative;

z-index:2;

behavior: url(此处为ie-css3.htc文件的绝对路径);

Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性(10px是圆角半径),可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius: 10px;”属性,也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 10px;”的属性。

需要注意以下几点:

1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为 IE浏览器找该文件是相对当前html文件路径来找的。

2、一定要有定位属性:position:relative;

3、因为在IE浏览器下这些css3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大,如2。

4、如果在IE浏览器下某些模块无法用此渲染,可以试着绝对定位相应的层,即加上“ width: 400px; height:400px;”属性。

ps:因为该方法使用脚本来实现的,实际应用过程中可能会出现很多意想不到的问题,所以在正式商业项目中还是慎用的好。

时间: 2024-10-23 03:23:59

让IE也支持圆角的相关文章

IE6不支持圆角效果的解决办法

IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ie-css3.htc(点击可直接查看) 将文件放在放在页面的根目录下,并在css文件(或者<style>标签)中,加上 body { behavior:url("...ie-css3.htc"); } 放在其他目录下也行,注意路径对即可. 其它问题可参考官网:http://fetchak.com/ie-css3/ IE6不支持圆角效果的解决办

IE系列不支持圆角等CSS3属性的解决方案

IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题,而FF.Chrome原生的浏览器支持是的优雅的圆角感觉较好,如何解决这个问题呢? 一种比较传统的方案是放弃CSS3,使用背景图,但是这种方式也会有诸多问题,对页面结构改动较大,需要对自适应大小进行控制等,成本较高. 另外一种是百度了一下,发现有个开源的插件可以解决此问题:http://css3pie.com/ 使用方法很简单,下载了之后直接引用.htc文件即可. 附: htc = HTML Comp

Android support library支持包常用控件介绍(二)

谷歌官方推出Material Design 设计理念已经有段时间了,为支持更方便的实现 Material Design设计效果,官方给出了Android support design library 支持库,让开发者更容易的实现材料设计的效果.顺便推荐官方的一个图标库:Material Icons 控件名称 NavigationView FloatingActionButton TextInputLayout Snackbar TabLayout AppBarLayout Coordinator

css3圆角介绍与应用

*以下技巧均源自于Lea Verou所著<CSS Secrets> 自适应椭圆与圆角构造 众所周知,在css上构造圆形只需要将border-radius属性值设为边长的一半即可. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-radius</title> <style&g

不使用border-radius,实现一个可复用的高度和宽度都自适应的圆角矩形

现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法. 在一个div内,包含8个div,控制这个8个div的height.margin以及border属性值,以达到圆角矩形效果,不过要注意div的顺序. html代码: <body> <div class="bor"> <div class="b1"></div> <div class="b2"><

如何实现css渐变圆角边框

最近设计师的风格发生突变,一句话概括就是,能用渐变的地方绝对不用纯色.这不,就整出了一个渐变圆角边框.这渐变好做,圆角好做,渐变圆角也没问题,可是在加个边框还是有点坑的.没办法,看看怎么实现吧 border-image 缺陷不支持圆角 首先想到的是 border-image 的实现方式,用一个渐变作为 border-image: border-image-source: linear-gradient(to right,#08fdd8,#F58549, red); 然而使用完 border-im

通过 CALayer 修改 UIImageView 的界面属性

界面属性的修改是每一个开发者必须知道的,为什么我就记不住呢, shit, 又耽误了时间,为了防止再找不到,特把一些常用的 CALayer属性记在这里,顺便分享 1.设置阴影 1 imageView.layer.shadowColor = [UIColor grayColor].CGColor; 2 imageView.layer.shadowOffset = CGSizeMake(10, 10); 3 imageView.layer.shadowOpacity = 0.5; * 第1行设置阴影的

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

web前端之html5开发中常用的开发工具

正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下: 一.HTML5全栈开发工具之Adobe Dreamweaver 首先是大名鼎鼎的Adobe Dreamweaver,Adobe Dreamweaver 软件使设计人员和开发人员能充满自信地构建基于标准的网站.由于同新的 Adobe CS Live 在线