css-1 cssで角丸ボタン等

※IE8以下など表現できないブラウザもあります。

cssで角丸

全体が同じ割合で角丸ならborder-radius:

ボタン

.btn {
	border: 2px solid #09C;
	text-decoration: none;
	padding: 5px;
	color: #FFF;
	background-color: #09F;
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px;

}

各角丸の半径を調整したい時はleft-radiusなどで指定

ボタン

.demo	{
	border: 2px solid #09C;
	text-decoration: none;
	padding: 5px;
	border-radius: 10px 10px 0px 0px;        /* CSS3 */
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;    /* Firefox */
	-moz-border-radius-topright: 10px;    /* Firefox */
	background-color: #FF3;
}

左から左上、右上、左下、右下

cssでグラデーション

線形グラデーション

.gra	{
	/* Firefox */
background: -moz-linear-gradient(top center, #fff 0%, #999 100%);
/* Chrom と Safari */
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#999));
/* 共通 */
background: linear-gradient(top center, #fff 0%, #999 100%);
}

書き方

/* Firefox */
background: -moz-linear-gradient(開始位置, 色 位置, 色 位置, ･･･);

/* Chrom と Safari */
background: -webkit-gradient(linear, 開始位置, 終了位置, from(開始位置の色), to(終了位置の色));

/* 共通 */
background: linear-gradient(開始位置, 色 位置, 色　位置, ･･･);

dreamweaverにはいろんな色、方向を追加する機能はないようなのでジェネレーターを使います。

※海外サイトが多いので中国からはつながりにくいです。

www.css3.me/…

ジェネレーターでグラデーション

.gra2	
{
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
	-moz-box-shadow: 0px 0px 13px #000000;
	-webkit-box-shadow: 0px 0px 13px #000000;
	box-shadow: 0px 0px 13px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00ff3e', endColorstr = '#0000ff');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00ff3e', endColorstr = '#0000ff')";
	/*Element must have a height (not auto)*/
/*All filters must be placed together*/
	background-image: -moz-linear-gradient(top, #00ff3e, #0000ff);
	background-image: -ms-linear-gradient(top, #00ff3e, #0000ff);
	background-image: -o-linear-gradient(top, #00ff3e, #0000ff);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#00ff3e), to(#0000ff));
	background-image: -webkit-linear-gradient(top, #00ff3e, #0000ff);
	background-image: linear-gradient(top, #00ff3e, #0000ff);
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	padding: 5px;/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
}

box-shadownなんかも出てきました。css3は色々できるのでいろいろ試してください。