html - CSS中的 9-patch 图像

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        3年前关闭。
                                                                                            
                
        
我有div的下一个样式：

.page {
    width: 90%;
    border-color: orange;
    border-style: double;
    border-width: 25px 30px 10px 20px;
    border-image: url("images/border-image.png") 25 30 10 20 repeat;
    margin: 70px auto 0px auto;
    padding: 10px;
    box-shadow: 0px 4px 3px rgba(0,0,0,0.9),
                0px 8px 13px rgba(0,0,0,0.6),
                0px 18px 23px rgba(0,0,0,0.1);;
}

我从例子中拿出来。一切都有！但是我只绘制图像帧和黑色背景（body具有黑色背景）。我如何也可以绘制图像的中间部分？

最佳答案

对于https://drafts.csswg.org/css-backgrounds/#the-border-image-slice，除非您指定fill关键字，否则中间的图像将被自动丢弃（因为它是“边界”图像）。所以你要：

border-image: url("images/border-image.png") 25 30 10 20 fill repeat;