div的渐变边界线作为示例here答案

【问题标题】：Gradient border line of the div as example herediv的渐变边界线作为示例here
【发布时间】：2017-01-17 05:50:03
【问题描述】：

我想在div的左边放一条渐变色边框线

三种颜色垂直重复：#F8F2CE、#CFCB9C、#EFEDBD

喜欢这个

【问题讨论】：

stackoverflow.com/a/7050367/1190388
对不起，我不明白我应该把那个 webkit 代码放在 .div { } 下吗？

标签： html css linear-gradients

【解决方案1】：

我觉得对你有帮助

p.test {
    position: relative;
    padding: 10px;
    margin: 0 0 1em;
    width: 300px;
}
.test:before {
    background: #F8F2CE; /* For browsers that do not support gradients */
    background: -moz-linear-gradient(#F8F2CE, #CFCB9C, #EFEDBD); /* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(#F8F2CE, #CFCB9C, #EFEDBD); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#F8F2CE, #CFCB9C, #EFEDBD); /* For Opera 11.1 to 12.0 */
    background: linear-gradient(to #F8F2CE, #CFCB9C , #EFEDBD); /* Standard syntax */
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    width: 10px; /* Border width */ 
    height: 100%;
}

<p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet lobortis justo. Phasellus elit diam, interdum eu varius sed, semper sit amet lacus. Morbi hendrerit accumsan ante a dignissim. Etiam non elit non velit auctor auctor vel vel orci. Etiam sed mauris vitae mi dapibus auctor. Praesent eleifend dapibus sodales. Nam facilisis dolor ut sagittis mollis. Mauris scelerisque nunc nec lacus egestas, in pellentesque lectus ultricies. Nullam vestibulum sagittis augue, ac gravida orci suscipit sit amet. Duis elementum nisi enim, nec vulputate felis blandit id. Aenean mauris mauris, dapibus ut consectetur vitae, aliquam sollicitudin dolor. Maecenas at purus eget eros ullamcorper semper eu in nunc.
    
    Nam ultrices lectus lorem, a ultrices urna gravida vel. Sed ultrices ex sit amet libero semper rhoncus. Duis sollicitudin mi lectus, id suscipit sapien hendrerit vitae. Integer vel ultricies tortor. Vivamus vitae tempor dui. Sed posuere nibh finibus ipsum imperdiet scelerisque. Phasellus bibendum laoreet sem vitae elementum.</p>

其他解决方案：

Border-image (support)

有用的链接：

【讨论】：

很好，只是一件事：试图减小宽度但不起作用。谢谢
@mario 看看.test:before {... width: 10px; ... }。这是一个边框宽度。
@mario 它适用于所有浏览器。您需要更改width: 10px; /* Border width */ 中的值
@mario 我已经为此代码添加了跨浏览器解决方案。
非常感谢！你的似乎更轻，你能告诉我我怎样才能做到更接近原来的吗？我很难理解为什么i.imgur.com/mlbqI9m.gif

【解决方案2】：

<div style="
    border-left: 1px solid #F8F2CE;
">
    <div style="
    border-left: 1px solid #CFCB9C;
">
        <div style="
    border-left: 1px solid #EFEDBD;
"> 
            this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content.  this is the artical content. 
        </div>
    </div>
</div>

【讨论】：

我尝试了一些 CSS，但 id 失败了。所以我使用dom。是你想要的吗？我，我会继续这个问题，用 css 回答
很好用，非常感谢，如何增加padding？
盒子阴影：-1px 0px 0px #EFEDBD,-2px 0px 0px #CFCB9C,-3px 0px 0px #F8F2CE;这是CSS方法，像往常一样添加填充，你的意思是“如何增加填充”