この境界を作るにはどうすればいいですか

Question

誰かがこのコードを作るのを助けてくれますか？私はこれをウェブページの四角形の枠線にしたいと思います。これは国境の中の国境のようなものです。

Answer 1

あなたの質問の私の理解が正しければ、あなたは以下のスニペットのようにはめ込みbox-shadowを使用してこれを行うことができます。 1つの影（赤い色のもの）は、赤色から透明になるように見えますので、ぼかし半径を持っていますが、他のものは鮮明な線であるようにぼかし半径を持っていません。

.fancy-border { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 10px solid rgb(0, 53, 107); 
 
    padding: 20px; 
 
    box-shadow: inset 0px 0px 10px 10px rgb(252, 1, 2), inset 0px 0px 0px 20px rgb(0, 53, 107); 
 
}

<div class='fancy-border'>Some content</div>

---

あなただけの外側の青い枠と（内部の余分な青い縁なし）内側の赤い枠をしたい場合は、以下のようにそれを行うことができます。

場合あなたの質問の私の理解は正しいです、あなたは以下のスニペットのように、インセットbox-shadowを使用してこれを行うことができます。 1つの影（赤い色のもの）は、赤色から透明になるように見えますので、ぼかし半径を持っていますが、他のものは鮮明な線であるようにぼかし半径を持っていません。国境である

.fancy-border { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 10px solid rgb(0, 53, 107); 
 
    padding: 20px; 
 
    box-shadow: inset 0px 0px 10px 10px rgb(252, 1, 2); 
 
    background: rgb(0, 53, 107); /* remove if this also is not needed */ 
 
}

<div class='fancy-border'>Some content</div>