IE11延伸边框图像

Question

我试图让CSS3图像边框在现代浏览器中工作，我发现当IE11应该是实体时，它会拉伸1px宽的图像切片。

以下是我的测试图片：http://i.imgur.com/bwwYJOS.png - 请注意中心区域（1px宽）是如何为纯白色。

我的CSS：

div {
    border-style: solid;
    border-width: 11px 24px 10px 25px;

    border-image-source: url(...);
    border-image-slice: 11 24 10 25 fill;
    border-image-width: 11px 24px 10px 25px;
    border-image-outset: 0s;
    border-image-repeat: stretch;
}

图像的区域是（50x50图像）：

 Top-left:      0, 0 to 25,10 (25x11)
 Top-span:     25, 0 to 25,10 ( 1x11)
 Top-right:    26, 0 to 49,10 (24x11)
 Left-span:     0,11 to 24,39 (25x29)
 Centre:       25,11 to 25,39 ( 1x29)
 Right-span:   26,11 to 49,39 (24x29)
 Bottom-left:   0,40 to 24,49 (25x10)
 Bottom-span:  25,40 to 25,49 ( 1x10)
 Bottom-right: 26,40 to 49,49 (24x10)

这是一个JSFiddle：http://jsfiddle.net/rdgbotke/

渲染比较：

Chrome 44：

IE11：

更新我注意到Windows 10上的Edge渲染与Chrome完全相同，所以我认为这肯定是IE11中的一个错误。

Answer 1

如果只是颜色或简单图形可以从它们中提取，b ackground，background-repeat，background-position和background-size可以替代。

＆＃13;

＆＃13;

div {
  padding:12px 25px;
  background:
    linear-gradient(to bottom, #FF0000, #FF0000 ) 0 0 no-repeat,
    linear-gradient(to top , #B335B2, #B335B2) 0 bottom no-repeat,
    linear-gradient(to top, #00FFD8, #00FFD8) 0 0 no-repeat ,
    linear-gradient(to top, #CFBFF3,#CFBFF3) top right no-repeat,
    linear-gradient(to top, #F6D830,#F6D830)  bottom right no-repeat,
    linear-gradient(to top, #5C35B3,#5C35B3)  top right no-repeat,
    linear-gradient(to top,#0000FF,#0000FF) top no-repeat,
    linear-gradient(to top,#00FF42,#00FF42) bottom no-repeat;
  background-size:
    24px 11px, 
    24px 11px, 
    24px 100%,
    24px 11px, 
    24px 11px, 
    24px 100%, 
    100% 10px, 
    100% 10px;
}

＆＃13;

<div>
  <p>blargh</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Box-shadow也可以提供帮助：

＆＃13;

＆＃13;

div {
  margin: 20px 24px;
  padding:1px;
  box-shadow:
    0 -11px #0000FF,
    0 11px #00FF42,
    24px 0 #5C35B3,
    -24px 0 #00FFD8,
    -24px -11px #FF0000,
    -24px 11px #B335B2,
    24px 11px #F6D830,
    24px -11px #CFBFF3
}

＆＃13;

	<div>
		<p>blargh</p>
	</div>

＆＃13;

＆＃13;

＆＃13;