CSS3のグラデーション・角丸・影

2011.02.14

それぞれの記載方法。
必要な要素に追加してください。

それにしてももうちょっとスマートにならんもんか、、、

※IE6はもはや捨ててます。

/* グラデーション */ /* グラデーション */
background: -webkit-gradient(linear, left top, left bottom, from(#3d74e5), to(#2655b4));
background: -moz-linear-gradient(top, #3d74e5, #2655b4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3d74e5, endColorstr=#2655b4);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3d74e5, endColorstr=#2655b4)";
border:1px solid #555;
border-right:2px solid #555;
border-bottom:2px solid #555;

/* 角丸 */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url(js/border-radius.htc);

/* 影 */
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
box-shadow: 2px 2px 3px #999;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2', MakeShadow='true', ShadowOpacity='0.60')

 

角丸のhtcファイルはこちら

コメントは受け付けていません。

同じカテゴリーの関連記事
CSS3カテゴリの最新記事