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

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 边框的一切都在这里

但是，我猜它们在 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