css相片制作

使用CSS制作相片效果

CSS可以用于创建各种相片效果，包括边框、滤镜、阴影和动画。以下是几种常见的CSS相片制作方法。

基本相片边框

通过CSS为图片添加边框和阴影，模拟相片效果：

.photo {
    border: 10px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    padding: 5px;
    max-width: 100%;
}

滤镜效果

使用CSS滤镜为图片添加特殊效果，如黑白、模糊或饱和度调整：

.filter-grayscale {
    filter: grayscale(100%);
}

.filter-blur {
    filter: blur(2px);
}

.filter-saturate {
    filter: saturate(200%);
}

悬停动画

为相片添加悬停动画，增强交互体验：

.photo-hover {
    transition: transform 0.3s, box-shadow 0.3s;
}

.photo-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

相片拼贴布局

使用CSS Grid或Flexbox创建相片拼贴效果：

.photo-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.photo-collage img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

老式相片效果

模拟老式相片的泛黄和褪色效果：

.vintage-photo {
    filter: sepia(50%) brightness(90%) contrast(110%);
    border: 5px solid #e0c9a6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

相片旋转效果

为相片添加随机旋转，模拟真实相册效果：

.photo-rotate {
    transform: rotate(2deg);
}

.photo-rotate-alt {
    transform: rotate(-1deg);
}

这些CSS技巧可以单独使用或组合应用，根据需求创建各种相片效果。通过调整参数，可以实现更个性化的设计。