測試代碼用
.book-shelf {
background: #8b5a2b; /* 木質色調 */
padding: 20px;
border-radius: 8px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
box-shadow: inset 0 -10px 10px rgba(0,0,0,0.3);
}
.book-item {
background: #eee;
aspect-ratio: 5 / 7; /* 同人誌常見比例 */
box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
transition: transform 0.3s;
cursor: pointer;
border-left: 3px solid rgba(0,0,0,0.1); /* 模擬書脊陰影 */
}
.book-item:hover {
transform: translateY(-10px) rotate(-2deg);
}
.book-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
星塵實驗室 