CSS border-image显示模糊

时间:2017-08-13 17:23:32

标签: html css image css3 border

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

尺寸:363 x 10

enter image description here

我正在尝试将其设置为仅用于顶部边框的边框图像(暂时):

.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%;顶部边框的一般形状看起来是正确的(我认为),但它看起来非常模糊: enter image description here

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

1 个答案:

答案 0 :(得分:-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%和实心边框.. 那就是你必须有这样的形象。