ナビゲーション メニューに 1 つの丸い (右下) コーナーを作成しようとしています。" "というラベルの付いた ul ID があり、" main-nav
" というラベルの付いた li クラスを作成しましたround
。この li クラスを Music リンクに追加して角を丸くしましたが、何も起こりませんでした。
ここにフィドルがあります// http://jsfiddle.net/2qRLU/3/
ナビゲーション メニューに 1 つの丸い (右下) コーナーを作成しようとしています。" "というラベルの付いた ul ID があり、" main-nav
" というラベルの付いた li クラスを作成しましたround
。この li クラスを Music リンクに追加して角を丸くしましたが、何も起こりませんでした。
ここにフィドルがあります// http://jsfiddle.net/2qRLU/3/
これは.round li
、「ラウンド」クラスの要素内にネストされたリスト項目をターゲットにしようとします。
li.round
これは、クラス「ラウンド」を持つリスト項目を対象としています。
スペースは重要であることに注意してください。li .round
これは、「ラウンド」クラスを持つリスト項目の子をターゲットにするため、書くのは間違っています。
コーナーを個別にスタイルしたい場合は、より具体的なバージョンを使用できます。
border-top-left-radius:5px;
border-top-right-radius:10px;
border-bottom-left-radius:15px;
border-bottom-right-radius:20px;
さまざまなタイプを示すためにここですべてのスタイルを設定しましたが、実際にはおそらく 1 つのコーナーのスタイルを設定する必要があるため、右下のコーナーのみを湾曲させたフィドルのバージョンを次に示します: http://jsfiddle.net/2qRLU /6/
また、補足として、古いバージョンのブラウザをサポートする必要がない限り、すべてのベンダー プレフィックスなしで border-radius を記述するだけで十分安全です。ブラウザーは、border-radius のベンダー プレフィックスをしばらく必要としませんでした。
ここでブラウザのプレフィックスなしでテストできます: http://jsfiddle.net/2qRLU/5/