17

divの周りに2色の二重境界線を作成する最も簡単な方法は何だと思いますか？ボーダーとアウトラインを一緒に使ってみましたが、Firefoxでは動作しましたが、IEではアウトラインが動作しないようで、それは一種の問題です。これについて行くための良い方法はありますか？

これは私が持っていたものですが、アウトラインはIEでは機能しません。outline：2px solid＃36F; ボーダー：2pxソリッド＃390;

ありがとう。

4

7 に答える 7

43

疑似要素を使用して複数の境界線を追加し、それらを元の境界線の周りに配置できます。余分なマークアップはありません。クロスブラウザー互換で、これは 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/

于 2013-02-06T18:05:42.973 に答える
8

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 プロパティを無視しません。

于 2015-08-18T14:07:59.427 に答える
2

2つのdivを使用する以外に何もない場合に、フォールバックとして使用できる非常に単純なソリューション。メインのdivと、それをラップするだけの空のdivで、2番目の境界線を設定するために使用できます。

于 2013-02-06T17:52:39.343 に答える