兼容所有浏览器的CSS3圆角

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

译 :前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持它。

那么要想在IE中实现圆角,你不得不使用一些技巧,比如使用带有背景图片的CSS类。

而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库。效果如下:

该脚本的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在页面中引入curvycorners.js:

           <<span style="color: rgb(0, 0, 0); font-weight: bold;">script type="text/javascript" src="curvycorners.js"><<span style="color: rgb(102, 204, 102);">/script>

然后定义以下样式:

           .roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
  -webkit-border-radius: 6px;
-moz-border-radius: 6px;
 
}

然后在上面的样式后面定义以下代码:

           <</span>script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}</</span>script>

        tltrblbr分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等)你可以像这样在前面的代码中定义:

           ...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

HTML代码如下:

<<span style="color: rgb(0, 0, 0); font-weight: bold;">div class="roundedCorners"> <<span style="color: rgb(102, 204, 102);">/div>

在各个浏览器中的效果

转摘:http://blog.sina.com.cn/s/blog_4c1e6a010102uwex.html

兼容所有浏览器的CSS3圆角的更多相关文章

  1. 兼容多浏览器的html圆角特效

    前言:通常情况下,我们使用css3样式中的border-radius实现圆角效果,但是这种方法IE8.0以下版本浏览器是不支持的. 但是目前使用IE8.0的用户还比较多,Windows XP系统最高支 ...

  2. 让IE浏览器支持CSS3圆角的方法

    如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得 ...

  3. 让IE浏览器支持CSS3圆角属性的方法

    绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...

  4. 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: 15 ...

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

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

  6. PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

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

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

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

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

  9. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

随机推荐

  1. hdu 1536 S-Nim_求sg值模版

    题意:给你很n堆石头,k代表你有k种拿法,然后给出没堆石头的数量,求胜负 直接套用模版 找了好久之前写的代码贴上来 #include<iostream> #include<algor ...

  2. mac 上配置sublime text3插件

    1.安装MAC 版 sublime text 3 安装插件管理器 打开Sublime,按下Control + `(Mac)或者Ctrl + `(Windows),然后粘贴上下面的代码: import ...

  3. JS框架~Angularjs

    无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵 ...

  4. 深入浅出CChart 每日一课——第十六课 实习之旅,百年老店之新锐WTL

    上节课笨笨给大家介绍了CChart在微软MFC框架下的应用,本节课的内容仍然和百年老店微软相关,只不过主角换成WTL了. 不了解WTL的同学可以先找度娘温习一下.度娘在怀,今生何求.郎君啊,你是不是闷 ...

  5. URAL 1736 Chinese Hockey 网络流+建图

    题目链接:点击打开链接 题意: 给定n个队伍的得分情况,输出随意一个可行解. n个队伍随意2个队伍 a, b 间有且仅有一场比赛. 比赛结果分4种: 1.a +3, b +0 2.a +0, b +3 ...

  6. jquery 设置asp:dropdownlist 选中项

    $("#ddlPro").find('option').each(function () { this.selected = (this.text == dlprom); });

  7. random background

    function roll(){ var bg = document.getElementById("loginbg"); var rnd = Math.floor(Math.ra ...

  8. java中使用URLClassLoader访问外部jar包的java类

    很多时候 我们写的Java程序是分模块的,有很好的扩展机制,即我们可以为我们自己的java类添加插件,来运行将来某天我们可能开发出来的类,以下称这些类为插件类. 下边是一种简单的实现方法: Class ...

  9. Android之 compileSdkVersion, minSdkVersion, and targetSdkVersion

    在一年之中,也有可能只是几个月后,你会发布你的Android应用程序.但是这中间有可能会发布新的版本的Android系统,比如:6.0+. 你肯定希望你的应用可以向前兼容,当用户升级到新的Androi ...

  10. pragma comment的使用

    该宏放置一个注释到对象文件或者可执行文件. #pragma comment( comment-type [,"commentstring"] ) comment-type是一个预定 ...