Question

我正在尝试仅使用CSS复制以下图像边框。

http://fish.websitedesignsflorida.com/wp-content/uploads/2014/05/demoSlide1.png

到目前为止，我只能使用图像边框复制它。有没有办法在CSS中严格执行此操作？

Answer 1

您需要的两个效果是多个边框和圆角。

您可以使用box-shadow模拟任意数量的边框，这在今天得到了很好的支持。每个框阴影重叠，因此获得更多的框阴影使它们变得越来越大。要获得圆角，只需使用border-radius。

html
<img>

css
img {
box-shadow:
    0 0 0 10px #921808,
    0 0 0 20px #163459;
border-radius: 20px;
}

您还可以使用填充和背景颜色来获得额外的边框。请注意，这只会显示为边框，因为图像覆盖了形状的内部。

html
<img>

css
img {
padding: 5px;
background: #921808;
border: 5px solid #163459;
}

使用CSS还有更多方法可以做到这一点，看看这个CSS-Tricks链接： http://css-tricks.com/snippets/css/rounded-corners/

Answer 2

如果您的图片位置已修复，则可以使用属性position: absolute作为图片的边框。试试这个：

<html>
<head>
<style>
.d1
{
width: 200px;
height: 300px;
border: 10px solid #ff0000;
border-radius: 6px;
position: absolute;
top: 0px;
left: 0px;
}
.d2
{
width: 200px;
height: 300px;
border: 10px solid #000000;
border-radius: 6px;
position: absolute;
top: 5px;
left: 5px;
}
.i
{
width:200px;
height: 300px;
}
</style>
</head>
<body>
<img src="first.png" class="i">
<div class="d1"></div><div class="d2"></div></body>
</html>

希望这有帮助

CSS双图像边框

2 个答案: