Jak utworzyć wielobarwną obramowanie w css3

Question

Jak utworzyć wielobarwną ramkę w css3 jak na zdjęciu poniżej?

Answer 1

Można to zrobić z :after lub :before elementu psuedo i CSS linear-gradient jak pokazano poniżej:

body { 
 
    background: #ccc; 
 
} 
 

 
.box { 
 
    text-align: center; 
 
    position: relative; 
 
    line-height: 100px; 
 
    background: #fff; 
 
    height: 100px; 
 
    width: 300px; 
 
} 
 

 
.box:after { 
 
    background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); 
 
    position: absolute; 
 
    content: ''; 
 
    height: 4px; 
 
    right: 0; 
 
    left: 0; 
 
    top: 0; 
 
}

<div class="box">Div</div>

Answer 2

Wypróbuj.

<div class="test"></div> 

    .test { 
     width: 500px; 
     height: 100px; 
     background-color: #ccc; 
     position: relative; 
    } 

    .test:before, .test:after { 
     content: ""; 
     position: absolute; 
     left: 0px; 
     right: 0px; 
     height: 10px; 
     background-image: -webkit-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px); 
     background-image: -ms-linear-gradient(0deg, red 20px, blue 20px, blue 40px, yellow 40px, yellow 60px, green 60px, green 80px); 
     background-size: 80px; 
    } 

    .test:before { 
     top: 0px; 
    } 
    .test:after { 
     bottom: 0px; 
    } 

Zobacz demo

http://jsfiddle.net/yH59y/

Answer 3

Można to zrobić bez pseudo-elements, tylko z border-image: linear-gradient

.fancy-border { 
 
    width: 150px; 
 
    height: 150px; 
 
    text-align:center; 
 
    border-top: 5px solid; 
 
    border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5; 
 
}

<div class="fancy-border"> 
 
    my content 
 
</div>