CSS 2色边框 [英] CSS 2-color border

问题描述

我很感兴趣是否可以使CSS图像边框像在图像上显示的那样? 多谢.也许在图片下面放了一些div?有什么想法吗?

I'm interested is it possible to make css image border the way it shown on the image? thanks a lot. Maybe put some div under the image? Any thoughts?

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

推荐答案

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

You could use padding and a gradient background.

jsFiddle示例

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

这篇关于CSS 2色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！