css圓角代碼

來源:互聯網
上載者:User
提示:您可以先修改部分代碼再運行

<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;breakcase 2: x=parseInt("-"+r);xx=-1;y=1;yy=r;breakcase 3: x=1;xx=r;y=parseInt("-"+r);yy=-1;breakcase 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*rif(rr<0){color=bg}else{color=""}if(Math.abs(rr)<r){color=bo}corner_html+="" } }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_icorner_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";breakcase "blue": bo="#0000ff";bg="#9999ff";breakcase "red": bo="#FF3333";bg="#ff9999";breakcase "green": bo="#009900";bg="#66cc33";breakcase "yellow": bo="#cc9900";bg="#ff9966";breakcase "pink": bo="#cc33cc";bg="#ff99ff";break }bc=style[2] }else{bo=style[1];bg=style[2];bc=style[3]}size=style[0]corner_img=""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_imgcorner_id.rows[1].cells[0].innerHTML=corner_imgcorner_id.rows[1].cells[2].innerHTML=corner_imgcorner_id.rows[2].cells[1].innerHTML=corner_imgcorner_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=bccorner_id.rows[0].cells[1].style.background=bgcorner_id.rows[1].cells[0].style.background=bgcorner_id.rows[1].cells[2].style.background=bgcorner_id.rows[2].cells[1].style.background=bgcorner_id.rows[0].cells[1].style.borderTop="1px solid "+bocorner_id.rows[1].cells[0].style.borderLeft="1px solid "+bocorner_id.rows[1].cells[2].style.borderRight="1px solid "+bocorner_id.rows[2].cells[1].style.borderBottom="1px solid "+bobox_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=bgbox_id.rows[1].style.background="#ffffff"box_id.rows[1].cells[0].style.border=box_style[1]+"px solid "+bo } }}</script><!---js部分結束--->使用舉例:<br><table cellpadding=0 cellspacing=0 id=corner class="[3,'blue','']"><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><br>秀一把:<br><table cellpadding=0 cellspacing=0 id=corner class="[8,'blue','#ffffff','']"><tr><td><table cellpadding=2 cellspacing=0 id=box class="[0,0]" width=300 height=200><tr><td>逍遙狼智能圓角</td></tr><tr><td valign=top><table cellpadding=0 cellspacing=0 id=corner class="[4,'blue','#ffffff']"><tr><td><table cellpadding=2 cellspacing=0 id=box class="[1,1]" width=300 height=200><tr><td>逍遙狼智能圓角</td></tr><tr><td valign=top>逍遙狼智能圓角<table cellpadding=0 cellspacing=0 id=corner class="[4,'red','#ffffff']"><tr><td><table cellpadding=2 cellspacing=0 id=box class="[0,1]" width=250 height=150><tr><td>逍遙狼智能圓角</td></tr><tr><td valign=top>逍遙狼智能圓角<table cellpadding=0 cellspacing=0 id=corner class="[3,'green','#ffffff']"><tr><td><table cellpadding=2 cellspacing=0 id=box class="[1,1]" width=250 height=150><tr><td>逍遙狼智能圓角</td></tr><tr><td valign=top>逍遙狼智能圓角<table cellpadding=0 cellspacing=0 id=corner class="[3,'red','#ffffff','#ffffff']"><tr><td><table cellpadding=2 cellspacing=0 id=box class="[0,0]" width=250 height=100><tr><td>逍遙狼智能圓角</td></tr><tr><td valign=top>逍遙狼智能圓角<br><table cellpadding=0 cellspacing=0 id=corner class="[6,'red','#ffffff','#ffffff']"><tr><td><table cellpadding=2 cellspacing=0 id=box class="[0,0]" width=250 height=100><tr><td>逍遙狼智能圓角</td></tr><tr><td valign=top>逍遙狼智能圓角</td></tr></table></td></tr></table><br></td></tr></table></td></tr></table><Br></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table><br><script>corner()</script>
提示:您可以先修改部分代碼再運行
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.