*

ウェッブ制作

ホーム >  Web制作 >  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系ブラウザへの対応。