この種の境界線をHTML - CSSに追加するにはどうすればよいですか?

Question

写真に示すように、この効果を実現するにはどうすればよいでしょうか?

Answer 1

絶対配置、
4つの正方形p、
各正方形の境界線を設定

Answer 2

テスト用QRコード:

ここ数日、これをさらに簡素化できないか考えていましたが、実装は背景とあまり変わらないことがわかりました。もっと良い方法があるなら、それを提案してみんなで共有することもできます。

今日、突然インスピレーションが湧き、background-repeatの価値はリピートだけではなくスペースでもあることを思い出しました。
これこそまさに私たちが必要としているものではないでしょうか？真ん中に空白を残したところ、うまく機能し、コードがはるかに単純になったことがわかりました。
以下はデモです:

デモ3

================================================ ===
以下が元の回答です:
DEMO1
このDEMOに関しては、かなり複雑なアイデアを使っているという以外に意味が無いような気がします。
そこで、このレンダリングを見たとき、それを実現するために背景レイヤーのオーバーレイを使用することを思いつきました。

DEMO2
具体的には、最初のレイヤー（ユーザーに最も近い背景）をQRコード画像として設定します

次に、2 番目のレイヤーと 3 番目のレイヤーは、x 方向と y 方向に繰り返される 2 つの白い狭い長方形です。
QR コードの最初の層の背後にあるものを取得します。

背景カラーレイヤーはすべての背景画像の背後に描画されるため、色を#15A6FFに設定すると、

が得られます

つまり、最終結果を得るためにレイヤーごとにカバーします。
ちょっとしたアイデア、参考までに。

Answer 3

QR コード領域の前後の疑似クラスを使用できます。QR コード領域の前後の一方は上下の白の枠を使用し、もう一方は左右の白の枠を使用します。次に、必要な効果を無効にするために位置を調整します。

Answer 4

複数の背景の重ね方を使用可能
メイン背景と4つのボーダー背景のサイズと位置を個別に設定

リーリー

Answer 5

絶対位置指定もOK

Answer 6

擬似クラスp:前 下の4つのpを押して境界線を設定します。
その後、残りの 2 つの側面をブロックします。今のところ考えられるのはこれだけです。