兼容所有浏览器的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>
tl, tr, bl, br分别是:左上角(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圆角的更多相关文章
- 兼容多浏览器的html圆角特效
前言:通常情况下,我们使用css3样式中的border-radius实现圆角效果,但是这种方法IE8.0以下版本浏览器是不支持的. 但是目前使用IE8.0的用户还比较多,Windows XP系统最高支 ...
- 让IE浏览器支持CSS3圆角的方法
如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得 ...
- 让IE浏览器支持CSS3圆角属性的方法
绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...
- 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 ...
- CSS3圆角圆边 支持IE6-IE8浏览器
CSS3圆角圆边样式,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角. 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CS ...
- PIE使IE浏览器支持CSS3属性(圆角、阴影、渐变)
http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...
- border-radius 样式表CSS3圆角属性
border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...
- CSS3 圆角属性 border-radius和-webkit-border-radius使用
CSS3 圆角属性 border-radius 在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果.这使得制作圆角将不再麻烦,只需对所用对象加一个 border ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
随机推荐
- java 基础知识
...是Java代码的一部分,表明可以接受任意数量的对象,例子如下: 感觉很有趣 public static double max(double... values){ double largest ...
- 关于App的一些迷思以及一些动画效果开源库的推荐
http://www.open-open.com/lib/view/open1427856817396.html
- 改变DM6467的内存划分
上次改过bbxm的http://blog.csdn.net/godofdsp/article/details/9377515,这次搞6467又遇到同样的问题了.按照bbxm的方法修改了内存划分,运行时 ...
- HDOJ 4417 - Super Mario 线段树or树状数组离线处理..
题意: 同上 题解: 抓着这题作死的搞~~是因为今天练习赛的一道题.SPOJ KQUERY.直到我用最后一种树状数组通过了HDOJ这题后..交SPOJ的才没超时..看排名...时间能排到11名了..有 ...
- 警惕:利用Dropbox链接散播的恶意软件
趋势科技近期发现好几起利用热门文档代管服务Dropbox的垃圾邮件.邮件的内嵌链接会下载UPATRE恶意软件变种.UPATRE下面载恶意软件而恶名昭彰,当中包含ZBOT恶意软件.CryptoLocke ...
- 【最大点独立集】【poj1419】【Graph Coloring】
题意: 最多能选取多少点,没有边相连. 解法: 取反图,求最大团 代码: #include<cstdio> #include<cstring> #include<iost ...
- z-index解决弹出层遮罩层覆盖子div不能显示输出的问题
// 添加以下代码来进行测试: // ajax 发生错误,就会执行$('body').ajaxError(function(e, xhr, setting, text){ // e - even ...
- SpringMVC中采用简洁的配置实现文件上传
文件上传我们一般会有两种策略,一种是通过IO流上传,还有一种是通过表单上传,其实这两种在客户端实现起来都是很简单的,在服务端处理会略有差别,个人感觉IO上传代码简单,但是也有很多硬伤,还是表单上传更合 ...
- Linux文件管理常用命令
1.目录管理 [ls.cd.pwd.mkdir.rmdir.tree] tree:list contents of directories in a tree-like format. 2.文件管理 ...
- base库中的BarrierClosure
说明说得很明白,就是等侍num_closures 为零的时候回调done_closure,代码也很简单,不加详述 #ifndef BASE_BARRIER_CLOSURE_H_ #define BAS ...