今回は額縁風のおしゃれな囲み枠を作ってみたいと思います。
参考にした記事はこちら。
枠の外側の色を変えると額縁のような感じになります。
<div style="background-color:#a4c3b2;padding:6px;margin:20px;"><div style="background-color:rgba(255, 255, 255, 0.5);border:1px solid #b4b4b4;box-shadow:0 0 0 6px #a4c3b2;padding:16px;">テキストを入力</div></div>
コードを見てみると、透過を使ってるみたい？
枠の線を立体的にして、より額縁っぽくしてみます。
谷型の枠（groove）
<div style="background-color: #a4c3b2; padding: 6px; margin: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.5); border: 4px groove #b4b4b4; box-shadow: 0 0 0 6px #a4c3b2; padding: 16px;">テキストを入力</div>
</div>
山型の枠（ridge）
<div style="background-color: #a4c3b2; padding: 6px; margin: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.5); border: 4px ridge #b4b4b4; box-shadow: 0 0 0 6px #a4c3b2; padding: 16px;">テキストを入力</div>
</div>
立体的な枠（outset）
<div style="background-color: #a4c3b2; padding: 6px; margin: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.5); border: 4px outset #b4b4b4; box-shadow: 0 0 0 6px #a4c3b2; padding: 16px;">テキストを入力</div>
</div>
#a4c3b2：内側の色
#a4c3b2：外側の色
個人的には山型の枠が一番額縁っぽいなと思いました。
立体的な枠も、外側に枠があることで立体感が増してる感じがしますね！
色を変えたい場合はこちらを参考に。
山型の枠をつけた額縁風のカラーバリエーションを作ってみたいと思います。
山型枠ピンク系
<div style="background-color: #e29399; padding: 6px; margin: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.5); border: 4px ridge #b4b4b4; box-shadow: 0 0 0 6px #e29399; padding: 16px;">テキストを入力</div>
</div>
山型枠水色系
<div style="background-color: #a1d8e6; padding: 6px; margin: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.5); border: 4px ridge #b4b4b4; box-shadow: 0 0 0 6px #a1d8e6; padding: 16px;">テキストを入力</div>
</div>
山型枠黄色系
<div style="background-color: #ece093; padding: 6px; margin: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.5); border: 4px ridge #b4b4b4; box-shadow: 0 0 0 6px #ece093; padding: 16px;">テキストを入力</div>
</div>
外側だけ違う色にすることもできますね。
外枠色違い黄色系
<div style="background-color: #ece093; padding: 6px; margin: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.5); border: 4px ridge #b4b4b4; box-shadow: 0 0 0 6px #98605e; padding: 16px;">テキストを入力</div>
</div>
さらに額縁っぽい雰囲気になりました！
