0

境界線に複数の行を配置したいページがあります。

h2.bord
{
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
}

これを使用すると、テキストの周囲に境界線が表示されます。しかし、この境界線に 1 行以上ホームを置きたいと思っています。

ヘルプ？

4

4 に答える 4

3

境界線のある div を使用し、その中にこの h2 境界線を配置します

于 2012-05-04T08:17:35.730 に答える
1

border-style:double;あなたが探しているものは何ですか？

別の方法として、複数の境界線または複数のスタイルの境界線が必要な場合は、複数のネストされた div を使用できます。

<style>
  .inset-border { border: 4px inset Black; }
  .double-border { border: 4px double Black; }
</style>

<div class="inset-border">
  <div class="double-border">
    <h2>content</h2>
  </div>
</div>
于 2012-05-04T08:18:24.307 に答える
0

標準の CSS ボーダーは、せいぜい二重線のみをサポートします (@Jaimal の回答を参照)。

それ以上必要な場合は、次のことを試す必要があります。

  • 追加のマークアップ: つまり、それぞれ独自の境界線を持つ、より多くのコンテナー要素。
  • とを使用:beforeして:after、 を与えますborder。正しく行うと、元のボックスを包み込み、余分な境界線が得られるはずです. IE6 または IE7 では動作しません。
  • outlineに加えてプロパティを使用しますborder。Outline は Border と非常によく似た働きをしますが、若干の違いがあります。ただし、 に加えて使用すると、3 番目の境界ボックスを提供できますborder-style:double;。古いブラウザでは動作しない可能性があることに注意してください。
  • CSS3 border-image. これを使用すると、境界線に独自のグラフィックを定義できます。つまり、好きなだけ線を定義できます。注: これは古いブラウザーでは確実に機能しません。CSS に追加されたのはごく最近のことです。
  • background-imageそれを偽造するために使用します。ボックスのサイズがわかっている場合は、これが最も簡単でクロス ブラウザーとの互換性が最も高い方法です。ただし、ボックスのサイズが事前にわからない場合はあまり役に立ちません。

それが役立つことを願っています。

于 2012-05-04T08:27:46.513 に答える
0

3D/「隆起」タイプの境界線を実現しようとしていると思います。その場合は、単純にborder-style: groove: JS Fiddle demoを使用できます。

::afterただし、可能であれば、疑似要素とoutsetボーダースタイルを使用できます。

h2.bord {
    border-style:inset;
    border-width:8px;
    border-color:green;
    background-color:black;
    color:white;
    text-align:center;
    position: relative; /* in order to position the pseudo element relative to the parent */
    margin: 8px; /* to move the edges of the element from the container element in order to see the borders of the pseudo-element */
}

h2.bord::after {
    content: '';
    position: absolute;
    top: -16px;
    left:-16px;
    right: -16px;
    bottom: -16px;
    border: 8px outset green;
}

<a href="http://jsfiddle.net/davidThomas/RuQGU/" rel="nofollow">JS Fiddle のデモ。

于 2012-05-04T08:29:12.273 に答える