asp.net - 水平和垂直边框的不同图像 - CSS

Question

我有两个自己在corel-draw中创建的png图像，如下所示，1 个水平和 1 个垂直。

我想在 css 中做这样的事情

.desiredSpan{
    border-top-image:horizontal.png
    border-bottom-image:horizontal.png
    border-left-image:vertical.png
    border-right-image:vertical.png
}

我看过 border-image 属性，但它对垂直和水平边框使用相同的图像。虽然如果它能解决我的问题，我不介意使用它。

Answer 1

首先，请记住 Internet Explorer 不支持边框图像:http://caniuse.com/#search=border-image

其次，border-image 只能与 1 个图像一起使用(所以你需要将它们组合起来，我为你做了，在这里:http://i.imgur.com/gP414jh.png

第三，目前，Chrome 和 Firefox 只支持“border-image”指令……不支持“border-top-image”和其他指令。

第四，这是要在您的示例中使用的 CSS:

.bordered {
    width: 500px; // or what you want. 500px is the image width
    border-width: 20px;
    border-image: url(http://i.imgur.com/gP414jh.png) 20 stretch;
}

最后，我给大家做一个例子，看看如何处理border-image:http://codepen.io/ByScripts/pen/zHitp