JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年06月 / 05月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>07月

アクセスランキング

[ジャンルランキング]
コンピュータ
385位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
50位
アクセスランキングを見る>>

CSS3を使ってみる...border-radius

昨日、先日紹介したIE9のプレビュー版第2版を使って、CSS3.0を試しに使ってみました。

今回は、色々なサイトでよく紹介されている、border-radiusを紹介します。
(余談ですけど、こういうのって、初めて使う単語でも数分間の間に何回も使っていると知らないうちに
綴りを覚えているんですよね~)

border-radius.png

なんか下のテーブルの下のセルがなんかずれているように見えますが・・・・・。
まあ細かいことは気にしないってことで。

border-radiusを使ってみた印象は、「とても簡単」という事です。
まあ当たり前のことなんですが、tableやtdに[Style="border-radius: 25px 25px 25px 25px;"]
と入力するだけなので・・・・・。

もちろん、これをFirefox3.63やIE8.0で開いても、↓の様になります。

radius by Firefox3.63

Google Chromeでは表示できるそうですが。


次回も、CSS3.0の機能を紹介していきたいと思います。




サンプルソースは長くなるので、「続きを読む」からお願いします。

more...

文字を小さくしていますが、コピー&ペーストをする程度なら
問題ない文字サイズのはずです。



<html>
<head>
<title>CSS3.0のテスト</title>
<style type="text/css">
.rad {
border-radius: 25px 25px 25px 25px;
}
td {
width: 200px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<br>
<table border="1" style="background-color:#ffffff;" width="400" height="100">
<tr>
<td class="rad">普通の丸い枠</td>
<td class="rad" style="background-color:#ddffff;">背景色を指定してみる</td>
</tr>
<tr>
<td class="rad" colspan="2">tableにradiusを指定していない場合</td>
</tr>
</table>
<br>
<table border="1" class="rad" width="400" height="100">
<tr>
<td>tdにradiusを指定しない場合</td>
<td class="rad">tdにradiusを指定した場合</td>
</tr>
<tr>
<td colspan="2" class="rad">tableにradiusを指定した場合</td>
</tr>
</table>
</body>
</html>



 


 
   CSS    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。