よく利用するのに思わず調べてしまうCSSのメモ

自身のコピペ用です。

CSS3

テキストの影効果

text-shadow: 1px 1px #ddd;

ボックスの影効果

-moz-box-shadow:0px 0px 10px #ddd;
-webkit-box-shadow:0px 0px 10px #ddd;
box-shadow:0px 0px 10px #ddd;

ボーダーの角丸

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
// 上から、[CSS3]、[Safari,Google Chrome]、[Firefox]

グラデーションは・・画像使うかなぁという感じでなし。

CSS3未満

ボーダーの線種。

border: 1px dotted #ddd;

solid  // 1本線
double  // 2本線
dashed  // 破線
dotted  // 点線

位置指定

position: absolute;

relative  // 相対位置
absolute  // 絶対位置
fixed  // スクロールしても絶対位置固定

要素指定。サイドバーのブロック要素リンク等で使用

display: block

block  // ブロックレベルで表示
inline  // インラインレベルで表示

透過の設定。画像のキャプチャ等で使用

filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
// 主要ブラウザに全対応。

テキストを隠して画像で表示させる。
SEOスパムと一時期話題になったが画像の代替テキスト程度であれば何ら問題なし。（google公表済み）

text-indent: -9999px;

回り込み解除

clear: both;