CSSのbox-shadowで二重枠を作る方法

CSSのbox-shadowで二重枠を作る方法

この記事では、CSSを使って二重枠を作る方法を紹介します。

この記事で紹介する二重枠とは下記のようなものになります。

二重枠のサンプル

HTMLのサンプル

<div><p>枠の中のテキスト</p></div>

CSSの書き方

div{
width: 50%;
    bordersolid 1px #e62ae1;
  box-shadow: 5px 5px 0px 0px #fff, 5px 5px 0px 1px #e62ae1;
}

結果

枠の中のテキスト

 

補足

box-shadowの値についてですが、最初の値(5px 5px 0px 0px #fff)で白地を表現しています。

2番目の値(5px 5px 0px 1px #1b8c44)で裏側の枠を表現しています。

表の枠と裏の枠を離す場合は、最初の値と2番目の値の両方を変更する必要があります。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight − 5 =

ABOUTこの記事をかいた人

フリーランスのWEBエンジニアとして活動中。 WEBの専門家としてWEBディレクションからコーディングまでを一通り経験。 WEBで悩んでいる方に役立つ情報をブログで配信中。 ライフワークでは、キャンプにはまってます♪