我一直在尝试向桌子的左边框添加渐变色,但无法针对此问题提出解决方案!
I would prerfer this where the border is curved
在第二张图片中,我评论了边框图像线
width:300px;
border-radius:20px;
box-shadow:0 0 5px rgba(0,0,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%;
}```
答案 0 :(得分:0)
这不是获得渐变边界的方法,要获得渐变边界,您将必须为父元素提供背景渐变。现在,如果您想将左边界作为渐变,则将填充留给父元素,然后类似的方式,您也可以在其他方面进行填充。
我没有碰过您的CSS声明的其他部分,只是删除了边框并添加了填充和背景色。
.test{width:300px;
border-radius:20px;
box-shadow:0 0 5px rgba(0,0,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>