画像利用なし、CSS3利用のみでの、グラデーション・角丸、ボックスシャドウ、テキストシャドウを利用したChrome風のデザイン例です。残念ながらIE9以下には対応していません。
HTML
タイトル
内容・テキスト等
内容・テキスト等
内容・テキスト等
内容・テキスト等
内容・テキスト等
CSS
.box-head {
padding: 13px 0 18px 13px;
border: 1px solid #3690F0;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 0 #0073ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 8px 0px #fff;
-moz-box-shadow: inset 0px 0px 8px 0px #fff;
box-shadow: inset 0px 0px 8px 0px #fff;
background: -moz-linear-gradient(bottom, #3690F0, #73B8F2);
background: -webkit-gradient(linear, center bottom, center top, from(#3690F0), to(#73B8F2));
}
.box-body {
margin-top: -28px;
padding: 10px 10px;
border: 1px solid #7DB5DE;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}