ビデオの周囲に境界線があり、境界線にタイトルがあるデザインを html 化しようとしています。これを達成するための完璧な方法は、fieldset と legand タグを使用することですが、スタイリングに慣れる必要があります。ie7+、firefox、および chrome との互換性を維持しながら、これを達成する方法を知っている人はいますか??
名声 1:
フレーム 2:
ビデオの周囲に境界線があり、境界線にタイトルがあるデザインを html 化しようとしています。これを達成するための完璧な方法は、fieldset と legand タグを使用することですが、スタイリングに慣れる必要があります。ie7+、firefox、および chrome との互換性を維持しながら、これを達成する方法を知っている人はいますか??
名声 1:
フレーム 2:
このようなことができます - DEMO
HTML
<div class="wrapper">
<div class="content">
<h2> Some lorem ipsum text title </h2>
</div>
</div>
CSS
.wrapper {
margin: 25px;
background: #000;
height: 300px;
padding: 5%;
}
.content {
border: 1px solid #fff;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
h2 {
color: yellow;
font: bold 16px sans-serif;
display: inline-block;
padding: 0 25px;
position: relative;
top: -12px;
background: #000;
}