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有一点点的差异,原因不详

IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)的更多相关文章

  1. IE兼容css3圆角的htc解决方法

    IE兼容css教程3圆角的htc解决方法 现在css3的border-radius属性可以很方便的实现圆角功能,对网站前台人员无疑是一件喜事,但悲剧的是IE6/7/8并不支持,让我们弃新技术不用,是不 ...

  2. IE6下完美兼容css3圆角和阴影属性的htc插件PIE.htc

    1.(推荐:)css插件PIE.htc,这个才是真正完美兼容css3的圆角和阴影属性在IE6环境下使用的效果,但要注意的是:下面的代码必须写在html文件的head标签内,否则无效(不能从外部引用下面 ...

  3. CSS3 圆角属性 border-radius和-webkit-border-radius使用

    CSS3 圆角属性 border-radius 在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果.这使得制作圆角将不再麻烦,只需对所用对象加一个 border ...

  4. 兼容所有浏览器的CSS3圆角

    兼容所有浏览器的CSS3圆角      解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待. ...

  5. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  6. div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行   ...

  7. IE6/7/8如何兼容CSS3属性

    最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc.个人认为这两个文件的作用差不多,具体差异值得探讨) 下载地址:https: ...

  8. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

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

    CSS3圆角圆边样式,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角. 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CS ...

随机推荐

  1. 【转】ACE编程小结

    转自:http://blog.csdn.net/mjp_mjp/article/details/4406059 1.多线程中的ACE_Reactor::EventLoop,当在多线程(池)中调用Eve ...

  2. C++静态成员总结(转)

    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分. 一 静态数据成员: 类体中 ...

  3. Android中垃圾回收日志信息

    原因 GC_CONCURRENTfreed 178K, 41% free 3673K/6151K, external 0K/0K, paused 2ms+2msGC_EXPLICITfreed 6K, ...

  4. 建立连接ALM的xml config文件

    我就不贴所有的了,如果有谁想要所有源码和应用程序,可以密我 这里我贴下如何在第一次运行的时候自动建立一个ALMConfig的xml文件 private static void CreateALMCon ...

  5. php生成百度站点地图sitemap.xml

    <?php header("Content-type:text/html;charset=utf-8"); //php生成百度站点地图sitemap.xml //http:/ ...

  6. 【LeetCode】223 - Rectangle Area

    Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...

  7. 渗透测试实例Windows XP SP2

    一.msf> use exploit/windows/dcerpc/ms03_026_dcom.看到命令提示符的改变表明该命令已经运行成功. 二.为漏洞利用代码设置必要的参数,show opti ...

  8. [转] Web 前端优化最佳实践之 Mobile(iPhone) 篇

    原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优 ...

  9. 解读Cardinality Estimation<基数估计>算法(第一部分:基本概念)

    基数计数(cardinality counting)是实际应用中一种常见的计算场景,在数据分析.网络监控及数据库优化等领域都有相关需求.精确的基数计数算法由于种种原因,在面对大数据场景时往往力不从心, ...

  10. 算法导论-动态规划(最长公共子序列问题LCS)-C++实现

    首先定义一个给定序列的子序列,就是将给定序列中零个或多个元素去掉之后得到的结果,其形式化定义如下:给定一个序列X = <x1,x2 ,..., xm>,另一个序列Z =<z1,z2  ...