XHTMLソース

<p><img src="img/photo.jpg" alt="サンプル写真" class="pattern_a" /></p>
<p><img src="img/photo.jpg" alt="サンプル写真" class="pattern_b" /></p>
<p><img src="img/photo.jpg" alt="サンプル写真" class="pattern_c" /></p>
<p><img src="img/photo.jpg" alt="サンプル写真" class="pattern_d" /></p>
<p><img src="img/photo.jpg" alt="サンプル写真" class="pattern_e" /></p>
<p class="pattern_f"><img src="img/photo.jpg" alt="サンプル写真" /></p>

CSSソース

.pattern_a {
	padding: 1px;
	border: 1px solid #999;
}
.pattern_b {
	padding: 5px;
	background-color: white;
	border: 1px solid #999;
}
.pattern_c {
	border: 3px solid black;
}
.pattern_d {
	padding:5px;
	background: white url(img/pattern_01.gif);
	border: 1px solid #CCD6FD;
}
.pattern_e {
	padding:1px;
	background: url(img/pattern_02.gif);
}
.pattern_f {
	clear: left;
	float: left;
	margin: 20px 0 15px 15px;
	padding: 0;
	background: white url(img/pattern_03.gif) no-repeat right bottom;
	position: relative;
}
.pattern_f img {
     background-color: #fff;
     display: block;
     margin: -5px 15px 15px -5px;
     border: 1px solid white;
     position: relative;
}

• 第5章 実践的なCSSデザインの法則