最好是div+css,把div搞个背景图(圆形的),
如:url(http://www.8kmm.com/images/allbgs.png) no-repeat scroll 0 -26px transparent
那一个就是圆角的。
如果css控制div圆角, 要考虑很多浏览器兼容问题的。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta http-equiv="Content-Language" content="zh-CN" /> 7 <style> 8 .cpanel div.icon span{-moz-transition-duration: 0.8s;background-color: #FFFFFF;background-position: -30px 50%;border: 1px solid #CCCCCC;border-radius: 60px;color: #565656;display: block;float: left;height: 100px;width: 100px;text-align:center;text-indent:0;} 9 .cpanel div.icon span:hover{border:1px solid blue;} 10 </style> 11 </head> 12 <body> 13 <div class="cpanel"> 14 <div class="icon"> 15 <span>abc</span> 16 </div> 17 </div> 18 </body> 19 </html>
你这是正方形???
@blog_doudou: 自己试试不就知道了,我晕
@饥饿定义我: 试过了,真的是正方形。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var can = document.getElementById("can");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外圈
ctx.stroke(); //使用ctx.fill();就是填充色;
})
</script>
</head>
<body>
<canvas id="can" width="150" height="150"></canvas>
</body>
</html>
这是用html5 实现的,比较简单