クリエイターハートブログ

クリエイターハートブログはものづくりの心からおくるブログです。

CSSで角丸・サークルを実現!

   

みなさんこんにちわ。今日からお仕事憂鬱私です。

今回はCSSで要素の角丸・サークルを実現する方法を勉強メモとして記述したいと思います。

目次

  • 使用するCSSプロパティ
  • 各プロパティの簡単な説明
  • 完全な円(サークル状)にする指定方法

使用するCSSプロパティ

角丸・サークルを実現するにはborder-radiusというCSSプロパティを使用します。

各プロパティの簡単な説明

-webkit-border-radius: ○px;
でSafari、Google Chrome用の角丸指定。
-moz-border-radius: ○px;

でFirefowx用の指定。
border-radius: ○px;

はCSS3草案となっています。

完全な円(サークル状)にする指定方法

ちなみに上記のコードは当ブログで採用しているプロパティですが、100px以上にすることで角を完全に円にすることができるようです。

css_kakumaru

私の場合、WordPressのStinger3というテンプレートを使用していますが、各記事のサムネイル「.sumbox img」要素に対して角丸CSSを適用させてサークル状にしてあります。

まだまだ勉強することがありますが追記という形で更新したいと思います。

お疲れ様でした。ではまた。

 

 - CSS , , ,







Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

関連記事はありませんでした