如何在Javascript中制作一个侧面有2个半圆的矩形按钮？ [复制]

【问题标题】：How to make a button shaped as rectangle with 2 semi-circles at the side in Javascript? [duplicate]如何在Javascript中制作一个侧面有2个半圆的矩形按钮？ [复制]
【发布时间】：2020-10-11 16:53:36
【问题描述】：

我正在尝试创建一个形状如下图所示的按钮，但我找不到任何简单的方法来做到这一点，我搜索过的任何库也没有提供类似的东西，坦率地说，这令人惊讶，因为我会认为这是一个相当常见的形状。谁能教我怎么做？

【问题讨论】：

border-radius:1em;应该是你要找的 ;)
假设您有一个固定的 n 像素高度，您只需将边框半径设置为 n/2 像素 :) 干杯
在 JavaScript 中？这没有意义

标签： javascript css

【解决方案1】：

您只需要使用边框半径的 CSS。

input[type="button"] {
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid red;
  color: red;
  background: transparent;
}

&lt;input type="button" value="Previous" /&gt;

您可能会看到的黑色轮廓（当您单击按钮时）是可以禁用的 Chrome 功能。这不是（据我所知）可以用outline-style: none; 解决的问题。阅读更多关于它的信息here。

【讨论】：

【解决方案2】：

您要查找的 CSS 属性是 border-radius

button {
  border: 1px solid black;
  border-radius: 15px;
  padding: 10px 50px;
}

&lt;button&gt;Previous&lt;/button&gt;

【讨论】：