左边界渐变填充边界半径

如何解决左边界渐变填充边界半径

我一直在尝试向桌子的左边框添加渐变色，但无法针对此问题提出解决方案！

This is what happens

I would prerfer this where the border is curved

在第二张图片中，我评论了边框图像线

  width:300px;
border-radius:20px;
Box-shadow:0 0 5px rgba(0,0.2);
overflow:hidden;
font-family:"Lato",sans-serif;
font-size:16px;
line-height:1;/*originally 1.5 #9970e0*/
color:#555555;
margin: 15px;
border-left: 4px solid #9970e0  ;
border-right:0px;
border-image:linear-gradient(to bottom,#cc0099,#0099ff)1 100%;
}```
 

解决方法

这不是获得渐变边界的方法，要获得渐变边界，您将必须为父元素提供背景渐变。现在，如果您想将左边界作为渐变，则将填充留给父元素，然后类似的方式，您也可以在其他方面进行填充。

我没有碰过您的CSS声明的其他部分，只是删除了边框并添加了填充和背景色。

 .test{width:300px;
border-radius:20px;
box-shadow:0 0 5px rgba(0,0.2);
overflow:hidden;
font-family:"Lato",sans-serif;
font-size:16px;
line-height:1;originally 1.5 #9970e0
color:#555555;
margin: 15px;
background: linear-gradient(to bottom,#cc0099,#0099ff);
border-right:0px;
padding: 0 0 0 5px;
}
.inherit{
  width: 100%;
  padding: 0 0 0 1px;
  background: #fff;
}

<div class="test">
<div class="inherit">
Inherit
</div>
</div>