由于IE9以下都不支持css3,当需求中有要实现圆角时到处找。这里我为大家总结一下几种方式。
一、使用图片和css的方式,这个种方式需要图片和css的配合,
缺点:灵活性不够,圆角的弧度不能任意变换,对于不熟悉ps的来说比较麻烦;优点:各个浏览器都兼容。
图片实现这个不是我今天要讨论的对象。
二、使用vml语言,在IE5以上支持。可是总不能为了圆角去学这个吧,还好有人为我们做好了
js封装好的绘制。优点:可兼容IE ;缺点必须四个角都做成圆角
vml语言绘制的圆角:
<html xmlns:v>
<head>
<title>VML圆角圆边框</title>
<style>
v\:*{behavior: url(#default#VML);}
.corner{
padding:10px 8px 6px;
position:absolute;
left:12px;
top:35px;
width:320px;
height:135px;
}
</style>
</head>
<body>
<v:roundRect class="corner" FillColor="#eeeeee" Filled="T" >VML圆角圆边框</v:roundRect>
</body>
</html>
js绘制的vml(没有贴出js,见附件):
<style type="text/css">
.corner {
font-size:14px;
width:560px;
height:400px;
background-color: silver;
padding:10px 8px 6px;
border: 1px solid #C0C0C0;
margin-bottom:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px; /***定义圆角半径***/
behavior: url(ie-css3.htc);/***引入脚本***/
}
.shadow {
/*filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,
Direction=135, Color='#000000'); */
-moz-box-shadow: 2px 2px 4px #000;
-webkit-box-shadow: 2px 2px 4px #000;
box-shadow: 2px 2px 4px #000;
}
</style>
三、js实现,调用别人封装好的js方法实现:
<script type="text/javascript" src="curvycorners.js"></script>
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
</script>
四、纯css的圆角优点:兼容性好,灵活;缺点:不可产生阴影效果,多写html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0;margin:0;}
.container {width:400px;margin:10px auto; }
.holder2 {color:#000;}
/*无图片的圆角框*/
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#aaa; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.content {border-right:1px solid #aaa; height:200px;border-left:1px solid #aaa;}
</style>
</head>
<body>
<div class="container">
<div class="holder">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<p>CSS的圆角框</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>
</body>
</html>
分享到:
相关推荐
div实现圆角 div实现圆角 div实现圆角 div实现圆角 div实现圆角
圆角实现的三种常规方法 图片 Div 圆角实现的三种常规方法 图片 Div 圆角实现的三种常规方法 图片 Div 圆角实现的三种常规方法 图片 Div 圆角实现的三种常规方法 图片 Div
纯css实现div圆角,代码简单易懂,没有js那么麻烦,缺点是效果有点小缺憾
用div+css实现边框圆角,其实实现div圆角,有三种方法,也可以用圆角片来实现,还有一种技术,现在浏览器还不是很支持。
使用jquery实现DIV圆角效果,其中还包括多种其它的边框效果
div圆角实现 html方式非图片 [示例]
超简单实用JS实现DIV、图片圆角效果 兼容性很好
JavaScript 制作div圆角 带有实例
JS封装DIV圆角Css样式,源代码演示!
DIV+CSS IE圆角,让IE也能支持圆角
实现DIV圆角的JavaScript代码
桌面\超简单实用JS实现DIV、图片圆角效果,关键是很兼容简单,分享下。
在编写页面代码时候有时候需要div圆角显示。比如菜单栏等等,可以参考这个代码。
div圆角代码,div圆角代码,div圆角代码,div圆角代码,div圆角代码,div圆角代码
css+div圆角的实现.rarcss+div圆角的实现.rar
用css+div写的带圆角的窗口
超实用div圆角样式,无须图片 超实用div圆角样式,无须图片
div无图片圆角,方便您,同时让我获得更多的积分~~~
div+css实现圆角导航菜单的效果。