web-dev-qa-db-ja.com

アウトラインを使用せずにCSSダブルボーダー（2色）？

Divの周りに2色の二重罫線を作成する最も簡単な方法は何だと思いますか？ボーダーとアウトラインを一緒に使用してみましたが、Firefoxで機能しましたが、アウトラインがIEで機能していないようです。これは一種の問題です。

これは私が持っていたものですが、アウトラインはIEで動作しません：アウトライン：2px solid＃36F; border：2px solid＃390;

ありがとう。

htmlcssborderpseudo-element
14
zProgrammer

擬似要素を使用して複数の境界線を追加し、元の境界線の周りに配置できます。余分なマークアップはありません。ブラウザー間の互換性、これはCSS 2.1以来です。 jsfiddleのデモを作成しました。..例として、境界線の色の間隔があります。絶対位置のピクセル数を変更することにより、閉じることができます。

.border
{
    border:2px solid #36F; 
    position:relative;
    z-index:10
}

.border:before 
{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border:2px solid #36F
}

http://jsfiddle.net/fvHJq/1/

38
albert

2番目の境界にボックスシャドウを使用します。

div.double-border {
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 0px 0px 1px #000;
    -moz-box-shadow: 0px 0px 0px 1px #000;
    box-shadow: 0px 0px 0px 1px #000;
}

この場合、box-shadowは、outlineのようにborder-radiusプロパティを無視しません

8
Vitali Protosovitski

2つのdivを使用する以外に方法がない場合のフォールバックとして使用できる非常に単純なソリューション。メインdiv、そしてそれをラップする空のdiv。

2
Nick Mitchinson
_.border{
  width: 200px;
  height: 200px;
  background: #f06d06;
  position: relative;
  border: 5px solid blue;  
  margin: 20px;
}
.border:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: green;
  z-index: -1;
}_
_<div class="border">
  
</div>_

値が指定されている場合は_.border_のクラス名を使用し、単一の境界線の場合は_border:2px solid #000_を使用します。コードサンプルの例の上で2番目の境界線をチェックアウトした場合は、値を指定して_.border:after_を試します

0
user8450943

ちょっとしたトリック;）

box-shadow: 
0 0 0 2px #000,
0 0 0 3px #000,
0 0 0 9px #fff,
0 0 0 10px #fff,
0 0 0 16px #000,
0 0 0 18px #000;
0
TheCrazyProfessor

この質問のためにパーティーに遅れましたが、私はこれをどこかに記録するべきだと思います。 LessやStylusのようなスケーラブル関数を作成して、任意の数の境界線を作成できます（スタイラスはこちら）。

abs(n)
    if n < 0
        (-1*n)
    else
        n

horizBorder(n, backgroundColor)
    $shadow = 0 0 0 0 transparent
    $sign = (n/abs(n))
    for $i in ($sign..n)
        /* offset-x | offset-y | blur-radius | spread-radius | color */
        $shadow = $shadow, 0 (2*$i - $sign)px 0 0 #000, 0 (2*$i)px 0 0 backgroundColor
    return $shadow

次に、

$background: #FFF // my background was white in this case and I wanted alternating black/white borders

.border-bottom
    box-shadow: horizBorder(5, $background)
.border-top
    box-shadow: horizBorder(-5, $background)
.border-top-and-bottom
    box-shadow: horizBorder(5, $background), horizBorder(-5, $background)
0
chas

ボックスシャドウを使用すると、さまざまな色の境界線を必要な数だけ作成できます。例えば：

#mydiv{
  height: 60px;
  width: 60px;
  box-shadow: inset 0 0 0 5px #00ff00, inset 0 0 0 10px #0000ff;
}

<div id="mydiv">&nbsp;</div>

https://jsfiddle.net/aruanoc/g5e5pzny

0
aruanoc