css - 复杂的按钮 Sprite

Question

我有这个 Sprite :

Link http://gpanel.darrell.nl/images/derma.png

右上角有4个按钮图片。我喜欢使用这样的按钮，边 Angular 保持完好，但其余部分可以拉伸(stretch)。我搜索了整个互联网，但找不到任何东西。如何使用 CSS 实现这一点？

左上角的窗口框架也是如此。

Answer 1

不幸的是，border-image 不能很好地与 sprite 一起使用，它可以做到，但需要一个额外的元素和一些不太优雅的技巧，这里有一个演示:http://jsfiddle.net/sandro_paganotti/H2xgQ/1/

.border{
    border-right: 400px solid black; 
    border-bottom: 400px solid black;
    border-image: url('http://gpanel.darrell.nl/images/derma.png') 3 388 388 3 fill stretch stretch;
    height: 300px;
    width: 200px;
}