怎样用HTML仿制一个类似RPGMaker的对话框？

Question

我想用HTML做一个RPGMaker的对话框。

首先我获取并制作了其边框(命名为window.png)，

对话框的颜色是由上到下的一个渐变色(浅蓝变深蓝)，然后对截图取色得到渐变的两个颜色，
在css中键入：

#Dialog {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    box-sizing: border-box;
    border: 15px solid transparent;
    border-image: url(window.png) 15 round;
    background:linear-gradient(#2f5a8b,#01055d);
}

在Chrome中打开，得到如图效果：

显然，处理上有点问题。
我们为background添加content-box来获得边框不填色的情况，

根据图片可知，对于左右两侧的边框填色是正确的，而上下两边的填色却颠倒了，这...不知是BUG还是啥。
有什么解决方法吗？

注：

1. 直接在原始图上对透明边框染色。可以缓解问题，但这样对后期对话框设置颜色很不友好。
2. 这里我希望只使用HTML/CSS/JS，不太希望用pixi.js等靠canvas的方案。

Answer 1

原来前端里不少地方靠的是奇技淫巧...
看到一篇博客 https://www.cnblogs.com/z-one... 讲的是border-image和border-color不能同时适用的问题，然后作者使用阴影巧妙解决。。。

于是，我在Dialog(div)里面又套了一层Dialog-frame(div)，并且对外层使用背景色，对内层使用边框，于是效果就ok了。