如何制作跨浏览器，W3C有效，语义，非javascript ROUND角落？

时间：2009-04-14 07:09:29

标签： html css

我想制作跨浏览器（FF3，IE6，Safari，Opera）， W3C有效（HTML和CSS两者），可伸展（水平垂直），没有JavaScript 和语义和较小的HTML标记 Round CORNER 。 图像可用于IE6。

我已经尝试并测试了很多社区可用的技术。但是一切都有上面提到的问题之一。如果有人知道我想要什么，请与我分享？

请记住，我想在没有任何类型的JavaScript，jquery或任何类型的js的情况下制作它。

12 个答案:

答案 0 :(得分：21)

两个主要的渲染引擎已经支持CSS3很长一段时间了，这使圆角变得如此简单：

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

当然，这对IE6或7 （它在IE8中工作）或8没有任何影响所以你需要用角落的图像来实现令人讨厌的堆叠分区，这不会t符合你的语义要求。

我不喜欢涉及javascript或css-hacks的显示黑客 - 所以我使用CSS3并检查IE7中的平方版本是否可以接受。我已经做了一段时间，因为IE从来没有用过支持PNG透明度 - 这意味着你不能很好地在图案背景上覆盖圆角图像。 IE8是一个很大的改进，所以问题确实开始消失 - 但我理解你希望它能在IE6及更高版本上运行。

更新：最初计划包含在IE8中的各种CSS3位片实际上已从最终版本中删除。 border-radius是受害者之一。

答案 1 :(得分：6)

简短的回答是，如果没有CSS3，你无法做任何你想要的事情 - 除了最新版本的浏览器之外，没有实现。

所以，答案是要么使用CSS3（如上面Sohnee所详述），要么学会喜欢javascript / divs / images解决方案。当没有这些浏览器的浏览器看到它时，请确保它显示正常...

答案 2 :(得分：3)

迄今为止最好的解决方案是CSS3Pie。

它允许您使用CSS为IE添加圆角。

您可以对所有其他浏览器使用CSS border-radius，为CSS使用CSS3Pie。

它使用IE特定的behavior样式，因此不是标准CSS，但它确实意味着您获得了正确的语义HTML（没有用于布局的虚假div），并且您不需要担心JQuery插上插件。

它是Javascript（各种），但只需要在IE上运行;所有其他浏览器将使用普通的CSS来处理它，甚至不会加载特定于IE的代码。

（顺便说一句IE9现在确实支持border-radius ......但是当然IE6 / 7/8仍然存在并且将会有一段时间）

答案 3 :(得分：1)

这应该可以让您获得所需的结果。旧的堆叠DIV方法，具有单个大背景图像。您必须创建一个非常大的背景图像，例如2000 x 2000像素，您将绘制一个圆角矩形。我建议将其保存为具有透明背景的.GIF，以确保与IE6兼容，因为您要避免使用JavaScript。请注意，在示例中，边框只是为了帮助确定元素出现的位置，并且可以将其删除。

我在IE6，IE7，Firefox 2和3，Safari和Opera上进行了测试。希望这会有所帮助。

