Question

我想在单个图片上添加多个边框。这可以通过CSS吗？

示例：http://imageshack.us/photo/my-images/31/multiplebg.jpg/

Answer 1

目前在CSS中不可能创建多个边框。你可以通过using some clever css3 shadowing techniques假装有三个边框。

div
{
    margin: 10px;
    border: 2px solid #f00;
    box-shadow:inset 0px 0px 2px 2px #0f0, 0px 0px 2px 5px #00f;
}

但是我只是在图像中添加边框，因为IE不支持。（也许IE9支持它。）

Answer 2

将您的<img>嵌套在多个容器中，并为每个

应用边框

<div id="b1">

    <div id="b2">

        <div id="b3">
            <img src="" />
        </div> 

    </div> 

</div>

然后对每个人应用边框

#b1 { border: 1px #000 solid; }
#b2 { border: 1px #f00 solid; }
#b3 { border: 1px #0f0 solid; }
img { border: 1px #00f solid; }

或

使用具有多个边框并使用border-image属性

的图像

Answer 3

很简单，使用CSS3这是一个非常简单的问题需要解决。

如果使用'outline'符合您的特定情况，请不要害怕使用它。

http://tinkerbin.com/tCGF0mfW

Answer 4

是可能的螨......

见这里

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#full-border5 {
    background: none repeat scroll 0 0 #FF9600;
    border: 5px solid #FF0000;
    padding: 40px;
    position: relative;
    z-index: 10;
}
#full-border5:before {
    background: none repeat scroll 0 0 #4AA929;
    border: 5px solid #FFEA00;
    bottom: 5px;
    content: "";
    display: block;
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: -1;
}
#full-border5:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 5px solid #F000FF;
    bottom: 25px;
    content: "";
    display: block;
    left: 25px;
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: -1;
}
#full-border5 p:first-child {
    margin-top: 0;
}
#full-border5 p:first-child:before {
    background: none repeat scroll 0 0 #7200FF;
    border: 5px solid #00B4FF;
    bottom: 15px;
    content: "";
    display: block;
    left: 15px;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: -1;
}


</style>

</head>

<body>

<div id="full-border5">
           <img src="slider_img8.jpg" width="145" height="214" />
</div>
</body>
</html>

Answer 5

Shadow尚未跨浏览器友好。

最简单（和跨浏览器友好）方式是使用填充和边框的组合。

示例：

<img src="<path>" class="doubleBorder" />

CSS：

.doubleBorder {
padding: 10px; background: orange;
border: 5px solid green;
}

希望这有帮助。

如何在img上创建多个边框？

5 个答案:

或