CSS+js實現的無圖片圓角_層和布局特效

CSS+JS實現的無圖片圓角，使用方法很簡單，只需一個js即可設定圓角樣式，JS本身帶有6種樣式(black/blue/red/green/yellow/pink)，只需在需要的地方用"class=樣式"定義即可；多個圓角不需要重復設置，在需要的地方用"id=corner"定義即可；而且代碼的兼容性也非常好。

<!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>CSS+js實現的無圖片圓角</title>
<meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312">
<style type="text/css">
td{font-size:9pt;word-break:break-all}
#corner{font-size:1px}
#tit{height:20px;color:white}
#txt{font-size:9pt;line-height:150%;background:white;border-width:1px;border-style:solid}
.l,.r,.tl,.tr,.bl,.br{width:3px}
.t,.b,.tl,.tr,.bl,.br{height:3px}
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0">
  <tr>
    <td>
      <table id="corner" class="blue" cellpadding="0" cellspacing="0" width="400">
        <tr>
          <td class="tl"><a id="corner" class="tl"></a></td>
          <td class="t"><a id="corner" class="t"></a></td>
          <td class="tr"><a id="corner" class="tr"></a></td>
        </tr>
        <tr>
          <td class="l"><a id="corner" class="l"></a></td>
          <td>
            <table id="box" cellpadding="3" cellspacing="0" width="100%">
              <tr id="tit">
                <td><b>mb5u.com</b></td>
              </tr>
              <tr corner_style="display:">
                <td id="txt">　　模板無憂歡迎您！我們更注重學習和交流，因些這里的每一款源程序都經過了測試，你可以放心使用，也希望您發布高質量源代碼，奉獻給大家。也希望多多支持！</td>
              </tr>
            </table>
          </td>
          <td class="r"><a id="corner" class="r"></a></td>
        </tr>
        <tr>
          <td class="bl"><a id="corner" class="bl"></a></td>
          <td class="b"><a id="corner" class="b"></a></td>
          <td class="br"><a id="corner" class="br"></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<script language="javascript">
function setcorner()
{
corner_table=document.all.tags("table")
	for(i=0;i<corner_table.length;i++)
	{
	if(corner_table[i].id=="corner")
{
	mycorner=corner_table[i].getElementsByTagName("A")
		corner_style=corner_table[i].className
		if(corner_style=="black"){bo="#666666";bg="#999999"}
		if(corner_style=="blue"){bo="#0000ff";bg="#9999ff"}
		if(corner_style=="red"){bo="#FF3333";bg="#ff9999"}
		if(corner_style=="green"){bo="#009900";bg="#66cc33"}
		if(corner_style=="yellow"){bo="#cc9900";bg="#ff9966"}
		if(corner_style=="pink"){bo="#cc33cc";bg="#ff99ff"}
	corner_box=corner_table[i].getElementsByTagName("TABLE")
	for(ii=0;ii<corner_box.length;ii++)
	{if(corner_box[ii].id=="box"){corner_box=corner_box[ii];break}}
	corner_tit=corner_box.getElementsByTagName("TR")
	for(ii=0;ii<corner_tit.length;ii++)
	{if(corner_tit[ii].id=="tit"){corner_tit=corner_tit[ii];break}}
	corner_tit.style.background=bg
                     ///
	corner_txt=corner_box.getElementsByTagName("TD")
	for(ii=0;ii<corner_txt.length;ii++)
	{if(corner_txt[ii].id=="txt"){corner_txt=corner_txt[ii];break}}
	corner_txt.style.borderColor=bo
		for(ii=0;ii<mycorner.length;ii++)
		{
		if(mycorner[ii].id=="corner")
		{
		postion=mycorner[ii]
			id=mycorner[ii].className
			if(id=="tl"){w=3,h=3}
			if(id=="tr"){w=3,h=3}
			if(id=="bl"){w=3,h=3}
			if(id=="br"){w=3,h=3}
			if(id=="t"){w=corner_box.offsetWidth,h=3}
			if(id=="b"){w=corner_box.offsetWidth,h=3}
			if(id=="l"){w=3,h=corner_box.offsetHeight}
			if(id=="r"){w=3,h=corner_box.offsetHeight}
		corner_="<td bgcolor=white></td>"
		corner_bo="<td bgcolor="+bo+"></td>"
		corner_bg="<td bgcolor="+bg+"></td>"
		corner_array=[corner_,corner_bo,corner_bg]
			if(id=="t"){col=3;row=1;html_array=[1,2,2]}//上邊
			if(id=="b"){col=3;row=1;html_array=[2,2,1]}//下邊
			if(id=="l"){col=1;row=3;html_array=[1,2,2]}//左邊
			if(id=="r"){col=1;row=3;html_array=[2,2,1]}//右邊
			if(id=="tl"){col=3;row=3;html_array=[0,0,1,0,1,2,1,2,2]}//左上角
			if(id=="tr"){col=3;row=3;html_array=[1,0,0,2,1,0,2,2,1]}//右上角
			if(id=="bl"){col=3;row=3;html_array=[1,2,2,0,1,2,0,0,1]}//左下角
			if(id=="br"){col=3;row=3;html_array=[2,2,1,2,1,0,1,0,0]}//右下角
		html="<table style=\"font-size:0\" cellpadding=0 cellspacing=0 width="+w+"px height="+h+"px><tr>"
		for(iii=0;iii<html_array.length;iii++)
		{
		html+=corner_array[html_array[iii]]
		if((iii+1)%row==0&&(iii+1)!=html_array.length){html+="</tr><tr>"}
		}
		html+="</tr></table>"
		postion.innerHTML=html
		}
		}
}
	}
}
setcorner()
</script>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-11-29

[收藏][報錯][返回列表]

相關層和布局特效：

CSS+js實現的無圖片圓角_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些