兼容所有浏览器的圆角 - Webcelement - ITeye博客

`

webcelement

浏览: 39024 次
性别:
来自: 天津

最近访客更多访客>>

web-css-element

celementj

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

兼容所有浏览器的圆角

博客分类：

WEB

阅读更多

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>兼容所有浏览器的圆角</title>
<style type="text/css">
.box {
    width:400px;
    height:500px;
    margin:auto;
    border:1px solid #ccc;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
</style>
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 5 },
tr: { radius: 5 },
bl: { radius: 5 },
br: { radius: 5 },

antiAlias: true
}
curvyCorners(setting, ".box");
}

</script>
</head>

<body>
<div class="box"></div>
</body>
</html>

分享到：

爱恨原则 | Dedecms 文件目录结构分析

2012-07-06 13:39
浏览 710
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

圆角兼容所有浏览器: 原始的圆角框兼容所有浏览器里面有html测试

圆角兼容所有浏览器方法: ### 圆角兼容所有浏览器的方法 #### 一、引言在网页设计中，圆角是一种常见的视觉效果，能够使页面看起来更加柔和美观。然而，不同的浏览器对于圆角的支持程度存在差异，这使得开发者需要采取一定的策略来确保...

兼容各种浏览器的圆角边框: "兼容各种浏览器的圆角边框"这一主题，就是针对这一问题提出的一种解决方案。在早期的Web开发中，各浏览器对CSS3新特性的支持并不一致，尤其是对于圆角边框（border-radius）属性。例如，Firefox使用-moz-border-...

兼容所有浏览器的CSS3圆角: 本主题将详细探讨如何实现“兼容所有浏览器的CSS3圆角”这一技术目标。首先，CSS3中的`border-radius`属性是实现圆角的关键。它允许我们为元素的四个角分别设置不同的圆角半径，从而创造出各种形状的圆角效果。...

jQuery圆角插件,实现兼容浏览器圆角效果: 但是这些方法在实现的过程中，总是会增加很多无谓的工作任务，而且还有可能无法做到浏览器之间的兼容性，那么就介绍一个非常简单的jQuery圆角实现效果吧，说是圆角有点小看它了，因为它可以实现的不止是圆角，看这...

兼容所有浏览器的 Jquery 圆角插件,可配置: 总的来说，这个兼容所有浏览器的jQuery圆角插件是前端开发者实现跨浏览器圆角效果的一个实用工具。通过理解其使用方法和实现原理，开发者可以更灵活地在项目中应用，并根据需要进行定制和优化。

兼容各个浏览器的圆角插件: "兼容各个浏览器的圆角插件"就是针对这个问题而诞生的一种解决方案，它旨在提供一种统一的方法，让网页的圆角效果在各种浏览器上都能正常显示。首先，我们需要了解CSS3中的`border-radius`属性，这是实现圆角的...

js换肤圆角代码兼容各个浏览器: 在网页设计中，实现元素的圆角效果以及动态换肤是常见的需求，尤其在JavaScript（JS）的帮助下，这些功能可以轻松地实现，并且能够确保在不同的浏览器之间具有良好的兼容性。"js换肤圆角代码兼容各个浏览器"这个主题...

兼容各浏览器的pop,带圆角和阴影: "兼容各浏览器的pop,带圆角和阴影"这个项目就是为了解决这个问题，确保在所有主流浏览器上都能呈现出一致且美观的效果。首先，让我们深入了解一下圆角和阴影这两个CSS特性。圆角是通过`border-radius`属性实现的，...

兼容所有浏览器的弹出层登录: 在IT行业中，网页开发是一项关键任务，而创建一个兼容所有浏览器的登录弹出层是确保用户体验一致性和流畅性的重要步骤。本文将详细讲解如何实现这样一个功能，并分享一个模仿Win7风格的弹出层实例。首先，我们需要...

如何让css在所有浏览器下兼容: ### 如何让CSS在所有浏览器下兼容在Web开发领域，确保CSS代码能够在不同浏览器上稳定运行是一项重要的技能。本文将详细介绍如何使CSS在各种浏览器（包括但不限于IE6、IE7、IE8以及现代浏览器如Firefox和Chrome）下...

css3处理所有浏览器都兼容的无图片圆角问题: 本文将详细介绍如何使用CSS3处理在所有浏览器中都兼容的无图片圆角问题，并探讨利用JavaScript库如`curvycorners.js`来进一步增强兼容性。首先，让我们了解CSS3中的圆角属性。CSS3提供了`border-radius`属性，用于...

IE6等各种浏览器兼容圆角: 这种方法适用于所有支持JavaScript的浏览器，但可能会影响页面加载速度，特别是对于大量使用圆角的页面。 4. 使用图片切片这是最传统的解决办法，通过将元素的背景切分为四个部分，每个部分对应一个角落的圆角，...

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

ie完美兼容css3圆角: 1. 测试：确保在不同版本的IE浏览器中进行充分的测试，确保圆角效果在所有目标环境中都能正常显示。 2. 性能：虽然CSS3 PIE等库提供了很好的兼容性解决方案，但它们可能会增加页面加载时间和内存占用，因此在大型...

css3兼容圆角: 随着现代浏览器的普及，许多开发者已经不再使用`.htc`文件来处理IE8的兼容性问题，而是选择渐进增强或优雅降级的策略，即在不支持CSS3的浏览器中提供一个没有圆角的备用设计。另外，也可以使用CSS3条件注释（如`<!--...

CSS种针对浏览器兼容问题的解决方法: /* 兼容所有现代浏览器 */ cursor: hand; /* 兼容旧版IE */ ``` #### 4. 元素高度设置问题当通过 JavaScript 设置元素的高度时，Firefox 要求单位必须明确，如 `px`，而 IE 则不需要。例如： ```javascript // ...

解决IE不兼容css3圆角和阴影问题: 1. 使用渐进增强：这是一种设计策略，首先确保网站的基本功能在所有浏览器中都能正常工作，然后逐步添加对新特性的支持。对于IE，可以先为其他支持CSS3的浏览器提供圆角和阴影，而为IE提供一个简单的无圆角、无阴影...

基本的圆角效果这是最基本的圆角框，无图片，四个圆角全部采用标签绘制，兼容很多中浏览器，无HACK: “兼容所有浏览器，无HACK”意味着这个圆角解决方案已经过优化，可以在多种浏览器上正常工作，包括较旧版本的Internet Explorer（通常需要使用特定的前缀，如 `-webkit-`，`-moz-`，`-ms-` 等，来确保兼容性）。...

Global site tag (gtag.js) - Google Analytics