这里以div的渐变边界线为例

Question

我想在div的左侧放置渐变颜色边框线

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

像这样

Answer 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）

有用的链接：

• W3schools
• CSS Tricks
• Webkit

Answer 2

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;