【緊急!!!】 カニが大安売り!!!!

おすすめ! レンタルサーバ

VPSサーバ 最強!!!!!

Webショップ開くならここかな!

おすすめ!スタンダードなレンタルサーバ

ここもお勧め!費用×仕様 最高!

女の子でも簡単!初心者向けレンタルサーバ

企業向け 堅い&しっかりレンタルサーバ

Recent Comment

Recent Trackback

スポンサーサイト

一定期間更新がないため広告を表示しています

  • 2010.10.20 Wednesday
  • -
  • -
  • -
  • -
  • -
  • by スポンサードリンク

CSS3でborderのradius(角丸)

CSS3というのがそろそろブラウザで実装されるとのこと
いろいろ調べてみたらborderの角丸が今のところ使えそうだなぁ

ためしに・・・
(注)画像は一切使っていません

FireFox3とかSafariの新しいバージョンだと
この枠が角丸で見れるはず
IEは7でもダメ
(他のブラウザの情報求む)


ソースはこんな感じ
<div style="padding:20px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#fdb;
border:1px solid #730;">


border-radius ってやつと
-moz とか -webkit とかがミソだそうな


こんなこともできる
FireFox3以上は右上が角丸
GoogleCromeは左下が角丸

<div style="padding:20px;
border-radius-topright:15px;
border-bottom-left-radius:15px;
-moz-border-radius-topright:15px;
-moz-border-bottom-left-radius:15px;
-webkit-border-radius-topright:15px;
-webkit-border-bottom-left-radius:15px;
background-color:#ddf;
border:1px solid #007;">



ちょっと大変だけど、こんなボタンもできちゃうね

ボタン

CSSソースは長くなったので外です(^^




# 10/20 追記
GoogleCromeでradiusが効かない件
どの角かを指定する場合はソースの書き方が2種類あるみたい
詳しくは記事内の赤字の部分
統一してくれよ・・・

最後のボタンは面倒なのでやめた

スポンサーサイト

  • 2010.10.20 Wednesday
  • -
  • -
  • -
  • -
  • -
  • by スポンサードリンク

コメント
google クロームだと1番目は、しっかりラウンドされていますが、2番目3番目は、角ばっていますね。

各ブラウザでの互換をはやく望みたいものです。
じゅん吉さん
ども 
ほほぅ クロームは微妙なんですね
  • へっぽこ
  • 2008/10/16 7:59 PM
コメントする








   
この記事のトラックバックURL
トラックバック