CSS 概述最佳实践

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

想要改进这个问题？更新问题，以便可以通过编辑这篇文章用事实和引文来回答它。

6 年前已关闭。

Answer 1

的确。边框外侧的矩形区域周围有一个轮廓。它不考虑圆角。

禁用轮廓没有任何问题，只需确保为使用键盘的人添加一些其他辅助功能，例如，更改焦点背景的颜色：

div {
    margin: 64px;
}

input {
    font-size: 20px;
    border-radius: 16px;
    border: 2px solid #CCC;
    padding: 2px 12px;
    outline: 0;
}

button {
    font-size: 20px;
    border-radius: 32px;
    text-transform: uppercase;
    color: #FFF;
    border: 2px solid #CCC;
    background: #CCC;
    padding: 6px 3px;
    cursor: pointer;
}
input:focus {
    border-color: #999;
}

<div>
    <input type="text" placemark="Search query..."/>
    <button>Go</button>
</div>

Answer 2

与许多表单元素一样，按钮元素在浏览器中具有不同的呈现，并且需要进行许多修复...

http://fvsch.com/code/button-css/ 应该让您在整个元素周围而不是其内容周围勾勒出按钮的轮廓。