html - HTML と CSS を使用してエンボスボーダーを作成するにはどうすればよいですか?

Question

一部の GUI では、枠がエンボス加工されたボックスを使用してウィジェットをグループ化します。

HTML と CSS を使用してこの外観を作成するにはどうすればよいですか?

エンボスボーダーは、要素が 3D でページから出てくるような錯覚を生み出すものです。上下の枠を明るく、右下の枠を暗くすることで作成されることが多いです。

score 5 · Accepted Answer

border-style: groove私が目にするほとんどの GUI は、グループボックスに CSS に似たスタイルを使用しています。

HTML フォームにグループボックスを使用する必要がある場合は、グループラベルに<fieldset>withを使用します。<legend>

score 3 · Accepted Answer

特に最新のブラウザでは、かなりの数の方法があります。

最も単純なのは明るい/暗い境界線です (より分厚い外観にするためにピクセルを増やします):

.box {
  border-top: #ccc 1px solid;
  border-right: #ccc 1px solid;
  border-bottom: #777 1px solid;
  border-left: #777 1px solid;
}

より複雑な場合は、背景画像をボックスで使用できます。これにより、最高のブラウザー互換性が提供されます。All-Expandable Boxには良いデモがあります。

CSS3 を使用すると、丸みを帯びた角、ドロップシャドウ、およびあらゆる種類の効果を追加できます。

また、ウィジェットボックスで jQuery 要素を使用している場合、jQuery UI パックにはいくつかの優れたスキンと簡単なグループ化/ボックスが付属しています。

score 0 · Accepted Answer

定義と使用法

タグは、フォーム内の要素を論理的にグループ化するために使用されます。

タグは、関連するフォーム要素の周りにボックスを描画します。

タグは、fieldset 要素のキャプションを定義します。

score -2 · Accepted Answer

html - HTML と CSS を使用してエンボス ボーダーを作成するにはどうすればよいですか?