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技术的发展，我们可以通过纯代码方式实现无图片的圆角效果。本文将详细介绍如何利用JavaScript和CSS来创建这种效果，以及它们的优势。 首先，让我们从CSS开始。CSS3引入了`border-radius`属性，...
首先，CSS3提供了许多新的样式规则，其中圆角边框（border-radius）允许我们不借助图片就能创建圆角效果。在本实例中，导航条的每个按钮都通过设置border-radius属性实现了圆润的外观，这使得整体设计更加现代且易于...
最后，压缩包中的文件结构包括index.htm（HTML文件）、style（CSS文件夹）、images（图片资源文件夹）和js（JavaScript文件夹）。index.htm是网页的主体，包含HTML标记和结构；style文件夹内的CSS文件将定义所有样式...
【JS+CSS+div内容图片轮播特效】是一种常见的网页动态效果，用于展示一组图片或内容，通过平滑过渡在不同图片之间切换，为用户提供视觉上的吸引力和交互性。在这个项目中，`div`作为主要的容器元素，`CSS`用于布局和...
例如，通过使用`border-radius`属性可以创建圆角，使聊天气泡看起来更加自然；`box-shadow`和`text-shadow`则可以增加深度感和层次感；`transition`和`animation`可以实现平滑的动态效果，如消息发送后的淡入淡出...
在CSS3之前，我们通常需要使用图片或者复杂的CSS hack来实现圆角，但这些方法往往效率低下且维护困难。随着CSS3的普及，我们可以直接通过CSS的`border-radius`属性轻松实现圆角效果。然而，有些浏览器可能不支持CSS3...
在实际开发中，可以结合JavaScript（如jQuery或其他库）来获取和处理数据，然后通过修改CSS属性实现动态更新。如果需要更复杂的交互，如点击拖动改变进度，可以引入事件监听器和相应的处理函数。 总的来说，...
相信不少朋友会喜欢这一款菜单，CSS+JS实现的圆角下拉菜单，没有使用任何修饰性的图片哦，圆角完全是用JS完成的，因此代码多了些，想使用的朋友把JS文件提取出来另存，这样更合理些。 运行效果截图如下： 在线演示...
总之，"jQuery+CSS3实现图片圆形转动效果"是网页动态效果设计的一个实例，它综合运用了JavaScript和CSS3的强大功能，提供了生动有趣的用户体验。掌握这一技术，不仅能够丰富你的网页设计技巧，也有助于提高网站的...
总结来说，"js+css+html经典设计"的学习资源旨在帮助开发者全面掌握网页开发的核心技术，通过实践和研究这些例子，可以提升对HTML5结构的理解，CSS3样式的应用，以及JavaScript动态功能的实现。这不仅有助于提升个人...
"非常棒的图片导航实现js+css" 是一个利用JavaScript和CSS技术创建的高效且美观的图片导航解决方案。本篇将深入探讨如何利用这两种技术来构建一个功能完备、视觉效果出色的图片导航。 首先，CSS（层叠样式表）是...
在这个圆形登录界面中，CSS的`border-radius`属性起到了关键作用，它允许我们将矩形边框转换为圆角或甚至完全圆形。通过设置`border-radius`值等于元素宽度的一半，可以创建一个完美的圆形元素。登录框内部的文本...
本项目“jquery+css3实现图片提示效果”就是利用这两种技术来创建一个吸引用户注意力并提供信息提示的功能。 jQuery是一个轻量级、高性能的JavaScript库，它的主要目标是简化JavaScript的DOM操作、事件处理、动画...
在这个项目中，CSS3的使用增强了视觉效果，比如使用渐变、阴影、圆角等属性创建现代感的UI。同时，CSS3的Flexbox或Grid布局可以实现灵活的响应式设计，确保界面在不同设备上都能正确显示。此外，动画和过渡效果也能...
"javascript+css3.0完美效果实现"这一主题旨在探讨如何巧妙地结合这两者，以实现网页设计的卓越效果。 JavaScript，作为客户端脚本语言，主要负责网页的动态功能，如表单验证、时间动画、用户交互等。它的灵活性和...
然而，"curvycorners js+css"是一个独特的解决方案，它允许开发者在不使用图片的情况下创建具有圆角的矩形元素。这个技术由国外开发者开发，其核心在于JavaScript（JS）与CSS（层叠样式表）的巧妙结合。 `...
"js"文件夹可能包含jQuery库和其他JavaScript代码；"css"文件夹则存放着CSS样式，定义了卡片的外观和交互效果；"img"文件夹则用于存储卡片上的图像资源，可能包括产品图片、图标等。 总的来说，这个压缩包提供了一...
为了达到逼真的触屏手机拨号盘效果，可能会用到图片、阴影、边框圆角等CSS属性来模拟实体手机按键的外观。 3. JavaScript逻辑：使用JavaScript实现拨号盘的交互逻辑，包括绑定点击事件到拨号按钮、处理按键输入以及...
5. **边框与背景**：新增了圆角边框（border-radius）、阴影（box-shadow）和背景图片渐变等功能，提高了界面美观度。 压缩包中的模板16至template29分别代表了不同的设计风格和用途，如企业网站、个人博客、电商...