1

Twitter のメニューバーが丸みを帯びていることはご存知でしょう。どうすればいいですか（CSSで？）。また、すべてのメニュー項目に確実に行き渡るようにしたいと考えています。

4

5 に答える 5

3

これは、純粋な CSS として IE では機能しないことに注意してください。しかし、これを行う方法は次のとおりです。

http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

/* 4 rounded corners */
.all-four-rounded-corners {
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
}

記事が示すように、各コーナーを個別に行うこともできます。しかし、現時点では CSS 2 では、CSS 3 まで公式にサポートされている CSS メソッドではないため、IE でこれを行うことはできませmozん。webkitkhtml

于 2009-05-18T13:00:40.793 に答える
0

これは、IE を含むすべてのブラウザーで機能する巧妙なトリックです。また、画像は不要です。

次の html スニペットをコピーして貼り付け、html ファイルとして保存して試してみてください。

<head>
<style type="text/css">
<!--
#container {background: #cccccc;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #cccccc;}
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #cccccc;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #cccccc;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #cccccc;}
.content {padding: 10px;}
-->
</style>
</head>

<body>
<div id="container">
 <div class="roundtop">
   <div class="r1"></div>
   <div class="r2"></div>
   <div class="r3"></div>
   <div class="r4"></div>
 </div>
<div class="content">Your content goes here ..</div>
 <div class="roundbottom">
   <div class="r4"></div>
   <div class="r3"></div>
   <div class="r2"></div>
   <div class="r1"></div>
 </div>
</div>
</body>

何が起こっているのかをよりよく把握するために拡大されたスクリーンショットを次に示します。上の画像はブラウザーでの結果を示し、下の画像は div の色を変更した場合の外観を示しています。

角が丸い div の拡大スクリーンショット

幸運を！//マグナス

于 2009-05-18T17:06:51.437 に答える
0

要素の角を丸くしたいですか？これに対する私のアドバイスは、CSS ルールを使用することです。

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

マイナス面では、IE で角が丸くなることはありませんが、プラス面としては、頭が痛くなることはありません。クロス プラットフォームが必要な場合は、jQuery コーナーまたはインターネット上の無数のチュートリアルを参照してください。

于 2009-05-18T13:01:42.260 に答える