css心形照片墙代码（css心形边框）

在网页设计中，常常需要使用照片墙来美化页面，其中心形照片墙能够吸引用户的眼球，让网页更加美观。下面我们就给大家介绍如何使用CSS代码制作心形照片墙。

/* CSS代码 */.heart {
    margin: 20px auto;
    width: 640px;
    height: 600px;
    position: relative;
    border-radius: 90px 90px 0 0;
    box-shadow: 0px 0px 10px #666;
    overflow: hidden;
}
.heart:before,.heart:after {
    content: "";
    background: #00adb5;
    border-radius: 400px 400px 0 0;
    position: absolute;
}
.heart:before {
    width: 460px;
    height: 400px;
    top: -180px;
    left: 90px;
}
.heart:after {
    width: 400px;
    height: 460px;
    top: -120px;
    left: 120px;
}
.heart img {
    position: absolute;
    margin: -100px 0 0 -120px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 20px solid #fff;
    box-shadow: 0px 0px 15px #666;
}
.heart img:hover {
    transform: scale(1.05);
    transition: all 0.5s ease;
}
    

代码中，我们首先定义了一个class为heart的div，表示心形照片墙的整体，设置了它的宽度、高度、边框半径、阴影样式等等。然后使用:before和:after伪元素分别制作了两个半圆形，作为心形的两个顶点。最后，我们添加了一个img标签来添加照片，并使用CSS样式控制了照片的圆形形状、边框、阴影、缩放等等。

通过以上代码，我们可以轻松制作一个美观的心形照片墙，让网页更加引人注目。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！