图像周围有多个颜色边框

Question

如何在图像周围创建这样的2色边框？

像这样：

这适用于HTML网站。我应该使用什么CSS？在此先感谢：）

Answer 1

Fiddle Link

<强> CSS

 #mainDiv {
     height: 200px;
     width: 560px;
     position: relative;
     border-bottom: 8px solid #f51c40;
     background: #3beadc;
    border-top: 4px solid yellow;
  }

 #borderLeftbottom  {
   border-left: 8px solid #f51c40;
   position: absolute;
   top: 50%;
   bottom: 0;
 }
#borderRightbottom{
  border-right: 8px solid #f51c40;
   position: absolute;
   top: 50%;
   bottom: 0;
   right:0;
}
#borderLefttop  {
  border-left: 4px solid yellow;
   position: absolute;
   top: 0;
   bottom: 50%;
}
#borderRighttop{
   border-right: 4px solid yellow;
   position: absolute;
   top: 0;
   bottom: 50%;
   right:0;
}

<强> HTML

<div id="mainDiv"><img src="https://www.google.com/images/srpr/logo11w.png" alt="google" />
     <div id="borderLeftbottom"></div>
     <div id="borderRightbottom"></div>
     <div id="borderLefttop"></div>
     <div id="borderRighttop"></div>
</div>

Answer 2

任何图片的完全可重复使用的解决方案 - 只需要使用带有类.dultipleBorder的div

包装它

FIDDLE

1）将图像包裹在div中。

2）给div填充：说外边框为12px - 10px，内边框为2px

3）创建伪元素:before和:after div - 每个高度为50％

4）为每个伪元素设置边框和背景（背景用作内边框）

5）删除顶部元素的底部边框和底部元素的顶部边框。

完成！

标记

<div class="multipleBorder">
    <img src="http://placehold.it/600x150" alt="" width="600px" height="150px" />
</div>

CSS

.multipleBorder
{
    position: relative;
    display: inline-block;
    padding: 12px;
}
.multipleBorder:before, .multipleBorder:after
{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 50%;
    border: 10px solid silver;
    border-bottom: none;
    background: maroon;
    z-index: -1;
    -moz-box-sizing: border-box;
    box-sizing: border-box;  
}
.multipleBorder:after
{
    bottom:0;
    top: auto;
    border: 10px solid maroon;
    border-top: none;
    background: silver;
}