您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • CSS3圆角圆边支持IE6-IE8低版本浏览器

    CSS3圆角圆边支持IE6-IE8低版本浏览器

    CSS3圆角圆边支持IE6-IE8低版本浏览器
    20150220
    css代码

    .css3yuanjiao { border: 2px solid #C0C0C0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position:relative; padding:5px; background:#FFF; z-index:2; width:330px; height:200px; behavior: url(iecss3.htc)}

    在CSS中使用behavior引入“iecss3.htc”插件文件即可。
    jQuery吧提示
    1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为 IE浏览器找该文件是相对当前html文件路径来找的,所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

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

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

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

    5、radius属性的10px是圆角半径,还可以给两个值如“border-radius: 10px 5px;”,这样则左上角与右下角半径为10px,右上角与左下角半径为5px。也可以赋4个值,为“上 右 下 左”。
    让IE6-IE8支持CSS3圆角必备条件:
    1、behavior: url(iecss3.htc)必须直接HTML中引人;
    2、position:relative; z-index:2; 必须同时使用position和z-index两个CSS属性。
    下载地址
    预览地址

  • CSS3实现DIV圆角效果完整代码

    CSS3实现DIV圆角效果完整代码

    CSS3实现DIV圆角效果完整代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3实现DIV圆角 - CSS3教程</title> <meta name="keywords"/> <style type="text/css"> #yuanjiao{ font-family: Arial; border: 2px solid #379082; border-radius: 20px; padding: 30px 30px; width: 330px; }</style> </head> <body> <div id="yuanjiao"> 本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是: "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐,或者IE9。IE6、7、8不支持。</div> </body> </html> 

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!