【四角の枠線を角丸にする方法】
●四方全て角丸にする方法
※以下の青枠のことを説明します。
border-radius: 20px;
border: 3px green solid; /* 枠線の装飾 */
background-color: #ccffcc; /* 背景色 */
}
↑ たったこれだけ!
※ブラウザで分けたいとき※
div.kadomaru {
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari,Chrome */
border-radius: 20px; /* CSS3 */
ついでに…
●上側の角だけを丸くする方法
div.kadomaru {
/* ▼CSS3 */
border-top-left-radius: 20px; /* 左上 */
border-top-right-radius: 20px; /* 右上 */
/* ▼Safari,Chrome */
-webkit-border-top-left-radius: 20px; /* 左上 */
-webkit-border-top-right-radius: 20px; /* 右上 */
/* ▼Firefox */
-moz-border-radius-topleft: 20px; /* 左上 */
-moz-border-radius-topright: 20px; /* 右上 */
/* ▼共通装飾 */
border: 3px green solid; /* 枠線の装飾 */
background-color: #ccffcc; /* 背景色 */
}
すっごい簡単じゃないですか?ね?ね?(笑)
ちょっとしたことを知っているだけで、ブラウザの表示が
ものすごく軽量化されるのです。
軽量化される→Googleの評価があがるということなので、
是非とも参考にしてみてください^^
ご購読の皆様、右下からブログ登録してもらえると嬉しいです♪
(迷惑メールに入ってしまうこともあるので、フォルダチェックお願いします。) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光を考えている方は絶対必見!
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━