Как сделать границу красочной с помощью CSS?

Question

Я определил класс границы в DIV:

<div class="border"></div> 

.border { 
border: 4px solid; 
color: #E72665; 
} 

Это дает розовый цвет границы. Но вместо розового. Я могу 4 цвета в границах, каждый из которых покрывает 25%, как я могу это сделать?

Answer 1

Если вы имеете в виду каждой стороне другой цвет, чем вы можете просто сломать декларацию в конкретных сторон ...

border-top: 1px solid red; 
border-right: 1px solid blue; 
border-bottom: 1px solid green; 
border-left: 1px solid yellow; 

За свой комментарий ниже ...

Единственный другой способ добиться того, что вам нужно будет использовать: после псевдокласса, чтобы создать отдельный элемент, который имеет градиент фона с вашими 4 цветами и использовать его в качестве вашей границы.

Вот демо: http://jsfiddle.net/uLHR6/

.border { 
    position: relative; 
    width: 100px; 
    height: 50px; 
    background: #ccc; 
} 

.border:after { 
    content: " "; 
    display: block; 
    position: absolute; 
    width: 100px; 
    height: 5px; 
    bottom: 0; 
background: #ff0000; /* Old browsers */ 
background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 24%, #00ff00 25%, #00ff00 49%, #0008ff 50%, #0008ff 74%, #f605ff 75%, #f605ff 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(24%,#ff0000), color-stop(25%,#00ff00), color-stop(49%,#00ff00), color-stop(50%,#0008ff), color-stop(74%,#0008ff), color-stop(75%,#f605ff), color-stop(100%,#f605ff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* IE10+ */ 
background: linear-gradient(to right, #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#f605ff',GradientType=1); /* IE6-9 */ 

}