html - 速記で3つの境界線のCSS境界線幅を設定できますか？

Question

.messageクラスのCSSで既に境界線を設定しています。

ただし、インラインスタイルで上部の境界線のみが表示されるようにしたいと思います。誰かが私がこれを行う方法を教えてもらえますか？

Answer 1

省略表記を使用してすべての境界線を設定できますが、次に、表示する1つの境界線を別の方法でオーバーライドします。次に例を示します。

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

または、簡潔にするために、そのborder（color、、widthまたはstyle）の1つのプロパティを単純にオーバーライドできます。

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