当前位置：首页 > CSS

用css制作照片

2026-04-01 22:08:34CSS

使用CSS制作照片效果

通过CSS可以模拟照片的外观，包括边框、阴影、滤镜等效果。以下是几种常见的实现方法。

添加边框和阴影

为图片添加白色边框和阴影效果，使其看起来像传统照片：

.photo {
    border: 15px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background-color: white;
    padding: 5px;
}

使用滤镜效果

应用CSS滤镜模拟老旧照片或特殊色调：

用css制作照片

.vintage-photo {
    filter: sepia(50%) contrast(120%) brightness(90%);
    border-radius: 2px;
    overflow: hidden;
}

创建宝丽来风格

模拟宝丽来相片的白色边框和底部留白：

.polaroid {
    background: white;
    padding: 15px 15px 60px 15px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transform: rotate(-1deg);
    width: fit-content;
}

悬停动画效果

添加悬停时的动画效果，使照片更具交互性：

用css制作照片

.photo-hover {
    transition: transform 0.3s, box-shadow 0.3s;
}
.photo-hover:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

倾斜摆放效果

创建随意摆放的照片墙效果：

.photo-stack {
    transform: rotate(3deg);
    position: relative;
}
.photo-stack::before {
    content: "";
    position: absolute;
    z-index: -1;
    transform: rotate(-5deg);
}

圆角与内阴影

添加圆角边框和内阴影模拟相框效果：

.framed-photo {
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    border: 2px solid #f5f5f5;
    padding: 10px;
    background: white;
}

这些CSS技术可以单独使用或组合应用，根据需求创建各种照片风格效果。通过调整参数值可获得不同的视觉效果。