CSS : Multi color border

Question

我们如何使用 css 实现像这张图片一样的边框？

Answer 1

可以设置边框颜色为透明

border:10px solid transparent;

然后您可以使用 border-image 属性将图像用作边框。例如:

border-image: url(boder-img.png) 30 round;
-webkit-border-image: url(boder-img.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(boder-img.png) 30 round; /* Opera 11-12.1 */

根据 W3Schools border-image 的语法是:

border-image: source slice width outset repeat|initial|inherit;

在此处了解有关边框图像的更多信息:http://www.w3schools.com/cssref/css3_pr_border-image.asp

p.img-border{
 border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round; /* Opera 11-12.1 */
    border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round;
}

<p class="img-border"> Sample paragraph. </p>