`
miss_安
  • 浏览: 21168 次
文章分类
社区版块
存档分类
最新评论

用js实现css3效果的圆角方法

阅读更多
找在IE下实现css3效果的圆角时找到的一个实例,没有测试,不知道使用起来怎么样,有兴趣的朋友可以自己试一下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>在线演示 - LHGCALENDAR</title>
<script type="text/javascript" src="http://www.qiuzhiquan.com/images/DD_roundies_min.js"></script>
<script type="text/javascript">
DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);DD_roundies.addRule('.websjy2', '5px', true);DD_roundies.addRule('.websjy3', '1000px', true);
</script>
<body>
<h3>效果1</h3>
<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#66FFFF; margin-bottom:10px;" class="websjy1">32423</div>
<h3>效果2</h3>
<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#EEE; margin-bottom:10px;" class="websjy2">32423</div>
<h3>效果3</h3>
<div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#ff0000; margin-bottom:10px;" class="websjy3">32423</div>
</body>
</html>
代码来源http://www.huiyi8.com/sc/5540.html
分享到:
评论

相关推荐

    css3兼容圆角

    在本例中,`css3.htc`文件包含了JavaScript代码,用于模拟CSS3的圆角边框效果,使得IE8能够呈现类似的效果。 引入`css3.htc`文件的方法是在CSS样式中使用`behavior`属性。例如: ```css .box { border-radius: 10...

    JS+CSS实现矩形对象的圆角效果

    综上所述,通过CSS3的`border-radius`属性以及JavaScript的动态样式修改,我们可以轻松实现矩形对象的圆角效果。在设计网页时,圆角效果不仅可以增强视觉吸引力,还可以帮助创建更友好的用户体验。在处理兼容性问题...

    CSS3实现圆角阴影渐变效果兼容IE等浏览器

    本文将深入探讨如何利用CSS3实现圆角、阴影和渐变效果,并确保这些效果在包括IE在内的主流浏览器中都能得到良好的兼容性。 首先,我们来讨论CSS3的圆角效果。在CSS3之前,为了实现圆角,开发者通常需要使用大量的...

    CSS+JS实现的圆角边框TAB选项卡滑动门代码

    在网页设计中,CSS(Cascading Style Sheets)和JavaScript(JS)是不可...通过学习和实践这个实例,开发者不仅可以掌握CSS圆角边框和选项卡布局,还能加深对JavaScript动态效果的理解,提升网页的互动性和视觉吸引力。

    让IE6、IE7、IE8支持CSS3的圆角、阴影样式

    总的来说,虽然IE6-IE8不原生支持CSS3的圆角和阴影效果,但通过JavaScript库、图片背景、CSS Hack以及渐进增强的方法,我们可以使这些旧版浏览器也能呈现出类似的效果。在实际项目中,应根据项目需求和目标用户群的...

    css3实现圆角矩形

    标题"css3实现圆角矩形"所指的就是利用CSS3的`border-radius`属性来设计带有圆角的矩形元素,这个特性极大地增强了网页的视觉效果,并且提供了更好的用户体验。描述中提到“兼容到IE6”,意味着我们将讨论如何在包括...

    ie6 7 支持css3 圆角

    总的来说,为了在IE6和IE7中实现CSS3的圆角效果,开发者可以采用PIE插件,结合JavaScript和HTC技术,将不被支持的CSS3属性转换为老版IE浏览器能理解的形式。这不仅解决了兼容性问题,还使得设计者能够在这些旧版...

    css+js圆角 分享啦

    本资源"css+js圆角.rar"提供了一种利用CSS和JavaScript实现圆角的方法,适用于那些希望在不支持CSS3圆角的老版本浏览器中也能实现这一效果的开发者。 首先,我们来探讨CSS中的圆角实现。CSS3引入了`border-radius`...

    JS实现DIV、图片圆角效果

    首先,我们来了解CSS3中的border-radius属性,它是实现圆角效果最直接的方法。但遗憾的是,早期的浏览器,尤其是IE8及以下版本,不支持这一特性。为了确保在各种浏览器中都能实现圆角效果,我们需要借助JavaScript来...

    javascript+css无图片圆角效果

    然而,老版本的浏览器可能不支持CSS3的`border-radius`,这时可以借助JavaScript来实现跨浏览器的圆角效果。`NiftyCube`这个文件可能就是一种JavaScript库,用于实现此类功能。这类库通常通过动态创建内嵌元素或修改...

    纯css实现边框圆角效果

    纯CSS实现边框圆角效果是现代Web开发中的基础技能,无需依赖图片切片或JavaScript插件,只需通过CSS3的特定属性就能轻松实现。本教程将深入探讨如何使用CSS来创建具有圆角边框的元素。 首先,我们需要了解CSS3中的`...

    JQUERY CSS3 文本圆角 光晕效果

    "JQUERY CSS3 文本圆角 光晕效果"是一个利用这两种技术实现的高级网页元素美化方法,主要关注文本框的外观设计。在支持CSS3的现代浏览器中,这种效果可以显著提升网站的美感和用户体验。 首先,让我们详细了解一下...

    div+css实现圆角导航菜单的效果

    本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先,`div`是HTML中的一个块级元素,它可以被用作容器,用于组织页面内容。在创建导航菜单时,`div`可以用来包裹整个菜单或者单独的菜单项。例如...

    css+div漂亮的圆角tab选项卡

    每个标题与对应的内容区域之间通过类名或ID进行关联,以便于用JavaScript或CSS控制显示和隐藏。 接下来,我们来讨论CSS的应用。CSS是美化这些元素的关键,特别是当我们要创建圆角效果时。CSS3引入了`border-radius`...

    jquery+css3圆角动画导航

    本示例“jquery+css3圆角动画导航”利用了JavaScript库jQuery和CSS3的新特性,为网页创建了一个具有动态效果的圆角导航菜单。下面将详细介绍如何实现这一功能。 首先,CSS3提供了许多新的样式规则,其中圆角边框...

    css+div圆角窗口

    在CSS3之前,要实现圆角效果,开发者需要借助图像或者复杂的JavaScript技巧。然而,随着CSS3的推出,圆角边框变得异常简单,通过`border-radius`属性就能轻松实现。下面我们将详细介绍如何使用CSS3创建圆角窗口,...

    Css3圆角边框

    这个特性在现代网页设计中被广泛使用,因为相比传统的JavaScript或图像方法,CSS3的圆角边框更加简洁、高效,并且能够实现良好的浏览器兼容性。 首先,让我们来了解一下如何使用CSS3创建圆角边框。CSS3中的`border-...

Global site tag (gtag.js) - Google Analytics