我可以用简写设置三个边框的 CSS 边框宽度吗？答案

【问题标题】：Can I set the CSS border width for three borders with shorthand?我可以用简写设置三个边框的 CSS 边框宽度吗？
【发布时间】：2012-09-20 20:04:36
【问题描述】：

我已经用 CSS 为 .message 类设置了边框。

但是我想让它只有顶部边框是可见的内联样式。有人可以告诉我如何做到这一点。

【问题讨论】：

试试style="border:0px;border-top:5px;"

标签： html css

【解决方案1】：

您可以使用速记符号设置所有边框，然后覆盖您想要以不同方式呈现的一个边框，例如：

.message {
    border: 2px solid #f90;
    border-top: 2px solid transparent;
}

或者，为简洁起见，您可以简单地覆盖 border 的一个属性（color、width 或 style）：

.message {
    border: 2px solid #f90;
    border-top-width: 0; /* or whatever */
    border-top-style: none; /* or whatever */
    border-top-color: transparent; /* again, or whatever... */
}

【讨论】：

所有的边框都已经设置好了。我需要覆盖左侧、右侧和底部。是否有任何速记方法可以覆盖，还是我需要每个都做？
您必须单独重新声明每一个，或者简单地重新声明所有边框，然后将未更改的边框重置为默认值；恐怕我想不出另一种方法。其实我觉得@cimmanon may have it...

【解决方案2】：

如果您使用速记，则必须设置所有宽度，因此您将无法使用从 .message 类应用的宽度。

.test { border-width: 1px 0 0 0 } /* top right bottom left */

【讨论】：

我不知道这个选项（或者，至少，我已经忘记了）； +1！ =)