59
■ ボーダー（枠の変形２） ■ background-clip
:画像を枠の背景に指定する時の範囲を指定できる。
属性の種類
border-box
：
ボーダーを含む範囲を画像で埋める。
padding-box
：
ボーダー外周からpaddingを計算し、
その内側の範囲を画像で埋める。
content-box
：
文章エリア等コンテンツの範囲のみ画像で埋める。
60
１ <script src="modernizr-1.6.min.js"></script>
２ <script>
3 Modernizr.addTest('backgroundclip',function(){
4 var div = document.createElement('div');
5
6 if ('backgroundClip' in div.style) return true;
7
8 'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
9 if (val+'BackgroundClip' in div.style) return true;
10 });
11 });
12 </script>
■ 背景画像のサイズ ■ background-size
:画像を枠の背景に指定する時の範囲やサイズを指定できる。
属性の種類
・auto 自動的に算出される（初期値）
・contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
・cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように画像を拡大縮小する
・X軸Y軸を（）内にpxで指定する（背景画像の幅・高さを指定する）
・X軸Y軸を（）内に背景領域に対する背景画像の幅・高さのパーセンテージを指定する
CSSの記述
div { width:400px; height:150px; padding:25px; margin:auto;
border:solid 8px #000000;
background-image:url(border.jpg);
background-size:contain; }
HTML記述
<div><h1>このエリアの角が丸くなります。</h1></div>
61
■ 背景や文字などを透過させる ■ opacity
:背景の画像・色などを半透明に透過させる記述になります。 Opacityの値は、初期値で１ 完全に透明が０ なので、０．１～０．９までの間で透明度を決めます。
記述例
■ 枠にシャドーを掛ける ■ box-shadow
:枠組みのboxに、シャドウを入れるCSSです。値の部分に、数字を入れていきますが、その記述の仕方が x軸の位置（px） y軸の位置（px） ぼかしの範囲（px） 広がり範囲(px) シャドウの色 inset(有無) で指定していきます。
記述例
CSSの記述
div { width:400px; height:150px; background:#00cc33; padding:25px; margin:auto;
opacity: 0.5; /*＊これはWeb-kitも含む一般的な書式です。*/
-moz-opacity: 0.5;: /* firefox用 */
filter:alpha(opacity=50); /* IE用 */ }
HTML記述
<div><h1>このエリアの背景が半透明になります。</h1></div>
CSSの記述
div { width:400px; height:150px; background:#ffff00; padding:25px; margin:auto;
box-shadow: 10px 10px 15px #000000;
-moz-box-shadow: 10px 10px 15px #000000;
-webkit-box-shadow: 10px 10px 15px #000000;
-o- box-shadow: 10px 10px 15px #000000;
-ms- box-shadow: 10px 10px 15px #000000; }
HTML記述
<div><h1>このエリアにシャドウがつきます。</h1></div>
62
＊色の指定は、普通のカラーコードだけでなく、rgba(0,0,0,0,4)や、カラーネームの指定も使われます。
＊inset の指定をすると、シャドウがbox内の左上からの数値に変更します。
＊位置の指定をマイナスpxに変えると、boxの左上の外側に位置が変わります。
■ 文字にシャドーを掛ける ■ text-shadow
:テキストの文字フォントに、シャドウを入れるCSSです。値の数字は、box-shadowと同じで、
x軸の位置（px） y軸の位置（px） ぼかしの範囲（px） 広がり範囲(px) シャドウの色 で指定していきます。
記述例
＊色の指定は、普通のカラーコードだけでなく、rgba(0,0,0,0,4) カラーネームの指定も使われます。
＊位置の指定をマイナスpxに変えると、boxの左上の外側に位置が変わります。
CSSの記述
div { width:400px; height:150px; background:#ffff00; padding:25px; margin:auto;
text-shadow: 5px 5px 10px #ff0000;
-moz-text-shadow: 5px 5px 10px #ff0000;
-webkit-text-shadow: 5px 5px 10px #ff0000;
-o- box-shadow: 5px 5px 10px #ff0000;
-ms- box-shadow: 5px 5px 10px #ff0000; }
HTML記述
<div><h1>この文字にシャドウがつきます。</h1></div>
63