CSS）影付きのシンプルな枠＋ビネット効果写真 サンプル

写真に影付きのシンプルな枠を付ける。

写真にビネット効果を付ける。

<div class="box-frame">
	<div class="vignette">
		<img src="img/xxx.jpg">
	</div>
</div>

<style>
img {
	margin: 0;
	padding: 0;
	display: block;	/* これがないと余分な枠が付いてしまう。*/
}
.box-frame {
	display: inline-block;	/* 重要 */
	padding: 7px;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 1px 1px 5px rgba(20,20,20,0.2);
	border-radius: 4px;
}
.vignette {
	position: relative;
}
.vignette:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.6),
	inset 0 0 300px rgba(0, 0, 0, 0.4);
}
</style>