1 |
<img src="xxxx.jpg" class="frame" /> |
1 2 3 4 5 6 7 |
.frame{ display: block; margin: 0 auto; padding: 4px; background: #fff; border: 1px solid #bfbfbf; } |
padding | 枠の太さ |
---|---|
background | 枠内の色 |
border | 枠線の色 |
1 |
<div class="shadow"><img src="xxxx.jpg" /></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.shadow{ position: relative; display: block; width: 320px; /* 画像の横幅 */ margin: 0 auto; z-index: 1; } .shadow:before{ content: ""; position: absolute; bottom: 6px; left: 18px; width: 50%; box-shadow: 0 0 4px 8px rgba(0,0,0,0.6); z-index: -1; transform:rotate(-3deg) } .shadow:after{ content: ""; position: absolute; bottom: 6px; right: 18px; width: 50%; box-shadow: 0 0 4px 8px rgba(0,0,0,0.6); z-index: -1; transform:rotate(3deg) } |