影つき囲み枠の
アレンジ方法をご紹介します。
囲み枠のコードの
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);の部分を探して
影部分やカラーをアレンジしてくださいね♡
本文はここに入力してください。改行はShift+Enterで！
<div style="display:inline-block; background:#E8F8FA; padding:10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="display:inline-block; padding:10px; border:1px solid #D3BB83;">本文はここに入力してください。改行はShift+Enterで！</div></div>
もっと浮いたように見えるアレンジ
影の向きや広がりを変えると
より浮いたような影になります。
本文はここに入力してください。改行はShift+Enterで！
<div style="display:inline-block; background:#E8F8FA; padding:10px; box-shadow: 10px 10px 15px -10px rgba(0, 0, 0, 0.32);"><div style="display:inline-block; padding:10px; border:1px solid #D3BB83;">本文はここに入力してください。改行はShift+Enterで！</div></div>
まわりをぼかしてふんわり見えるアレンジ
囲み枠の色と同じ色で影をつけると
ふんわりとしたぼかし囲み枠になります。
本文はここに入力してください。改行はShift+Enterで！
<div style="display:inline-block; background:#E8F8FA; padding:10px; box-shadow: #E8F8FA 0 0 5px 5px;"><div style="display:inline-block; padding:10px; border:1px solid #D3BB83;">本文はここに入力してください。改行はShift+Enterで！</div></div>
ぼかし系囲み枠はこちら
↓ ↓ ↓
LINEの友だち追加で
「アメブロで使えるかわいいマーカー」を
プレゼント！
「マーカー」と送って下さい
ID検索は @570smkow
囲み枠・人気記事
お問合せ⇒