JS+CSS实现无图片圆角-CSDN博客

本文链接：https://blog.csdn.net/jzgl_cadn/article/details/83453244

js+css实现兼容ie和ff的圆角效果
[img]/upload/attachment/139480/d684577d-2496-3423-aa3a-7200fcc41725.png[/img]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS+CSS实现无图片圆角</title>
<style>
body{background:black}
td{font-size:9pt}
</style>
<!---js部分开始--->
<script>
function setcorner(id,r,bo,bg)    {
switch(id){
case 1: x=parseInt("-"+r);xx=-1;y=parseInt("-"+r);yy=-1;break
case 2: x=parseInt("-"+r);xx=-1;y=1;yy=r;break
case 3: x=1;xx=r;y=parseInt("-"+r);yy=-1;break
case 4: x=1;xx=r;y=1;yy=r;break
}
corner_html="<div style=\"width:"+r+"px;height:"+r+"px;overflow:hidden\">"
for(i=x;i<=xx;i++)    {
for(ii=y;ii<=yy;ii++)    {
rr=i*i+ii*ii-r*r
if(rr<0){color=bg}else{color=""}
if(Math.abs(rr)<r){color=bo}
corner_html+="<div style=\"float:left;width:1px;height:1px;overflow:hidden;background:"+color+"\"></div>"
}
}
corner_html+="</div>"
return(corner_html)
}
function corner()
{
corner_table=document.all.tags("table")
for(box_i=0;box_i<corner_table.length;box_i++)
{
if(corner_table[box_i].id=="box")
{corner_table[box_i].id="box_"+box_i}
}
for(corner_i=0;corner_i<corner_table.length;corner_i++) {
if(corner_table[corner_i].id=="corner"){
corner_table[corner_i].id="corner_"+corner_i
corner_id=document.getElementById(corner_table[corner_i].id)
style=eval(corner_id.className)
if(style.length==3){
switch(style[1]){
case "black": bo="#666666";bg="#999999";break
case "blue": bo="#0000ff";bg="#9999ff";break
case "red": bo="#FF3333";bg="#ff9999";break
case "green": bo="#009900";bg="#66cc33";break
case "yellow": bo="#cc9900";bg="#ff9966";break
case "pink": bo="#cc33cc";bg="#ff99ff";break
}
bc=style[2]
}
else{bo=style[1];bg=style[2];bc=style[3]}
size=style[0]
corner_img="<img width=1px height=1px>"
corner_id.insertRow(0)
corner_id.insertRow(2)
corner_id.rows[0].insertCell(0)
corner_id.rows[0].insertCell(0)
corner_id.rows[0].insertCell(0)
corner_id.rows[1].insertCell(0)
corner_id.rows[1].insertCell(2)
corner_id.rows[2].insertCell(0)
corner_id.rows[2].insertCell(0)
corner_id.rows[2].insertCell(0)
corner_id.rows[0].cells[1].innerHTML=corner_img
corner_id.rows[1].cells[0].innerHTML=corner_img
corner_id.rows[1].cells[2].innerHTML=corner_img
corner_id.rows[2].cells[1].innerHTML=corner_img
corner_id.rows[0].cells[0].innerHTML=setcorner(1,size,bo,bg)
corner_id.rows[0].cells[2].innerHTML=setcorner(2,size,bo,bg)
corner_id.rows[2].cells[0].innerHTML=setcorner(3,size,bo,bg)
corner_id.rows[2].cells[2].innerHTML=setcorner(4,size,bo,bg)
corner_id.rows[1].cells[1].style.background=bc
corner_id.rows[0].cells[1].style.background=bg
corner_id.rows[1].cells[0].style.background=bg
corner_id.rows[1].cells[2].style.background=bg
corner_id.rows[2].cells[1].style.background=bg
corner_id.rows[0].cells[1].style.borderTop="1px solid "+bo
corner_id.rows[1].cells[0].style.borderLeft="1px solid "+bo
corner_id.rows[1].cells[2].style.borderRight="1px solid "+bo
corner_id.rows[2].cells[1].style.borderBottom="1px solid "+bo
box_id=eval("box_"+(corner_i+1))
box_style=eval(box_id.className)
if(box_style[0]==0){box_id.rows[0].style.display="none"}
box_id.rows[0].style.height="18px"
box_id.rows[0].style.fontWeight="bold"
box_id.rows[0].style.color="#ffffff"
box_id.rows[0].style.background=bg
box_id.rows[1].style.background="#ffffff"
box_id.rows[1].cells[0].style.border=box_style[1]+"px solid "+bo
}
}
}
</script>
<!---js部分结束--->
<head>
<body>
<table cellpadding=0 cellspacing=0 id=corner class="[4,'yellow','']">
<tr><td>
<table cellpadding=2 cellspacing=0 id=box class="[1,1]" width=250 height=100>
<tr><td>逍遥狼智能圆角</td></tr>
<tr><td valign=top>
逍遥狼智能圆角:<Br>
class="[4,'blue','#ffffff']": <Br>
依次为：[圆角半径大小，颜色样式，背景（感觉不是很必要）]<Br>
class="[1,1]"：<Br>
依次为：[是否显示内容标题，是否显示内容边框]（为配个整体效果而设定）<Br>
</td></tr>
</table>
</td></tr></table>
<script>corner()</script>
</body>
</html>