Dwukolorowa ramka

Question

Wiem, że możliwe jest uzyskanie podwójnej granicy z jedną pod drugą, ale czy jest możliwe, aby za pomocą css część szerokości obramowania miała jeden kolor, a reszta inny kolor?

Oto przykład z obrazem, że chciałbym, aby odtworzyć tylko jako obramowanie z wykorzystaniem CSS:

Answer 1

UPDATE:

widząc, że linia w post jest rzeczywiście Dwukolorowa linia umożliwia użycie właściwości obramowania obrazu w celu uzyskania podobnego efektu (przykład pokazujący tylko zasadę, ale nie jest dopasowywany do idealnego dopasowania):

ONLINE DEMO

CSS:

div { 
    border-top:0; 
    border-bottom:1px; 
    -webkit-border-image: -webkit-gradient(linear, left bottom, right bottom, from(#07f), to(#000), color-stop(0.3, #07f), color-stop(0.31, #000)) 21 20 30 21; 
    /* ... */ 
} 

W przypadku innych przeglądarek:

-moz-border-image: 
-webkit-border-image: 
-o-border-image: 
border-image: /* standard */ 

Zauważ, że parametr nachylenie waha się od przeglądarki do przeglądarki widocznie tak to konieczność być również dostosowane. Wersja demonstracyjna działa tylko z przeglądarkami webkit.

Old

Czy masz na myśli coś takiego:

Do tego można użyć następującego CSS:

.myClass { 
    height:40px; 
    width:60px; 
    border:5px solid #00a; 
    box-shadow:0 0 0 5px #f00 inset; 
    padding:5px; 
} 

tu box.shadow ustawiony wstawka bez rozmycia działa jako druga część granicy. Wypełnienie powinno zapobiegać nakładaniu się treści.

ONLINE DEMO

Answer 2

myślę, że zorientowali się w jeden sposób, aby to zrobić. Sprawdź to http://jsfiddle.net/RE4A7/

html

<ul> 
<li><h3>Mission</h3> 
</li> 
</ul> 

css

ul h3 { 
font-size:1.2em; 
font-family:arial; 
border-bottom:1px solid #333; 
padding-bottom:10px; 
position:relative; 
width:250px; 
} 
ul li { 
list-style:none; 
} 
ul h3:after { 
border-bottom:1px solid #ff4800; 
bottom:-1px; 
left:0px; 
content:""; 
position:absolute; 
width:55px; 
}