6.css3 枠(ボックス)やナビメニューの角を丸く Chap 5-1,2
学習書の「sample_a」(Chap-5_1-2)を表示しソースコードを見て下さい。
1) 枠の角丸
CSSの指定だけで角丸が作成出来る。
枠・角丸のcss記述
1 2 3 4 |
article header {border: solid 1px #aaaaaa; margin: 20px 0 10px; padding: 18px; border-radius: 5px;} |
2) ナビメニューの角丸
CSSの記述だけで角丸が表示出来るが、メニューは枠と違って「ul」のリストを使っているので、左端部分と右端部分に分けて指定するので、ちょっと面倒。
CSS記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
nav ul {font-size: 0.75em; margin-top: 0; margin-bottom: 10px; margin-left: 0; padding-left: 0; height: 30px; background-color: #333333; border-radius: 5px;} nav ul li {list-style-type: none; float: left} nav ul li a {display: block; width: 120px; line-height: 30px; text-decoration: none; text-align: center; color: #ffffff; border-right: solid 1px #ffffff} nav ul li a:hover{ background-color: #017acd;} nav ul li:first-of-type a:hover {border-radius: 5px 0 0 5px;} |
3) 四隅を個別に指定する場合
border-radius: 左上 右上 右下 左下 ・左上から時計回り