11

異なる色の2つの境界線、および境界線間のスペースに次のコードを使用しています。outline-offset境界線の間のスペースにプロパティを使用しています。ただし、IEではサポートされていません（IE9でもサポートされていません）。HTMLに別のdivを追加せずに、IEでも機能する代替ソリューションはありますか？

HTML：

<div class="box"></div>

CSS：

.box{
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
    outline:2px solid red;
    outline-offset: 2px;    
}

高さと幅は固定されていません。例として使用しました。

JSFiddle： http: //jsfiddle.net/xyXKa/

4

4 に答える 4

19

ここに2つの解決策があります。1つ目はIE8+と互換性があり、を利用しpseudoelementsます。こちらのJSFiddleでご覧ください。

HTML：

<div class="box"></div>

CSS：

.box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
}
.box:after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    display: block;
    width: 108px;
    height: 108px;
    border: 2px solid red;
}

私が持っている2番目のアイデアは、非セマンティックソリューションですが、IE6+をサポートします。こちらのJSFiddleでご覧ください。

HTML：

<div class="outer-box"><div class="inner-box"></div></div>

CSS：

.outer-box {
    width: 104px;
    height: 104px;
    margin: 100px;
    border: 2px solid red;
    padding: 2px;
}
.inner-box {
    width: 100px;
    height: 100px;
    border: 2px solid green;
}

おっと、あなたが1つだけ残すように要求したのを見ましたdiv。さて、その最初のソリューションはそれらの要件に適合します！

于 2012-10-29T02:52:32.413 に答える
5

さらにいくつかの解決策。私はそれらをうまく使用しました：

1.1。

.box {
outline:2px solid green;
border:2px solid transparent;
box-shadow: 0 0 0 2px red inset;
}

このソリューションの制限：「outline」プロパティは「border-radius」プロパティを無視します。

2.2。

.box {
border: 2px solid green;
box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px red inset;
}

このソリューションの制限：赤いボックスシャドウが透けて見えるため、赤と緑の境界線の間のスペースを透明にすることはできません。したがって、必要な単色は、＃fffに設定しました。

于 2013-05-20T14:08:47.243 に答える
0

この目的に向けた他の解決策に関する私の問題：

「outline-offset」はIEと互換性がありません。pseudoelementsメソッドには、絶対位置とピクセル比が必要です（レスポンシブデザインには適していません）。はめ込みボックス-影は画像の上に表示されません。

IE互換の方法で画像をレスポンシブにフレーム化するために使用した修正は次のとおりです。

.container img { 
        border:2px solid white;
        outline:4px solid red;
        background-color: green;
        padding: 2px;
}

「outline」は外側の境界線を定義し、「border」はその間のスペースを定義しますが、内側の境界線は実際には背景色であり、パディングによって幅が決まります。

于 2013-09-07T14:48:57.597 に答える
0

::focus疑似クラスをスタイリングしている場合、これらのメソッドはコンテナ要素::afterに対してのみ有効であるため、または::before疑似クラスを使用する余裕はありません（詳細については、 W3C仕様を参照してください）。

そのオフセット効果を放つた​​めのクロスブラウザソリューションはbox-sizing、、、borderおよびを使用することpaddingです。

パディングとボーダー幅の値を無効にして交互に変更するだけです。

デフォルト/基本スタイル：

input[type="text"] {
  ...
  padding:10px;
  border:1px solid grey;
}

疑似クラススタイル：

input[type="text"]:focus {
  padding:8px;
  border:3px solid red;
}
于 2017-08-18T12:21:05.503 に答える