是否有任何 HTML 代码可以显示椭圆或圆角矩形？答案

【问题标题】：Is there any HTML code that would display an ellipse or a rounded rectangle?是否有任何 HTML 代码可以显示椭圆或圆角矩形？
【发布时间】：2010-04-10 23:28:18
【问题描述】：

我不确定在 HTML 中是否可行，但我还是会在这里问：

是否有任何 HTML 代码可以代表椭圆或圆角矩形？

【问题讨论】：

标签： html graphics rounded-corners ellipse

【解决方案1】：

换一个想法，这很有可能！给你：

http://virkkunen.net/b/oh-dear.html

纯 HTML！它甚至不使用任何新奇的 CSS 或 JavaScript 或任何脚本。

【讨论】：

【解决方案2】：

是的，帆布。但它确实是 Canvas HTML 标签，加上 Javascript。在此处阅读有关 CANVAS 的更多信息http://en.wikipedia.org/wiki/Canvas_element

【讨论】：

花了这么长时间才弄到一张画布真是太可惜了！
不要破坏，但我们不要忘记，如果没有加载额外的 JavaScript 用于画布模拟，这将无法在 IE 上运行。

【解决方案3】：

如果您使用 HTML 和 CSS，您可以这样做。如果您不介意使用特定于浏览器的 CSS，您可以在 Firefox 中使用 -moz，在 Chrome 和 Safari 中使用 -webkit，在 IE9 和 Opera 10.5 中使用不以连字符开头的 CSS 3。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Rounded
        </title>
        <style type="text/css">
            div {
                -moz-border-radius-topleft: 6px;
                -webkit-border-top-left-radius: 6px;
                border-top-left-radius: 6px;
                -moz-border-radius-bottomleft: 6px;
                -webkit-border-bottom-left-radius: 6px;
                border-bottom-left-radius: 6px;
                -moz-border-radius-topright: 6px;
                -webkit-border-top-right-radius: 6px;
                border-top-right-radius: 6px;
                -moz-border-radius-bottomright: 6px;
                -webkit-border-bottom-right-radius: 6px;
                border-bottom-right-radius: 6px;
                border:solid 1px black;
                padding:10px;
                background-color:#efefef;
            }
        </style>
    </head>
    <body>
        <div>I'm rounded!</div>
    </body>
</html>

【讨论】：

请注意，IE9 甚至还没有发布日期...我猜要到 2011 年的某个时候...

【解决方案4】：

您可以通过使用here 找到的技巧来接近其中任何一个（允许您使用 div 渲染任意大小/位置的直角三角形）

很多 div 的边框相对较小。硬编码所有的高度和宽度需要很长时间，但您可以编写一个脚本来为您生成 html 代码。

当然，正如这里其他人已经建议的那样，最简单和最快的（就开发时间、下载页面所需的时间，甚至可能甚至渲染时间而言）的解决方案是使用纯 html 以外的东西。

【讨论】：

【解决方案5】：

CSS3 中的边框半径将允许您在大多数浏览器中执行此操作（除了 IE.../spit）。 http://www.css3.info/preview/rounded-border/

HTML5 提供了一个 canvas 标签，它允许使用 Javascript 绘制类似的东西。同样，浏览器支持仍在进行中。

但是，您可能永远无法在纯 HTML 中完成您的要求。

【讨论】：

截至 2010 年 4 月 10 日，只有 Opera 10.5 会使用 CSS3 执行此操作（我认为 IE9 预览版）。对于 Chrome 5.0.371.0、Safari 4.0.5 和 FF 3.6.3，您需要使用供应商扩展。

【解决方案6】：

没有。没有。

【讨论】：

你的另一篇文章与这篇文章相矛盾！ :P