3

赤い円を作成する次の CSS があります (JS フィドルはこちら: http://jsfiddle.net/47BDT/ )

<div class="shadow-circle"></div>

.shadow-circle{
    width:100px;
    height:100px;
    border-radius: 50%;
    border: 6px solid red;
    -moz-background-clip: content;     /* Firefox 3.6 */
    -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
    background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

円の周りに 1px の青い境界線 (円形の境界線も) を追加したい。どうすればいいですか？ソリューションは IE8 で動作する必要があります。

4

4 に答える 4

9

を使用しbox-shadowて、円の周りに二次境界線を追加できます。それとは別に、はサポートborder-radiusされていないため、IE8 でも機能しません。古い時代遅れのブラウザーでサポートを得るには、ポリフィルが必要です。

jsFidle の例

CSS

.shadow-circle{
    width:100px;
    height:100px;
    border: 6px solid red;
    box-shadow: 0px 0px 0px 10px blue;
    border-radius: 50%;
}

また、box-shadow IE8 にも対応していません。

于 2013-11-12T17:28:39.580 に答える
4

JoshC の方法がおそらく最善だと思いますが、別の方法は疑似要素を使用することです。

.shadow-circle:after {
  content: ' ';
  border-radius: 50%;
  border: 6px solid blue;
  width: 110px;
  height: 110px;
  display: block;
  position: relative;
  top: -10px;
  left: -10px;
}

これがデモです。

于 2013-11-12T17:30:32.127 に答える
0

IE7 および IE8 でこの投稿 Box shadow が表示された場合

この応答を見つけることができます。これは便利です。

古いバージョンの IE で一部の CSS3 プロパティをエミュレートする CSS3 PIE を使用します。

box-shadow をサポートしています (inset キーワードを除く)。

于 2013-11-12T18:02:21.243 に答える
0

を追加しbox-shadowます。ぼかしを0(プロパティの 3 番目の部分) のままにし、スプレッドを に設定し1pxます。

.shadow-circle{
    width:100px;
    height:100px;
    border-radius: 50%;
    border: 6px solid red;
    box-shadow: 0 0 0 1px blue;
}
于 2013-11-12T17:33:08.460 に答える