HTMLでのFieldsetの境界線スタイル設定

黄舟
リリース: 2018-05-11 15:53:23
オリジナル
16984 人が閲覧しました

おそらく、写真を使用してそのような効果を達成できると考えているかもしれませんが、写真はサイズがわずかに大きいだけでなく、意味論にも欠けています。 xhtml+cssを使用してこの効果を実現するにはどうすればよいですか?まず、fieldset を通じてボックス (フィールドとしても変換される) を設定し、次に特定のタグの凡例フィールド タイトルを通じてタイトルを設定し、この効果を実現するために対応するスタイルを定義します。まず、フィールドセット ボックスと凡例フィールドのタイトルについて学びましょう。
HTML 要素のフィールドセット ボックス
フィールド セットに含まれるテキストおよびその他の要素の周囲にボックスを描画します。
フィールド セットに含まれるテキストおよびその他の要素の周囲にボックスを描画します。
fieldset要素は、フォーム内の要素をグループ化し、ドキュメント内のテキストを区別するために使用されます。窓枠と似たような動作をします。 fieldset は、Internet Explorer 4.0 以降の HTML およびスクリプトで使用できます。
fieldset要素はblock要素です。また、タグは閉じる必要があります。つまり、

のペアで指定する必要があります。
form#staff_info fieldset {  
    background: rgba(255,255,255,.3);  
    border-color: rgba(255,255,255,.6);  
    border-style: solid;  
    border-width: 2px;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    -khtml-border-radius: 5px;  
    border-radius: 5px;  
    line-height: 30px;  
    list-style: none;  
    padding: 5px 10px;  
    margin-bottom: 2px;  
}  
  
  
form#staff_info fieldset legend {  
    color:#302A2A;  
    font: bold 16px/2 Verdana, Geneva, sans-serif;  
    font-weight: bold;  
    text-align: left;  
    text-shadow: 2px 2px 2px rgb(88, 126, 156);  
}
ログイン後にコピー

HTMLでのFieldsetの境界線スタイル設定

<fieldset   style="max-width:90%">
<legend>系统使用说明</legend>
</fieldset>
ログイン後にコピー

ここで、border-width: 1px; は側面の太さ、border-color: #008000; は境界線の色です。それ以外の場合は、この値を指定します。太さは表示されません。

スタイル タグは次のとおりです: border-bottom-color で、他の 3 つの境界線の中央の下を Top (上)、Left (左) に変更します。右(右)それぞれ)。

以上がHTMLでのFieldsetの境界線スタイル設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート