7.css3 枠(ボックス)の背景をグラデーション Chap 5-3
学習書の「sample_a」(Chap5_1-3)を表示しソースコードを見て下さい。
枠の背景をグラデーション
CSSの指定だけでグラデーションが作成出来る。
枠・グラデーションのcss記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
article section { clear: both; border: solid 1px #aaaaaa; margin: 20px 0 10px; padding: 18px; border-radius: 5px; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfdfdf)); background: -webkit-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -moz-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -o-linear-gradient(#ffffff 0%, #dfdfdf 100%); background: -ms-linear-gradient(#ffffff 0%, #dfdfdf 100%); -webkit-box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset; box-shadow: 0px 2px 3px #cccccc, 0px 0px 4px 3px #ffffff inset} |
Internet Explorer 9 以下に対応
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- [if lt IE 10]> <style> nav ul {filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777777', endColorstr='#333333'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777777', endColorstr='#333333')"} article section {filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#dfdfdf'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#dfdfdf')"} </style> <![endif]--> |