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

Question

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

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

Answer 1

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

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

或者，为简洁起见，您可以简单地覆盖该border(color或) 的一个属性：widthstyle

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

Answer 2

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

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