<html>
<head>
  <style type="text/css">
    .RoundRectInside
    {
      width: 100%;
      background: url(BigBackground.gif) top left no-repeat;
      overflow: hidden;
    }

    .RoundRectOutside
    {
      width: 20em;
      height: 20em;
      background: url(BigBackground.gif) bottom left no-repeat;
      overflow: hidden;
      position: relative;
    }

    .RoundRectTopRight
    {
      float: right;
      /* Width and Height should correspond to width and height of rounded corner */
      width: 30px;
      height: 30px;
      background: url(BigBackground.gif) top right no-repeat;
      overflow: hidden;
      position: absolute;
      top: 0;
      right: 0;
    }

    .RoundRectBottomRight
    {
      float: right;
      /* Width and Height should correspond to width and height of rounded corner */
      width: 30px;
      height: 30px;
      background: url(BigBackground.gif) bottom right no-repeat;
      overflow: hidden;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div class="RoundRectOutside">
    <div class="RoundRectInside">
      <div>Content goes here</div>
      <div class="RoundRectTopRight"></div>
    </div>
    <div class="RoundRectBottomRight"></div>
  </div>
</body>

</html>

答案 4 :(得分：0)

您可以使用here描述的技术（它适用于Apple Dashboard Widget，但HTML / CSS应该相同）。它使用九个图像，不需要任何JavaScript。

史蒂夫

答案 5 :(得分：0)

我不知道你的意思是语义或可伸展的圆角，但你可以使用CSS border-radius属性用于Webkit和Firefox，只需使用PNG图像和this HTML Component的组合，这会增加对IE6的PNG alpha通道支持。

答案 6 :(得分：0)

我很确定ie6 / 7的最小非js圆角技术需要2个小图像（顶部和底部）和1个额外div用于固定宽度框，3个小图像（底部，左侧和右侧）和3个可变宽度框的额外div。

固定宽度

<div class="box">
<div class="bottom">
gjkgjk
</div>
</div>

.box {background:url(image to round off the top) top left no-repeat:padding:0;}
.box .bottom {background:url(image to round off the bottom) bottom left no-repeat:margin:0;width:100px}

可变宽度

<div class="box">
<div class="top-right">
<div class="bottom-left">
<div class="bottom-right">
gjkgjk
</div>
</div>
</div>
</div>

.box {background:url(image to round off the top-left) top left no-repeat:padding:0;}
.box .right{background:url(image to round off the top-right) top right no-repeat:padding:0;margin:0;}
.box .bottom-left {background:url(image to round off the bottom-left) bottom left no-repeat:margin:0;padding:0;}
.box .bottom-right {background:url(image to round off the bottom-right) bottom right no-repeat:margin:0;padding:0;}

如果你想要一个圆形边框而不仅仅是一个圆形的实心背景，可以使用边框，负边距，位置相对/绝对，宽度和背景图像位置进行调整，以便它可以工作，但不能记住顶部我的脑袋怎么样。

答案 7 :(得分：0)

这是我迄今为止发现的最好的。

http://apptools.com/examples/roundedbox.php

这是一个跨浏览器，W3C有效且仅使用一个图像。但我们不能与此接壤。

此解决方案适用于固定宽度和边框。

它使用小标记` 内容

` 有效的CSS，HTML http://www.askthecssguy.com/examples/roundedCorners/index.html

答案 8 :(得分：0)

如果您使用具有Alpha透明度的PNG8，则图像在IE6中可以具有透明度。需要注意的是，您只能拥有完全透明或不透明的图像（两者之间的任何内容都将呈现为100％透明），并且您无法使用大的调色板或渐变。

根据您的设计，有可能的解决方法，或者您可以将其与上面的PNG8选项结合使用。如果您的背景很简单，您可以将角落外的任何内容与背景匹配。使用这种技术，如果你使用精灵，你可以轻松地为你的角落做一个图像。标记看起来类似于以下内容：

<div id="content">
     <span class="lt"></span>
     <span class="rt"></span>
     <span class="lb"></span>
     <span class="rb"></span>
</div>

CSS：

#content {position:relative;}

/*These styles are generic and can be reused over multiple corner types*/
.lt, .rt, .lb, .rb{
    background:url(../images/button_corners.png) no-repeat;
    width:5px;
    height:5px;
    position:absolute;
}
.lt, .rt{top:0px;}
.rt, .rb{right:0px;}
.lt, .lb{left:0px;}
.rb, .lb{bottom:0px;}

/*The following would be used specifically for #content, but you could reuse a different part of the same image for a different container or button */

#content .lt{background-position:-200px 0px;}
#content .rt{background-position:-245px 0px;}
#content .lb{background-position:-200px -45px;}
#content .rb{background-position:-245px -45px;}

这种方法有优点和缺点：

<强>优点

它是跨浏览器，它适用于液体和固定布局，您可以将它用于菜单项（悬停将在IE6中用于链接）或容器，它不需要 JavaScript，使用CSS精灵，您可以使用单个图像，即使是多个角落类型也可以。

<强>缺点

它不适用于每个布局，边框可能是棘手或丑陋的，它会在标记中添加一些额外的元素，如果你将它用于具有悬停效果的链接项，IE6会有一个悬停闪烁，可以只能用一点点JavaScript来解决。但是，JavaScript只有一行，可以包含在条件注释中：

<script type="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script>

答案 9 :(得分：0)

如果您不介意只使用Javascript，那么您可以使用条件注释和Javascript动态插入可以执行您想要的VML舍入（或者只使用静态有条件注释的VML）。 CSS3边界半径涵盖Gecko，WebKit和KHTML。 Opera需要SVG背景图像。

以下是我的一个项目提取的示例：http://entr0py.org/misc/reader/basic/

我被告知它仍然有一些与背景着色有关的WebKit错误，但它在其他所有方面都能正常工作。

答案 10 :(得分：0)

嗨，我最近不得不克服同样的问题，一个带有圆角，内部边框，阴影和渐变背景的可调整小部件。它还必须适用于所有浏览器（包括IE6）。

假设你正在使用photoshop并正确地管理你的源文件，这很容易。总共它需要4张图片（最多7张，具体取决于你如何支持IE6），这些图片都可以从原始的photoshop文件中切片，所以非常简单。

请查看以下链接。

http://thatguynamedandy.com/blog/css-widget-rounded-corner-gradient-drop-shadow

答案 11 :(得分：0)

以下是一些适用于所有浏览器的方法：

相关问题
最新问题