`

实现div圆角的几种方式(有附件)

    博客分类:
  • css
阅读更多

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

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics