ホームページのネタ帳

CSS3で出来ること

2016年9月17日

CSS3のborder-radiusを使った多段ボーダーテクニック。

【html】

1
<p class="sample_1">CSS3のborder-radiusを使った多段ボーダーテクニック。</p>

【css】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.sample_1 {
	width: 200px;
	margin: 20px auto 40px;
	padding: 15px;
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 
		0 0 0 2px #000,
		0 0 0 3px #999,
		0 0 0 9px #fa0,
		0 0 0 10px #666,
		0 0 0 16px #fd0,
		0 0 0 18px #000,
		0 2px 6px 18px rgba(0,0,0,0.5);
}

カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp