*

ウェッブ制作

Width =px

ホーム > HTML・CSS > HTM5/CSS3 >
10.枠の内側に影 MENU 

10.css3 枠(ボックス)の内側に影を付ける Chap 5-6

学習書の「sample_a」(Chap5_1-6)を表示しソースコードを見て下さい。
1) Article Section 枠に影を付ける
article sectionの枠には、既に内側にグラデーションが入っている。その中に影を入れて浮き出たようなデザインになっている。

CSS記述
8~13行目は、枠内のグラデーション。
16行目は前章で付けた外側の影、17行目に「,」で区切り「inset」を入れて内側の影を表示。
14,15行目は、一世代前のWebkit系ブラウザへの対応。