js+css实现兼容ie和ff的圆角效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS+CSS实现无图片圆角</title>
<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;break
case 2: x=parseInt("-"+r);xx=-1;y=1;yy=r;break
case 3: x=1;xx=r;y=parseInt("-"+r);yy=-1;break
case 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*r
if(rr<0){color=bg}else{color=""}
if(Math.abs(rr)<r){color=bo}
corner_html+="<div style=\"float:left;width:1px;height:1px;overflow:hidden;background:"+color+"\"></div>"
}
}
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_i
corner_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";break
case "blue": bo="#0000ff";bg="#9999ff";break
case "red": bo="#FF3333";bg="#ff9999";break
case "green": bo="#009900";bg="#66cc33";break
case "yellow": bo="#cc9900";bg="#ff9966";break
case "pink": bo="#cc33cc";bg="#ff99ff";break
}
bc=style[2]
}
else{bo=style[1];bg=style[2];bc=style[3]}
size=style[0]
corner_img="<img width=1px height=1px>"
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_img
corner_id.rows[1].cells[0].innerHTML=corner_img
corner_id.rows[1].cells[2].innerHTML=corner_img
corner_id.rows[2].cells[1].innerHTML=corner_img
corner_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=bc
corner_id.rows[0].cells[1].style.background=bg
corner_id.rows[1].cells[0].style.background=bg
corner_id.rows[1].cells[2].style.background=bg
corner_id.rows[2].cells[1].style.background=bg
corner_id.rows[0].cells[1].style.borderTop="1px solid "+bo
corner_id.rows[1].cells[0].style.borderLeft="1px solid "+bo
corner_id.rows[1].cells[2].style.borderRight="1px solid "+bo
corner_id.rows[2].cells[1].style.borderBottom="1px solid "+bo
box_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=bg
box_id.rows[1].style.background="#ffffff"
box_id.rows[1].cells[0].style.border=box_style[1]+"px solid "+bo
}
}
}
</script>
<!---js部分结束--->
<head>
<body>
<table cellpadding=0 cellspacing=0 id=corner class="[4,'yellow','']">
<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>
<script>corner()</script>
</body>
</html>
效果如图:
- 大小: 4 KB
分享到：
相关推荐
javascript+css无图片圆角效果 告别复杂的图片圆角布局，调用简单 效果漂亮，样式可灵活调整！
相信不少朋友会喜欢这一款菜单，CSS+JS实现的圆角下拉菜单，没有使用任何修饰性的图片哦，圆角完全是用JS完成的，因此代码多了些，想使用的朋友把JS文件提取出来另存，这样更合理些。 运行效果截图如下： 在线演示...
这是一款JS+CSS打造自适应宽度的圆角滑动门，这里的圆角主要是靠一张背景图片去实现，所指的宽度是滑动门上的导航的宽度，不管文字有多少，它都会一直顺着下去，不会被内容所撑破，兼容性方面，兼容IE6/7/8,火狐未试...
css图片圆角处理代码JS脚本代码处理图片圆角效果
圆角矩形, 没有使用图片. 国外人开发的, 一有一个 js 文件. 透明圆角短形.不多见. jquery 有一个插件 jquery.corner, 不过不支持边角透明.
这是一个css3里的属性处理圆角技术的问题，其中也包括用全用js处理圆角问题，在这里提供大家，希望对大家做网页有点用
网上收集资料，使用CSS及JAVASCRIPT实现DIV、背景色、图片等圆角的方法，非常实用
1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录...
本资源中包含CSS+JS滚动图片功能代码、CSS将图片自动变为圆角、CSS强制等比例缩小图片、CSS实现自适应的图片背景边框、CSS使用图片完美修饰的全兼容圆角框、CSS完成神奇创意的相框、CSS制作的类似相册浏览的功能、...
纯css3实现的突变圆角特效代码，不需要修整图片
67:___超漂亮Js+css图片幻灯切换 68:___马赛克效果的JS图片切换代码 69:___鼠标放到图片上会滑出提示文字 70:___鼠标滑过,缩略图放大显示（纯CSS） 71:___鼠标移上图片，变换出大图片 72:___鼠标经过图片时显示半...
一个纯CSS圆角示例网页，逍遥狼无图片智能圆角，无使用任何图片来修饰，全部CSS代码实现的圆角，很平滑，很漂亮。特点： 1：只需一个js即可设定圆角样式，本身自带6种样式，只需要在需要圆角的地方用"class=样式...
目前CSS3的应用已经越来越普及了，它最常见的一个圆角功能非常的不错，可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果，本实例就是一款直接用CSS3实现的，无需其他任何JS或者flash、亦不需任何...
CSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rarCSS将图片自动变为圆角.rar
W3C很早就已经在CSS 3 中加入了圆角属性border-radius，但是由于某些流行浏览器的不支持，使得其还是没能被广泛使用，所以我们会想尽办法去进行更好的补充，包括背景图片的圆角实现、js圆角实现等等。但是这些方法在...
style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章（源代码\第16章） 示例描述：本章演示字体属性用法。 间距与间隔....
CSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美修饰的全兼容圆角框.rarCSS使用图片完美...
纯CSS实现鼠标移上图片添加阴影效果.rar