2016-11-07 5 views
0

私はボックス付きのWebページを持っていて、ボックスの境界線にテキストラベルを置き、その下に境界線を隠したいと思っています。今、私はこのようにそれをやっている:マスキングまたは何かのように、より良い方法があるかどうCSSによるマスキング

http://www.esims.nl/test/aspnet/2016_11_stackoverflow/

が、私は疑問に思います。 CSS3ではなく、背景画像と異なるdivを使用しているので

更新:fieldsetは私が求めているように思えましたが、残念ながらIE11では丸みのあるボーダーでうまく動作しません。誰もがこのための良い修正を知っていない限り、私はフィールドセットを使用することはできませんし、私自身のフィールドセットlookalikeソリューション(上記の例)を続行します。

+0

ので、期待されているもの...それについてもっと明確にすることができます – Geeky

+0

マークアップを追加してくださいとCSSも – Geeky

+0

期待された結果は私がすでに与えた例です。しかし、もし私がCSS3のボーダー半径、より少ないdiv、そしてより少ないバックグラウンド画像でそれを行うことができるのだろうかと思います。 – esims

答えて

3

それは単に、そのためのHTMLタグが

<div class="wrapper"> 
    <fieldset> 
    <legend>Label of the box:</legend> 
    Content 
    </fieldset> 
</div> 

フィールドセットが呼ばれていますあなたがここでそれについての詳細を読むことができます:

http://www.w3schools.com/tags/tag_fieldset.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

+0

私はフィールドセットについて知りませんでした。残念ながら、IE11では丸みのあるボーダーではうまく動作しません。私はこのためのいくつかの '解決策'を見てきました。例えば、[ここ](http://stackoverflow.com/questions/940191/rounded-corners-on-a-fieldset/17406564#17406564)、彼らは国境を隠さない凡例の下に、または上に示した例のように、背景画像には適していない、堅実な白い背景で境界線を隠すことができます。 – esims