应用边框图像时遇到问题

Question

我目前正在开展一个学校项目，我需要使用 border-image-source 将多个边框图像应用到一个元素。但是，我遇到的问题是仅显示一个边框图像，而另一个未应用。如果应用了两个边框，它将显示为灰色边框，如下图（左）所示。当我在两个边框之间交替时，它会如中间和右侧图像所示。但是，当我尝试在检查元素中启用两者时，它不起作用（右）。

这是完整的类代码

// CSS
.calendar {
    height: 300px;
    width: 400px;
    margin: 0 auto;
    margin-top: 50px;
    background-image: url(calendarbg.png); 
    background-size: auto; 
    background-position: center;
    /* ^^ not relevant, i guess ^^ */

    border-style: solid;
    border-image-source:  url(border1.png);
    /* border-image-source: url(border.png); */
    border-image-slice: 30 fill;
    border-width: 20px;
}
// HTML 
<table class="calendar">
        <thead> 
            <tr>
            <th colspan="7" class="mHeader"> January </th>
            </tr>
                <tr>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
            </thead>
 <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
        </tr>
        <tr>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>

我尝试简化代码，尝试不同的图像，问题仍然存在。由于某种原因，我似乎无法同时运行两个图像源...

Answer 1

据我了解您的问题，您希望将左右边框设置为一个图像，将顶部和底部边框设置为另一幅图像。我认为你应该在这里使用

border-image

property。它使您能够使用包含所有边框的 1 个图像在所有侧面设置自定义边框。

您生成的代码可能看起来像这样：

border-image: url("border.png") 27;

其中

url()

- 包含图像的路径，

27

是浏览器将其偏移以将其分为九个区域的像素量：四个角、四个边缘和一个中间。

如果还不够，请检查

border-image-slice

属性

附注我自己从来没有使用过它，对它也不太了解，所以请记住它。