CSS边框图像显示模糊答案

【问题标题】：CSS border-image showing blurryCSS边框图像显示模糊
【发布时间】：2018-01-21 14:40:52
【问题描述】：

我有以下图像，我想将其设置为图像边框（我添加了红色只是为了让您可以正确看到它——真实版本是用透明背景修剪的）

尺寸：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，但图像只显示在角落里......并且使用了不同的值，但似乎没有一个能给我正确的结果

【问题讨论】：

你想要达到的效果是什么？
@ErenTantekin 我基本上只是想让顶部边框看起来像第一个图像（图像文件的那个）

标签： html image css border

【解决方案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% 和实心边框.. 那就是你要有这样的形象。

【讨论】：