2

私はこれを調べましたが、探していた答えがまったく見つかりませんでした。Web ページに複数の div があり、それらのすべてに 1px の黒一色の黒い境界線があります。特定の ID を持つ 2 つの div を除きます。10 px の別の色の境界線がありますが、それを 1px の黒一色の境界線で囲みたいと思います。助言がありますか？私のdivはすべてjavascriptで作成されています。

4

2 に答える 2

4

すべてのブラウザーで信頼できる唯一の方法は、追加のDIVコンテナーを使用し、内側と同様にそのコンテナーに境界線を適用することDIVです。

多くのブラウザーで機能するその他の方法については、 http://www.impressivewebs.com/multiple-borders-css/で Louis Lazaris が詳しく説明しています。

ラザリスの方法の概要

ボーダーとアウトライン

サポート: IE6/7 を除くすべて
注:outline周囲の要素の流れには影響しないため、他の要素がオーバーラップまたはアンダーラップします。

.one {  
    border: solid 6px #fff;  
    outline: solid 6px #888;      
}

疑似要素

注:min-height垂直方向の流動性を維持します。

.two {  
    border: solid 6px #fff;  
    position: relative;  
    z-index: 1;  
}  

.two:before {  
    content: "";  
    display: block;  
    position: absolute;  
    top: -12px;  
    left: -12px;  
    border: solid 6px #888;  
    width: 312px;  
    padding-bottom: 12px;  
    min-height: 100%;  
    z-index: 10;  
}

ボックス シャドウ

注:box-shadow周囲の要素の流れにも影響しません。

私は 2 つの影 (コンマ区切り) を使用しており、各影に適切なサイズを与えながら、オフセットとぼかしの設定をゼロに設定しました。一方が他方に重なっているため、2 番目の影は他方の 2 倍のサイズになります。重要な部分は、ぼかしの欠如と完全に不透明な色です。これにより、境界線のように、各影にまっすぐなエッジが与えられます。

.three {  
    box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;  
}

エクストラ <div>

サポート: すべてのブラウザー

.four {  
    border: solid 6px #888;  
    background: #fff;  
    width: 312px;  
    min-height: 312px;  
}  

.four div {  
    width: 300px;  
    min-height: 300px;  
    background: #222;  
    margin: 6px auto;  
    overflow: hidden;  
}

ボーダー画像

.five {  
    border-width: 12px;  
    -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;  
    -moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;  
    border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */  
}
于 2013-04-09T23:34:16.903 に答える
0

正確には二重の境界線ではありませんが、必要な効果を得ることができるボックスシャドウとして自由に境界線を指定できます。

于 2013-04-10T02:50:22.037 に答える