上次在blueidea上看到一个元素圆角的实现方法，但是那个太复杂了。于是就自己写了一个函数，可以将元素自动圆角。 演示地址：http://longbill.cn/down/sample/roundcorner.htm 不要用在有 padding 值得元素上，最好是在外面套一层。详情见演示地址。 代码： function RoundCorner(obj,style) { /******** 网页元素圆角函数!! 作者: Longbill 主页: www.longbill.cn ********/ var r = []; var styles = [ {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]}, {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] }, {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"]}, {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"]} ]; //author: longbill.cn if (!style || style>styles.length) style = 1; style--; var btop = styles[style].top,bbottom = styles[style].bottom; obj = document.getElementById(obj); if (!obj) return; var HTML = obj.innerHTML; obj.innerHTML = ""; for(var istop=1;istop>=0;istop--) { var topborder = document.createElement("b"); topborder.style.display = "block"; topborder.style.height = "2px"; topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF"; for(var i=0;i<btop.length;i++) { var b = document.createElement("b"); if (obj.style.backgroundColor) b.style.backgroundColor = obj.style.backgroundColor; else if (obj.className) b.className = obj.className; b.style.display = "block"; b.style.margin = (istop)?btop[i]:bbottom[i]; b.style.height = "1px"; b.style.overflow = "hidden"; b.style.width = "auto"; topborder.appendChild(b); } obj.appendChild(topborder); if (istop) obj.innerHTML+=HTML; } }

　　推荐阅读

　　让iframe自适应高度（支持XHTML，支持FF）

先说明，这个办法只限于iframe中的子页面也是本地页面（不能引用外网页面） ======方法===== 第一步 js部分 function getSize() { var xScroll, yScroll; if (window.innerHeight && window.>>>详细阅读

本文标题：代码精简的可以实现元素圆角的js函数

地址：http://www.17bianji.com/kaifa2/JS/30263.html

 1/2    1