如何制作圆形按钮答案

【问题标题】：How to make round buttons如何制作圆形按钮
【发布时间】：2023-05-01 04:41:02
【问题描述】：

如何使用 HTML 和 CSS 制作圆形按钮？我尝试使用背景图像，并使其具有一定的大小，但这似乎不起作用。具体来说，我想制作一个圆形按钮，单击它会启动一个 Javascript 脚本。

【问题讨论】：

【解决方案1】：

border-radius。

button {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid #000;
}

【讨论】：

哪些浏览器？能具体点吗？
最好使用border-radius； 50%；而不是以像素为单位进行硬编码。这样您就可以在不考虑边界半径的情况下更改尺寸。示例：jsfiddle.net/BfjAK/2
border-radius 浏览器支持信息：quirksmode.org/css/contents.html#t45
您可以添加-moz-border-radius: 50px;和-webkit-border-radius: 50px;以支持旧版mozilla和webkit浏览器
@BryanWeaver 该信息已过时。使用caniuse.com 获取有关浏览器支持的信息。

【解决方案2】：

您可以使用 css3 非常简单地做到这一点：

HTML -

<div id="button">
</div>

CSS -

#button {
    width:100px;
    height: 100px;
    border-radius:100%;
    background-color:red;
}

并使用 onclicked 事件使其成为按钮。

【讨论】：

border-radius: 50%; 应该可以。标记也可以是<button>Click Me</button>，而css是button { width: 100px; height: 100px; border-radius: 50%; background-color:red; border: 1px solid #000; }

【解决方案3】：

两种方式：

1.) 创建带圆角的图像并使用 css 颜色设置中间。

2.) 使用仅限于某些浏览器的 css 属性（FF 使用一组，safari 其他一些，不确定 chrome 是否使用另一组）。

【讨论】：

【解决方案4】：

border-radius 不必是百分比。请尝试将其设置为像素。

【讨论】：