border
要素の左側と右側のルールを定義したい状況に陥ることがあります。しかし、正直なところ、border-left: solid 1px #999; border-right: solid 1px #999
少し不器用です。スペースを浪費し、変更を 2 回適用する必要があり、レンダリングの効率が低下する場合もあれば、そうでない場合もあります。
水平境界線または垂直境界線を一度に定義する方法はありますか?
border
要素の左側と右側のルールを定義したい状況に陥ることがあります。しかし、正直なところ、border-left: solid 1px #999; border-right: solid 1px #999
少し不器用です。スペースを浪費し、変更を 2 回適用する必要があり、レンダリングの効率が低下する場合もあれば、そうでない場合もあります。
水平境界線または垂直境界線を一度に定義する方法はありますか?
<div id="myDiv">Your Div</div>
CSS:
#myDiv
{
border-width:0 1px 0 1px;
border-color:#ddd;
}
次のように一度に実行できます。
#myDiv
{
width: 100px;
height: 100px;
border: 1px solid #999;
border-width: 0 1px; /*horizontal, vertical*/
}
いいえ。
https://developer.mozilla.org/en-US/docs/CSS/borderから:
border-width、border-style、および border-color プロパティ、さらには margin および padding 短縮形プロパティでさえ、最大 4 つの値を受け入れ、異なる境界線に対して異なる幅、スタイル、または色を設定できますが、このプロパティは 1 つの値のみを受け入れます。プロパティごとに、4 つのエッジの同じ境界線につながります。
したがって、個別の border-width、border-style、および border-color プロパティを使用するように切り替えることができ、それらの省略形のプロパティを使用してサイドごとのスタイルを設定できます - しかし、私はあなたがそれを持っているのが最善だと思います.
とはいえ、スタイル定義を CSS クラスとして保存していることを確認してください。これは、ページ全体の要素の「スタイル」属性でこれらを 1 つずつ適用するのではなく、要素間で再利用できます。
残念ながら、css にはオプションがありません。すべての境界パラメーターを手動で記述する必要があります。