CSS：用圆角按钮同步边框[重复]答案

【问题标题】：CSS: syncing up a border with a rounded edged button [duplicate]CSS：用圆角按钮同步边框[重复]
【发布时间】：2016-02-29 15:02:48
【问题描述】：

到目前为止，我的代码允许我点击一个带有圆边的按钮，因为我已经应用了边框半径功能。但是，当我单击按钮时，钻孔器仍然是方形的，因此看起来非常不同步。

可以在这里看到：

这是按钮的css：

.submitToDoButton {
    background: lightgray;
    font-size: 20px;
    color: red;
    padding: 2px;
    width: 100px;
    border-radius: 25px;
}

这就是我认为更改边框的代码，也就是将其设置为相同的半径：

.submitToDoButton:active{
    border-radius: 25px;
}

但这无济于事

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
此图片将在一天后下线。请将代码添加到问题中。
跳过整个:active 规则并将outline: none 添加到主类中。
stackoverflow.com/questions/1418766/… 通过这个stackoverflow链接将帮助你

标签： html css

【解决方案1】：

您将无法使用边框半径和轮廓来解决此问题。要获得您正在寻找的结果，您需要使 box-shadow 看起来与 :focus 上的轮廓相同。

.submitToDobutton:focus {
     box-shadow: 0 0 5px blue;
}

我不确定轮廓颜色，但您可能需要将“蓝色”更改为正确的颜色。

【讨论】：

【解决方案2】：

您可以尝试outline: none; 到主按钮类：

.submitToDoButton{
    border-radius: 25px;
    outline: none; /* add this */
}

如果您确实想要类似于轮廓但看起来不错的效果，可以使用box-shadow 属性。

【讨论】：