2色の境界線

Question

もう1つ下の境界線の効果を得ることは可能ですが、cssを使用して境界線の幅の一部を1色にし、残りを別の色にすることは可能ですか？ここで

は、私が唯一のCSSを使用して境界線として再作成したい画像の例である：

Answer 1

UPDATE：

は、ポスト内の行が実際にあることを見て2色の線でborder-imageプロパティを使用して同様の効果を得ることができます（例のみを示していますが、完全一致の場合は調整しません）。

ONLINE DEMO

CSS：どうやらそう勾配パラメータは、ブラウザからブラウザに変化すること

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

注このニーズへ：他のブラウザの場合

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; 
    /* ... */ 
} 

同様に調整する。提供されるデモは、Webkitブラウザでのみ機能します。

旧

は、あなたがこのような何かを意味してください：ここに設定box.shadowを

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

：あなたは、以下のCSSを使用することができます。このため

を境界線の2番目の部分としてぼかしを挿入しないで挿入します。パディングは、コンテンツが重複しないようにする必要があります。

ONLINE DEMO

Answer 2

私はそれを行うための一つの方法を考え出したと思います。 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; 
}