QT그리고···

<style>
.rtop, .rbottom{display:block; background: #FFFFFF;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: pink;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
</style>

<table style="width:300;font-size:9pt;color:#FF00FF;">
<tr>
<td>

<div id="container" style="background: pink;">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
  그냥 바라만 보다<br><br>
  편지를 띄웠다. <br><br>
  투명한 가을 햇살속으로 <br><br>
  친구이고 싶은 한 사람에게... <br><br>
  오후 커피가 향기로우면 그 향기로움으로... <br><br>
  비가오면 그 빗소리로...<br><br>
  좋은 영화의 감동으로 눈물이 날땐 그 순수함으로... <br><br>
  꽃빛이 고와서 눈이 부실때는 그 아름다움으로... <br><br>
  친구가 되고 싶었다.
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

</td>
</tr>
</table>

<!--StartFragment--><style>
.bin {font-size:1px; font-family:verdana; line-height:1%;}
.fixed {table-layout:fixed;}
</style>

<pre class="scripts">

function top_round(w,c) {
var top_html;
top_html="<table cellpadding=0 cellspacing=0 border=0 style='width:"+w+";margin:0px;padding:0px;' class=fixed>";
top_html+="<tr style='height: 1px;'><td rowspan=4 style='width:1px;' class=bin></td><td rowspan=3 style='width:1px;' class=bin>&nbsp;</td>";
top_html+="<td rowspan=2 style='width:1px;' class=bin>&nbsp;</td><td style='width:1px;' class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td style='width:2px;' class=bin></td><td rowspan=2 style='width:1px;' class=bin>&nbsp;</td><td rowspan=3 style='width:1px;' class=bin>&nbsp;</td>";
top_html+="<td rowspan=4 style='width:1px;' class=bin>&nbsp;</td></tr><tr style='height:1px;'><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td></tr>";
top_html+="<tr style='height: 1px;'><td bgcolor="+c+" class=bin>&nbsp;</td><td colspan=3 bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td bgcolor="+c+" class=bin>&nbsp;</td></tr><tr style='height:2px;'><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td colspan=5 bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td></tr></table>";
document.write(top_html);
}

function bottom_round(w,c) {
var bottom_html;
bottom_html="<table cellpadding=0 cellspacing=0 border=0 style='width:"+w+";margin:0px;padding:0px;' class=fixed>";
bottom_html+="<tr style='height: 2px;'><td rowspan=4 width=1 class=bin>&nbsp;</td><td width=1 bgcolor="+c+" class=bin>&nbsp;</td><td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td width=2 bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=4 style='width:1px;' class=bin>&nbsp;</td></tr>";
bottom_html+="<tr style='height: 1px;'><td rowspan=3 class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td colspan=3 bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=3 class=bin>&nbsp;</td></tr><tr style='height:1px;'><td rowspan=2 class=bin>&nbsp;</td>";
bottom_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=2 class=bin>&nbsp;</td></tr>";
bottom_html+="<tr style='height: 1px;' class=bin><td class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td class=bin>&nbsp;</td></tr></table>";
document.write(bottom_html);
}
</pre>

<pre class="scripts">top_round("60%","#FFCC66");</pre>
<table border=0 width=60% bgcolor=#FFCC66 cellpadding=0 cellspacing=0>
<tr><td>둥글 둥글 -_-</td></tr></table>
<pre class="scripts">bottom_round("60%","#FFCC66");</pre>

css + js 로 이미지 모서리를 둥글게 만들어 줍니다.
문서가 완전히 로딩된 후 실행되야 오류가 발생하지 않아요.

기본적인 사용은 아래와 같이 해주세요.
----------------------------------------------------------------------

<script type="text/javascript">
    image.rounded(id or element);
</script>

----------------------------------------------------------------------





여러 이미지에 자동으로 적용 하려면 onload 이벤트에, image.roundedAuto를 추가하신 후
img 태그 name 속성에 rounded를 적어 주시면 실행!
----------------------------------------------------------------------

<script type="text/javascript">
    window.onload= image.roundedAuto;
</script>

<img src=http://llllll.org/banner.gif name="rounded">

----------------------------------------------------------------------


익스플로러, 불여우, 오페라  잘돌아가네요~!

------------------------------  소    스  ----------------------------------------

<FONT size=1><style type="text/css"> .imageRounded div{ overflow:hidden; height:1px; } .imageRounded div.r1 { background-position:-5px 0; } .imageRounded div.r1, .imageRounded div.r9 { margin:0 5px; } .imageRounded div.r2 { background-position:-3px -1px; } .imageRounded div.r2, .imageRounded div.r8 { margin:0 3px; } .imageRounded div.r3 { background-position:-2px -2px; } .imageRounded div.r3, .imageRounded div.r7 { margin:0 2px; } .imageRounded div.r4 { background-position:-1px -3px; } .imageRounded div.r4, .imageRounded div.r6 { margin:0 1px; height:2px; } .imageRounded div.r5 { background-position:0px -5px; } </style> <pre class="scripts" type="text/javascript"> function id(str){ return (typeof(str) == "object")? str : document.getElementById(str); } function name(str){ return document.getElementsByName(str); } var image = { rounded : function(element){ var element = id(element); var r5Height = parseFloat(element.height) - 10; if(r5Height<=0) return false; var r6 = r5Height + 5; var r7 = r6 + 2 var r8 = r7 + 1; var r9 = r8 + 1; var inner = ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; inner += ""; var roundedElement = document.createElement("div"); roundedElement.className = "imageRounded"; roundedElement.style.width = element.width+"px"; roundedElement.innerHTML = inner; if(element.parentNode.style.textAlign=="center") roundedElement.style.margin = "0 auto"; element.style.display = "none"; element.parentNode.insertBefore(roundedElement, element.nextSibling); }, roundedAuto : function(){ var elements = name("rounded"); for(i=0, c=elements.length; i<c; i++){ image.rounded(elements[i]); } } } window.onload = image.roundedAuto; </pre> <img src="http://photo-media.hanmail.net/200703/22/newsis/20070322193323.653.0.jpg" name="rounded"><br /> <img src="http://photo-media.hanmail.net/200703/16/newsis/20070316165031.323.0.jpg" name="rounded"><br /> <A href="http://qurx.net/shovelers" target="_blank"><img src="http://qurx.net/sm/banner.gif" border="0"></a> <A href="http://llllll.org" target="_blank"><img src="http://llllll.org/banner.gif" border="0"></a></FONT>