<div class="gra1">
グラデーションになります。グラデーションになります。グラデーションになります。
グラデーションになります。グラデーションになります。グラデーションになります。グラデーションになります。
グラデーションになります。グラデーションになります。グラデーションになります。グラデーションになります。
グラデーションになります。グラデーションになります。グラデーションになります。
グラデーションになります。グラデーションになります。グラデーションになります。
</div>

.gra1 {
background: -moz-linear-gradient(top, #057eff ,#d9ddeb);
background: -webkit-gradient(linear, left top, left bottom,from(#057eff), to(#d9ddeb));
}

-moz-linear-gradientでFirefox、
-webkit-gradientでGoogle Chrome、Safariでグラデーションが表示されます。
色、方向の指定の仕方は以下のようになります。

background: -moz-linear-gradient(位置指定(top,leftなど), 開始色 ,終了色);
background: -webkit-gradient(linear,開始位置, 終了位置, 開始色, 終了色);

なお、一からCSSを記述すると手間ですが、
web上でCSSを生成してくれるサイトがあり、そちらを利用するととても便利です。

CSS Corners
http://csscorners.com/

グラデーション、角丸のCSSを生成してくれます。
画像を使わず、簡単にボタンなどを作りたい時にも便利です。

<p class="kage">文字に影がつきます。</p>

 .kage {
text-shadow: 2px 2px 2px #888;
}

文字に影がつきます。

指定する値は順番に横方向からの距離、縦方向からの距離、
ぼかしの半径、影の色、と指定していきます。

 .kage2 {
text-shadow: 5px 0px 0px #800000;
font-size:20px;
color:#FF0000;
font-weight: bold;
}
.kage3 {
text-shadow: 0px -4px 0px #999;
font-size:20px;
color;#000080;
font-weight: bold;

}
.kage4 {
text-shadow: 1px 1px 30px #000080;
font-size:20px;
}

文字に影がつきます。

文字に影がつきます。

文字に影がつきます。

※なおIEではtext-shadowプロパティに対応していません。

<div class="kadomaru">
角丸ボックスです。角丸ボックスです。角丸ボックスです。
角丸ボックスです。角丸ボックスです。角丸ボックスです。
角丸ボックスです。角丸ボックスです。角丸ボックスです。
</div>

.kadomaru {
-moz-border-radius: 10px; /*Safari、Chrome対応 */
-webkit-border-radius: 10px;　/*Firefox対応 */
background-color:#DDD;
padding:10px;

-moz-border-radiusでSafari、Google Chrome。
-webkit-border-radiusでFirefoxにて角丸が表現されます。

※IEでは対応していないので、
IEで実現するにはJavaScript等を利用する必要があります。

また以下のように個別に角の半径を設定できます。

.kadomaru2{
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-radius:20px 20px 0px 0px;
background-color:#DDD;
padding:10px;

.sample1 {
margin:0 auto;
border:solid 1px #333;
width:400px;
}

(※IE6以下で中央揃えにする場合)

IEの6以下のバージョンで中央揃えにしたい場合、
margin:0 auto;が効かないので、text-align:center;を利用します。

.sample2 {
width:400px;
margin:0 auto;
text-align:center;
border:solid 1px #333;
}

.sample2 p {
text-align:left;
}

text-align:center;を使うと、テキストなどの内容も中央揃えになってしまうので、
中のコンテンツにtext-align:left;を適用させます。

.sample1 {
background-color:#FF0000;
}

.sample2 {
background-image: url(images/sky.jpg);
}

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

背景画像の場合は画像を、繰り返す・繰り返さないの指定ができます。

.sample3 {
background-image: url(images/sky.jpg);
background-repeat: repeat-x;
}

.sample4 {
background-image: url(images/sky.jpg);
background-repeat: repeat-y;
}

.sample5 {
background-image: url(images/sky.jpg);
background-repeat: no-repeat;
}

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

background-repeatで指定し、
repeat-xで横方向、repeat-yで縦方向に繰り返し、no-repeatで1回のみ表示します。
repeatもしくは何も指定しない場合は、縦・横に繰り返し続きます。

<ol>
<li>最初に</li>
<li>次に</li>
<li value="5">5番目</li>
<li>6番目</li>
</ol>

1. 最初に
2. 次に
5. 5番目
6. 6番目

上記例ではvalue=”5″と指定しているので、それ以降5、6と番号が変わっています。
マークがアルファベットの場合なども同じように指定していきます。

<ol type="A">
<li>最初に</li>
<li>次に</li>
<li value="5">5番目</li>
<li>6番目</li>
</ol>

1. 最初に
2. 次に
5. 5番目
6. 6番目

上記ではアルファベット順で5番目はEなので、E、Ｆというように続きます。

/*IE6以下に適用*/

* html p {
color:#FF000;
}

/*IE7のみに適用*/

*:first-child+html p {
color:#0000FF;
}

/*IE8のみに適用*/

html>/**/body  p {
color /*¥**/: 00FF00¥9;
font-size:18px¥9;
}

上から順にIE6以下、IE7のみ、IE8のみ適用となります。
IE8に関してはCSS-EBLOGさんのIE8だけに適用させるCSSハック
で詳しい説明がされています。

<p class="sample">紅葉画像です。</p>

.sample {
text-indent:-9999em;
background-image: url("../images/sample.gif");
background-repeat: no-repeat;
width:150px;
height:113px;
}

紅葉画像です。

ただし「画像置換」はデメリットのあるテクニックで、

• 印刷するときにデフォルトの状態では背景画像が印刷されない
• CSS表示かつ画像非表示だと情報が伝わらない
• 乱用しすぎるとペナルティの可能性も？

などのデメリットがあります。
画像置換を使う場合は、デメリットもある、
ということも頭において使用する必要があるかと思います。

<div>
<img src="sample.jpg" class="leftimg">
<p>サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。</p>
</div>
<div class="clear">回り込みを解除するにはclaer:both;を指定します。</div>

.leftimg {
float:left;
padding:0px 10px 0px 0px;
}
.clear {
clear:both;
}

サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。サンプルです。

上記例では画像のクラスにfloat:left;を指定することで、
画像を左に回りこませています。
またポイントなるのが回り込み解除させるため、
続く要素にclear:both;を指定すること。
この指定をしていないとレイアウト崩れの原因になります。

.sample {
border:solid 1px #FF0000;
}

サンプルです。サンプルです。

また枠線を上、下、左、右で個別に指定したい場合は、
それぞれborder-top,border-bottom,border-left,border-right
というように指定します。

.sample1 {
border-left:solid 2px #0000FF;
}

.sample2 {
border-bottom:dashed 1px #FF6600;
}

サンプルです。サンプルです。

サンプルです。サンプルです。

枠線の種類についてですが、ブラウザによって表示の仕方が違うものがあります。

特にgroove,ridge,inset,outsetに関してIEでは正しく表現されないので、
使用する場合には注意が必要です。
また、dotted,dashedに関してもIEとFirefoxなどとでは表示が少し異なるので、
どうしても同じ表現にしたい場合は、背景画像で指定したほうが良いかと思います。