web-dev-qa-db-ja.com

2色の境界線

クライアントは、エンボス加工の外観に2色の境界線が必要です。 1つの要素でこれを行うことはできますか？私は、個々の境界線を持つ2つのDOM要素の積み重ねを避けたいと思っていました。

cssborder
90
DrANoel

はい：outlineプロパティを使用します。境界線の外側の2番目の境界線として機能します。注意してください、それはマージン、パディング、ドロップシャドウと不安定な方法で相互作用することができます。一部のブラウザでは、ブラウザ固有のプレフィックスも使用する必要があります。 -webkit-outlineなどを確実に取得するために（特にWebKitはこれを必要としませんが）。

これは、特定のブラウザのアウトラインを破棄する場合にも役立ちます（アウトラインをドロップシャドウと組み合わせたい場合、WebKitではアウトラインはシャドウの内側にあり、FireFoxでは外では、-moz-outline: 0は、美しいCSSドロップシャドウの周りに厄介な線が入らないようにするのに役立ちます。

.someclass {
  border: 1px solid blue;
  outline: 1px solid darkblue;
}

編集：outlineはIE <8ではうまく動かないと言っている人がいます。これは事実ですが、 IE <8をサポートすることは、本当にすべきことではありません。

135
Williham Totland

これは非常に可能です。ちょっとしたCSSトリックが必要です！

jsFiddle

<div class="border">
    Hi I have two border colors<br />
    I am also Fluid
</div>

div.border {
    border: 1px solid #000;
    position: relative;
}
div.border:before {
    position: absolute; display: block; content: '';
    border: 1px solid red;
    height: 100%; width: 100%;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

それはあなたが探しているものですか？

62
rkingon

別の方法は、box-shadowを使用することです。

#mybox {
box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-moz-box-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
-webkit-shadow:
  0 0 0 1px #CCC,
  0 0 0 2px #888,
  0 0 0 3px #444,
  0 0 0 4px #000;
}

<div id="mybox">ABC</div>

例 を参照してください。

33
livibetter

CSS仕様内で利用可能なさまざまな境界線スタイルを試しましたか？あなたのニーズに合うかもしれない2つの境界線スタイルがすでにあります：

border-style: ridge;

または

border-style: groove;
18
Joel Glovier

アウトラインは良好ですが、境界線を周囲全体に配置したい場合のみです。

あなたが使用できる底部または上部のみに作りたい場合

<style>

  #border-top {
  border-top: 1px solid  #ccc;
  box-shadow: inset 0 1px 0 #fff;
}
</style>

<p id="border-top">This is my content</p>

そして下の場合：

<style>

      #border-bottom {
      border-top: 1px solid  #ccc;
      box-shadow: 0 1px 0 #fff;
    }
</style>

    <p id="border-bottom">This is my content</p>

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

14
Cotovanu Andrei

サポートされていない問題のあるアウトラインを使用する代わりに、

  • 背景色+内側の境界線のパディング
  • 外側の境界線。

例：

HTML：

<img src="http://cdn3.thumbs.common.smcloud.net/common/8/6/s/863444wpPN.jpg/r-0,500-n-863444wpPN.jpg" alt="malkovich" />

CSS：

img {
    padding: 1px;
    background: yellow;
    border:1px solid black;
}

TEST（JSFiddle）：http://jsfiddle.net/68gb7/

6
Karol Horosin

「エンボス加工」によって、2つの異なる色で互いを囲む2つの境界線を意味する場合、outlineプロパティ（outline-left、outline-right....）がありますが、 IEファミリー（つまり、IE6と7はそれをまったくサポートしていません）。 2つの境界線が必要な場合、2番目のラッパー要素が最適です。

同じ境界線で2色を使用する場合。使用する.

border-right: 1px white solid;
border-left: 1px black solid;
border-top: 1px black solid;
border-bottom: 1px white solid;

これには特別なborder-stylesもあります（ridge、outset、およびinset）が、私の経験ではブラウザーによって異なる傾向があります。

4
Pekka 웃