不用圆角图片制作的圆角效果

阳光穿透心脏的1/2处 2021-11-02 16:01 360阅读 0赞

<style>  
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>  
<table cellpadding=2 cellspacing=0>  
<tr><td>  
<table id=corner class=black 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>逍遥狼无图片智能圆角</b>  
</td></tr>  
<tr corner\_style="display:"><td id=txt>  
特点：<br>  
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>  
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>  
3：兼容性好。<Br>  
</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><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>逍遥狼无图片智能圆角</b>  
</td></tr>  
<tr corner\_style="display:"><td id=txt>  
特点：<br>  
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>  
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>  
3：兼容性好。<Br>  
</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><tr><td>  
<table id=corner class=red 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>逍遥狼无图片智能圆角</b>  
</td></tr>  
<tr corner\_style="display:"><td id=txt>  
特点：<br>  
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>  
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>  
3：兼容性好。<Br>  
</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><tr><td>  
<table id=corner class=green 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>逍遥狼无图片智能圆角</b>  
</td></tr>  
<tr corner\_style="display:"><td id=txt>  
特点：<br>  
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>  
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>  
3：兼容性好。<Br>  
</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><tr><td>  
<table id=corner class=yellow 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>逍遥狼无图片智能圆角</b>  
</td></tr>  
<tr corner\_style="display:"><td id=txt>  
特点：<br>  
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>  
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>  
3：兼容性好。<Br>  
</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><tr><td>  
<table id=corner class=pink 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>逍遥狼无图片智能圆角</b>  
</td></tr>  
<tr corner\_style="display:"><td id=txt>  
特点：<br>  
1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式"定义即可；<Br>  
2：重复圆角不需要重复设置，只需要在需要圆角的地方用"id=corner"定义即可；<Br>  
3：兼容性好。<Br>  
</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>  
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>

转载于:https://www.cnblogs.com/leevane/archive/2008/05/16/1200598.html

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关圆角效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

柔情只为你懂/ 2022年12月03日 12:56/ 0 赞/ 267 阅读

相关 Android圆角图片

自定义ImageView package com.interjoy.testdemo.views; import android.content.C

小咪咪/ 2022年06月14日 09:07/ 0 赞/ 246 阅读

相关 CSS圆角效果

上一篇博文中提到了css2.0的圆角效果，但是没有实现，今天闲着没事儿做了一个，想想还是css3来的痛快，用css2做一个圆角确实还是挺痛苦的，其他不说了，先截个图

淩亂°似流年/ 2022年06月13日 09:17/ 0 赞/ 235 阅读

相关 flutter圆角效果的实现

new Material( borderRadius: BorderRadius.circular(20.0), shadowColor: Co

朱雀/ 2022年05月26日 06:15/ 0 赞/ 197 阅读

相关 Css中设置图片阴影和圆角效果

Css中设置图片阴影和圆角效果 ![在这里插入图片描述][20190223222259775.png] ![在这里插入图片描述][20190223222306536.p

ゞ浴缸里的玫瑰/ 2022年03月17日 11:01/ 0 赞/ 448 阅读

相关 android制作圆角图片和图片倒影

我只是把代码下了，忘了在呢看到了，对不住作者了主要包含了放大缩小圆角图片和倒影 Java代码 ![收藏代码][icon_star.pn

缺乏、安全感/ 2022年01月15日 04:15/ 0 赞/ 272 阅读

相关 CSS制作圆角边框

转自： [http://blog.onlygrape.com/css-arc/362][http_blog.onlygrape.com_css-arc_362] 一直做圆角的

亦凉/ 2022年01月07日 12:13/ 0 赞/ 354 阅读

相关不用圆角图片制作的圆角效果

<style> td\{font-size:9pt;word-break: break-all\} \corner\{font-size:1px\} \tit\{h

阳光穿透心脏的1/2处/ 2021年11月02日 16:01/ 0 赞/ 361 阅读

相关 Android之glide加载图片圆角效果

1 问题 Android加载图片需要圆角化，有什么简单粗暴的方法吗？当然有，用我们的神器glide 2 解决办法 1）简单办

绝地灬酷狼/ 2021年09月24日 11:54/ 0 赞/ 584 阅读

相关 Flutter 图片圆角功能

代码如下： return Center( child: Container( width: 250,

逃离我推掉我的手/ 2021年06月11日 15:14/ 0 赞/ 481 阅读