CSS3 - 圆形按钮 - 圆形边（水平和垂直）[关闭]答案

【问题标题】：CSS3 - Rounded Button - Circular Sides (Horizontally and Vertically) [closed]CSS3 - 圆形按钮 - 圆形边（水平和垂直）[关闭]
【发布时间】：2016-01-25 20:07:53
【问题描述】：

我想创建一个如下所示的按钮：

有没有办法只使用 CSS 来创建这个按钮，而不使用附加的作为背景图像。我尝试使用border-radius，但无法实现。

【问题讨论】：

您可以使用this 即类似 `border-radius: 20px/30px; 的边界半径声明
设法完全按照我想要的方式使用 SVG，我不确定这是否是正确的方法。 jsfiddle.net/axmgbL03

标签： html css button css-shapes

【解决方案1】：

我能找到的最接近你的是这个......宽度为 410 像素，高度为 294 像素......实际图像远远大于这个 sn-p 的窗口......祝你好运

div{
  width:410px;
  height:294px;
  background:#ed1e79;
  border-radius:45%;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

是的，有可能。

这是你的做法：

.pinkbutton {
    border-radius: 240px / 120px;
    background-color: #ed1e79;
    width : 175.2px;
    height : 126.6px;
}

&lt;div class="pinkbutton"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

 .ellipseDiv {
   height: 50px;
   width: 100px;
   border: 2px solid #005;
   border-radius: 50px / 25px;
   background-color: #EE5D20;
 }

&lt;div class="ellipseDiv"&gt;&lt;/div&gt;

这应该可以得到你想要的。

这个例子是用一个 div 做的，但是用一个按钮也可以很容易地完成！

【讨论】：

@jbutler483：使用这个的好建议！

【解决方案4】：

你必须使用属性border-radius，例如它会是

#your-button {
  background-color: some-color;
  border-radius: some-percentage;
}

看this

【讨论】：

您不仅链接了 w3schools，还没有解决实际问题。
链接到 w3school 有问题吗？我问，所以我不会犯同样的错误。
估计是第一次见this
感谢有趣的信息，我认为对于像边界半径这样简单的东西，它已经足够好了，我认为一些文档，也许不是那个，但是一些文档对这个问题有好处，而不是确切的解决方案。感谢 cmets 和更正，将尽量避免此链接，并将尝试更具体的答案