CSS：使用圆角按钮同步边框

Question

到目前为止，我的代码允许我点击带有圆边的按钮，因为我应用了border-radius功能。然而，当我点击按钮时，蛀虫仍然是方形的，因此看起来非常不同步。

可以在这里看到：

http://www.tiikoni.com/tis/view/image.php?id=23d3264

这是按钮的css：

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

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

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

但这没有任何作用

Answer 1

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

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

如果你想要一个类似于轮廓但效果很好的效果，你可以使用box-shadow属性。

Answer 2

你无法通过border-radius和outline来解决这个问题。要获得您正在寻找的结果，您需要使框阴影看起来与大纲相同：焦点。

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

我不确定轮廓颜色，但你可能不得不改变蓝色＆＃39;正确的颜色。