CSS border-image显示模糊

Question

我有以下图像，我试图将其设置为图像边框（我添加了红色，以便您可以正确地看到它 - 真正的版本用透明的bg修剪）

尺寸：363 x 10

我正在尝试将其设置为仅用于顶部边框的边框图像（暂时）：

.panel {
   background: #fff;
   background: none;
   border-radius: 0;
   border-width: 10px;
   border-style: solid;
   border-image: url('../image/marker-white-01-reversed.png');
   border-image-slice: 15%;
}

如果我设置border-image-slice: 15%;顶部边框的一般形状看起来是正确的（我认为），但它看起来非常模糊：

谁能明白为什么会这样？最初我离开了border-image-slice但是图像只显示在角落里...并且用不同的值玩了但是似乎没有给我正确的结果

Answer 1

.panel { 
  background: #fff; 
  background: none; 
  border-radius: 0; 
  border-width: 10px; 
  border-style: solid; 
  border-image: url('../image/marker-white-01-reversed.png'); 
  border-image-slice: 15%; 
}

看看你的代码.. 半径0和图像切片15％和实心边框.. 那就是你必须有这样的形象。