Code
/* Обычное изображение */
.normal-img {
background: #ccc;
border: solid 1px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.normal-img-2 {
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, 1), 0 -1px 0 rgba(0, 0, 0, .6);
}
/* Стиль для округленного изображения */
.rounded-img {
display: inline-block;
border: solid 1px #000;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}
/* Стили для демонстрационной страницы */
body {
width: 800px;
margin: 30px auto;
font: normal 14px/150% Arial, Helvetica, sans-serif;
}
p {
margin: 0 0 10px;
}
h2, h3 {
margin: 0 0 5px;
}
hr {
margin: 30px 0;
background: #999;
height: 0;
padding: 0 0 1px;
border: none;
}
.demo {
margin: 40px 0;
padding: 20px;
background: #d7d7d7;
border: solid 1px #ccc;
}
.left {
float: left;
margin-right: 20px;
}
/* Очистка */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
zoom: 1;
} /* IE7 */
