CSS defines DIV rounded border_html/css_WEB-ITnose

用CSS样式，比js好

有的浏览器会禁止执行脚本，那样就无效了

CSS就不会

无图片实现圆角框

无图片实现圆角框

=================================================================

另外一种实现方式

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">自动圆角函数
作者

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式1

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式2

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式3

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式4

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">说明:
RoundCorner("欲圆角的元素ID"

[, 圆角样式 ]);
圆角样式:可选参数,暂时有4种

<SCRIPT></p> <p>RoundCorner("round1",1);</p> <p>RoundCorner("round2",2);</p> <p>RoundCorner("round3",3);</p> <p>RoundCorner("round4",4);</p> <p>RoundCorner("a",1);</p> <p>RoundCorner("title",1);</p> <p>function RoundCorner(obj,style)</p> <p>{    var r = [];</p> <p>    var styles = [</p> <p>    {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},</p> <p>    {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"]    },</p> <p>    {top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},</p> <p>    {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}</p> <p>    ]; //author: longbill.cn</p> <p>    if (!style || style>styles.length) style = 1;</p> <p>    style--;</p> <p>    var btop = styles[style].top,bbottom = styles[style].bottom;</p> <p>    obj = document.getElementById(obj);</p> <p>    if (!obj) return;</p> <p>    var HTML = obj.innerHTML;</p> <p>    obj.innerHTML = "";</p> <p>    for(var istop=1;istop>=0;istop--)</p> <p>    {</p> <p>        var topborder = document.createElement("b");</p> <p>        topborder.style.display = "block";</p> <p>        topborder.style.height = "2px";</p> <p>        topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";</p> <p>        for(var i=0;i<btop.length;i )</p> <p>        {</p> <p>            var b = document.createElement("b");</p> <p>            if (obj.style.backgroundColor)</p> <p>                b.style.backgroundColor = obj.style.backgroundColor;</p> <p>            else if (obj.className)</p> <p>                b.className = obj.className;</p> <p>            b.style.display = "block";</p> <p>            b.style.margin = (istop)?btop[i]:bbottom[i];</p> <p>            b.style.height = "1px";</p> <p>            b.style.overflow = "hidden";</p> <p>            b.style.width = "auto";</p> <p>            topborder.appendChild(b);</p> <p>        }</p> <p>        obj.appendChild(topborder);</p> <p>        if (istop) obj.innerHTML =HTML;</p> <p>    }</p> <p>}</p> <p></SCRIPT>

=================================================================

• Knowledge                                                           >

Use the links below to access reference materials that can help you create eye-catching Web pages.
Dynamic HTML (DHTML) Object Model Reference

< ;/body>