兼容所有浏览器的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. 关于CMCC(中国移动)、CU(中国联通)、CT(中国电信)的一些笔记

    一.三大运营商网络 CMCC(ChinaMobileCommunicationCorporation):GSM(2G).TD-SCDMA(3G).TD-LTE(4G); CU(China Unicom ...

  2. Longtail Hedgehog(DP)

    Longtail Hedgehog time limit per test 3 seconds memory limit per test 256 megabytes input standard i ...

  3. LSH算法原理

    原始链接--http://www.jiahenglu.net/NSFC/LSH.html LSH(Location Sensitive Hash),即位置敏感哈希函数.与一般哈希函数不同的是位置敏感性 ...

  4. DSOframer 微软官方API的查阅方法

    不了解 DSOframer 的朋友,可以先参考文章 DSOframer 的简单介绍和资源整理. 大家在使用 DSOframer 时,常常会不知道在哪里查 API 文档,网上的文章都非常零散,很难找到自 ...

  5. maven01 hello maven

    安装省略,注意jdk的版本1.7: 目录:

  6. ARC、MRC混编

    Xcode5之后,新建iOS工程,默认都是ARC模式,但是有时候我们的项目中需要用到一些第三方框架,我们下载下来却发现是非ARC的,这时候我们需要进行ARC和MRC混编. 第一种方式: Edit-&g ...

  7. ajax 实现异步请求

    ajax实现异步请求: function onclicks() { $.ajax( { url:'../hhh/columnSearch.do',// 跳转到 action // data: {tab ...

  8. UNIX环境高级编程--#include "apue.h"

    apue.h头文件为作者自己编写而非系统自带,故需要自行添加! 第一:打开网站 http://www.apuebook.com/第二:选择合适的版本(一共有三个版本,根据书的版本选择)下载源码sour ...

  9. Android EditText屏蔽默认长按粘贴复制事件

    et.setCustomSelectionActionModeCallback(new ActionMode.Callback()); 添加全部的方法即可,不需要任何改动.

  10. $.Event 你不知道的用法

    最近在使用Bootstrap.js,一不小心趴开源码看了一下,尤其是看到tab.js var hideEvent = $.Event('hide.bs.tab', { relatedTarget: $ ...