html - 押されたボーダーCSS

Question

正直に言うと、非常に単純でちょっと恥ずかしい問題があります。次の図でボーダー効果を実現する方法がわかりません。

私は非常に多くの異なることを試しましたが、webkit-border-image を使用して、Photoshop で作成した外部 jpg ファイルを介して効果を達成しようとするのに時間がかかりすぎました.LOL.

とにかく、私はここでガイダンスを求めています。必要なのは、画像のように上/下/左/右の境界線を実現するコードのスニペットだけです。

さらに厄介なことに、境界線が次の基本色になるようお願いします: #4b5ed6.

私が探しているものが見つからない場合は、http: //www.bet365.dk/ を参照してください。背景色が #6779e8 で、ラッパーにあるのと同じ境界線の効果を作成したいと考えています。彼らのサイトのように押されたように見える国境。

事前に - ありがとうございます！

score 1 · Accepted Answer

以下を使用して実現できます<hr>。

text
<hr>
text
<hr>
text

またはinsetボーダー:

.myBorder{
   border:inset 1px; 
}

text
<div class="myBorder"></div>
text
<div class="myBorder"></div>
text

inset境界線がある場合は、その幅または色もカスタマイズできることに注意してください。

.myBorder{
   border:inset 2px; 
   border-color:green;
}

text
<div class="myBorder"></div>
text
<div class="myBorder"></div>
text

1 に答える 1