CSS 双图像边框答案

【问题标题】：CSS Dual Image BorderCSS 双图像边框
【发布时间】：2014-05-08 19:18:53
【问题描述】：

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

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

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

【问题讨论】：

您当然可以使用单独的容器 DIV、边框半径和一些仔细的定位来做到这一点。问题是它可以干净地完成吗？

标签： css image border

【解决方案1】：

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

您可以使用 box-shadow 模拟任意数量的边框，目前已得到很好的支持。每个盒子阴影重叠，所以要获得更多的盒子阴影，让它们变得越来越大。要获得圆角，只需使用border-radius。

http://caniuse.com/css-boxshadow

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/

【讨论】：

【解决方案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>

希望对你有帮助

【讨论】：