0

私は答えをグーグルで探し回ろうとしましたが、残念ながら運がありませんでした。何らかの理由で、次のCSSは境界線の半径を表示しません。

      .mainContent
      {
          margin-right: auto;
          margin-left: auto;

          background: white;
          outline-color: black;
          outline-width: thin;
          outline-style: solid;
          border-radius: 5px;
          height: 100px;
          width: 500px;
     }

アウトラインチャンクを削除すると、問題なく機能します。アウトラインを使用すると、アウトラインはあるが角が丸くないDIVがあります。私はこれをChrome（webkit）でテストしています。どんな助けでも大歓迎です！

4

3 に答える 3

0

使ってみませんか

.mainContent
{
     margin: 0 auto;
     background: white;
     border: 1px solid #000;
     border-radius: 5px;
     height: 100px;
     width: 500px;
}
于 2012-09-03T16:56:13.200 に答える
0

border-radiusborderアウトラインではなく、のために動作します！

これは、境界線を使用する必要があることを意味します。アウトラインは実際には装飾的な用途ではなく、:focus州などのためのものです。

境界線を追加するときに幅が大きくなることが気になる場合は、次を使用します。

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

物事をもう少し意味のあるものにするために。oldIEを機能させるためのポリフィルがあります。

（詳細については、 http：//paulirish.com/2012/box-sizing-border-box-ftw/をお読みください）

于 2012-09-03T16:58:18.530 に答える
0

そうなるでしょうがoutline-radius、CSSにはそのようなプロパティは（まだ）ありません。

曲線を描く異なる色の2つの境界線が必要な場合は、要素をネストするか、:before疑似要素を使用してCSSのトリックを実行できます。

div {
    border: 4px solid #000; 
    border-radius: 12px; 
    width: 100px; 
    height: 100px;
    margin: 10px;
}
div:before {
    width:100px;
    height:100px;
    content:'';
    display:block;
    border: 4px solid #aaa;
    margin: -8px 0 0 -8px;
    padding: 4px;
    border-radius: 16px;
}

出来上がり！

ここに画像の説明を入力してください </ p>

http://jsfiddle.net/35Tjn/

于 2012-09-03T17:00:46.767 に答える