我可以用速记设置三个边框的CSS边框宽度吗？

Question

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

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

Answer 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... */
}

Answer 2

如果您使用速记，则必须设置所有宽度，这样您就无法使用.message类中应用的宽度。

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