css照片盒子 |css id相同

/* 方法1：使用border属性 */
.photo-box {
border: 3px solid #000000;
padding: 5px;
}
/* 方法2：使用box-shadow属性 */
.photo-box {
box-shadow: 0px 0px 5px 2px #000000;
}
/* 方法3：使用图片背景 */
.photo-box {
background-image: url('image.jpg');
background-size: cover;
padding: 5px;
}
/* 方法4：使用伪元素 */
.photo-box {
position: relative;
padding: 5px;
}
.photo-box::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 3px solid #000000;
}
/* 方法5：使用动画效果 */
.photo-box {
position: relative;
padding: 5px;
transition: all 0.5s ease;
}
.photo-box:hover {
transform: scale(1.1);
}

以上是5种常用的CSS照片盒子设计方法，它们各有各的特点和效果。你可以根据自己的需求和喜好进行选择，但不要忘记关注网站的性能和显示效果，保证页面的流畅和美观。