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;
}