CSS3のbackground-clipプロパティって知ってた？

いや～私は知りませんでした。
背景画像の表示領域を設定するCSSのプロパティ値です。

#background-clip プロパティ

style.css

div {
	background: url("bg.jpg") no-repeat center; /*背景画像*/
	width: 210px;
	height: 360px;
	padding: 25px; /*パディング*/
	border: double 20px #CCC; /*ボーダー部分を分かりやすくするため二重線に*/
}
	
#border-box{
	background-clip: border-box;
}
#padding-box{
	background-clip: padding-box;
}
#content-box{
	background-clip: content-box;
}
	
h1{
	color: #FFF;
}

##表示例
確認環境：Chrome59

プロパティ値	適応範囲
border-box	border領域を含む範囲（初期値）
padding-box	padding領域を含む範囲
content-box	padding領域も含まない、内容部分のみに表示

border領域を分かりやすくするためにかなり太目に取っていますが、モデル化するとこんな感じかな？
「コンテンツ内容」の文章と、contentの間には文字のpaddingが利いてることになりますね。

#所感とか
コンテンツ内容にpadding掛けたり応用方法はいろいろありそうですね。
こんな感じとかも出来るみたいです。

#参考書籍
HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集（マイナビ）』