Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

CSS(CSS3)だけで円丸を表示する設定

28.12.12 04:21 | コメント(0)

CSS3(スタイルシート)で円丸を設定

今までのCSS(スタイルシート)では、角丸を画像などを配置していましたが、CSS3になり、スタイルシートで角丸を設定出来るようになりました。
CSS(CSS3)だけで角を丸くする設定でご紹介した角丸の設定方法の応用で円丸のご紹介いたします。

円丸サンプル

注意!:IE、Safari、GoogleChrome、Firefox 各ブラウザごとに設定コードは異なります。

【CSS3コード】
.maru {
  width:100px;
  height:100px;
  padding:10px;
  border: 2px solid #83d32d;
  border-radius: 100px; /*IE*/
  -webkit-border-radius: 100px; /*Safari,GoogleChrome*/
  -moz-border-radius: 100px; /*Firefox*/
}
カテゴリ:CSS3, HTML5 + CSS3の基礎, WEB屋になる為の知識と技術
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP