实现div圆角的几种方式（有附件） -

liu346435400

浏览: 27935 次
性别:
来自: 长沙

最近访客更多访客>>

stjauns

精致男孩

wzawz

hizhengfu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

实现div圆角的几种方式（有附件）

博客分类：

css 圆角 vml

由于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>

iecss3.rar (225.4 KB)
下载次数: 0

分享到：