我想尝试用CSS3设计一个像相框的东西(如下图)。
.frame_box li {
border: 1px solid #000;
height: 200px;
width: 150px;
display: inline-block;
border-radius:4px;
}
<ul class="frame_box">
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
<li>
<img src="a.jpg" alt="" />
</li>
</ul>
但我不能那样做。请帮我。提前致谢。
最佳答案
如果您的图像大小相同,您可以使用带边框的伪元素。这意味着您需要将边框宽度+高度设置为图像的高度。
演示:
.image {
position: relative;
height: 300px;
width: 200px;
background: url(http://lorempixel.com/200/300);
}
.image:before,
.image:after {
content: "";
position: absolute;
top: 0;
height: 200px;
border: 50px solid gray;
}
.image:before {
right: 0;
border-left-color: transparent;
border-right: none;
}
.image:after {
left: 0;
border-right-color: transparent;
border-left: none;
}
<div class="image"></div>
您还可以使用渐变来创建这种形状(由 Harry's answer here 建议):
.shape {
height: 400px;
position: relative;
width: 50vw;
background: linear-gradient(225deg, #F3D56A 30px, transparent 30px), linear-gradient(45deg, #F3D56A 30px, transparent 30px), linear-gradient(135deg, #F3D56A 30px, transparent 30px), linear-gradient(315deg, #F3D56A 30px, transparent 30px);
}
.shape img {
z-index: -1;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
<div class="shape">
<img src="http://lorempixel.com/300/300" />
</div>
关于javascript - 如何通过css创建图像框架?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32712659/