html - div的渐变边框线作为示例here

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