CSS 2色边框

Question

我感兴趣的是可以按照它在图像上显示的方式制作css图像边框吗？ 非常感谢。也许在图像下放一些div？有什么想法吗？

<img src="http://i.stack.imgur.com/3s43x.jpg" width="400" height="400" alt="">

Answer 1

您可以使用填充和渐变背景。

<强> jsFiddle example

img {
    background: rgba(52, 117, 247, 1);
    background: -moz-linear-gradient(left, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(52, 117, 247, 1)), color-stop(50%, rgba(52, 117, 247, 1)), color-stop(50%, rgba(230, 214, 39, 1)), color-stop(100%, rgba(230, 214, 39, 1)));
    background: -webkit-linear-gradient(left, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    background: -o-linear-gradient(left, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    background: -ms-linear-gradient(left, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    background: linear-gradient(to right, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3475f7', endColorstr='#e6d627', GradientType=1);
    padding:4px;
}

Answer 2

使用容器，您可以使用＆＃39;：＆＃39;像这样的元素：

<div class="double">
    <img src="http://placehold.it/400x400">
</div>    

.double {
    float:left;
    position:relative;
    padding:3px;
    background:blue;
    width:400px;
    height:400px;
}
.double:after {
    content:"";
    display:block;
    position:absolute;
    width:50%;
    height:100%;
    background:red;
    right:0;
    bottom:0;
}
.double img {
    position:relative;
    z-index:1;
}

选中 Demo Fiddle

通过这种方式，您可以使用＆＃39;填充＆＃39;来增加边框。容器的价值。

Answer 3

您可以使用以下HTML / CSS组合。

JS Fiddle Demo

HTML：

<div class="container">
    <img class="img" src="http://placehold.it/400">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.container { //the containing div
    width: 410px;
    height: 410px;
}
.left{ //the left "border"
    background-color: red;
    height: 410px;
    width: 205px;
    float: left;
}

.right { //the right "border"
    background-color: green;
    height: 410px;
    width: 205px;
    float: right;
}

.img { //the image
    position: absolute;
    margin-left: 5px;
    margin-top: 5px;
}

@ j08691的答案可能看起来很复杂，但它可能更清晰，因为您可以更多地移动图像，而不必担心页面上的其他元素。使用此处的代码可能会成为一个问题。