水平和垂直边框的不同图像 - 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

你在CSS3中拥有所有这些选择器：

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

通过http://www.css3.info/preview/border-image/

Answer 2

关于CSS borders here

的一切

但是，我猜它们在IE中不起作用。请看兼容性：

http://caniuse.com/#search=border

Answer 3

首先，请记住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