いろんな囲み枠を少しずつメモしていきます。
最初は、シンプルな囲み枠のメモ。
※ 数字を替えて太さを調整。(border:数字px )
⇩
<div style="border: 1px solid #949799; padding: 20px;"> 本文を入力</div>
<div style="border: 3px solid #949799; padding: 20px;"> 本文を入力</div>
※ 数字が大きくなると丸みが大きくなる。(border-radius: 数字px)
⇩
<div style="border: 1px solid #949799; border-radius: 10px; padding: 20px;">本文を入力</div>
<div style="border: 5px solid #949799; border-radius: 10px; padding: 20px;"> 本文を入力</div>
<div style="border: 5px solid #949799; border-radius: 20px; padding: 20px;"> 本文を入力</div>
<div style="border: 5px solid #949799; border-radius: 30px; padding: 20px;"> 本文を入力</div>
⇩
<div style="border: none; background-color: #949799; color: #fff; padding: 20px;">本文を入力</div>
<div style="border: none; background-color: #949799; color: #fff; padding: 20px;border-radius: 10px;">本文を入力</div>
※ 数字を替えて余白を調整。(padding:数字px )
⇩
<div style="border: 1px solid #949799; padding: 15px;"> 本文を入力</div>
<div style="border: 1px solid #949799; padding: 10px;"> 本文を入力</div>
<div style="border: none; background-color: #949799; color: #fff; padding: 15px;">本文を入力</div>
<div style="border: none; background-color: #949799; color: #fff; padding: 10px;">本文を入力</div>
<div style="border: none; background-color: #949799; color: #fff; padding: 15px;border-radius: 10px;">本文を入力</div>
<div style="border: none; background-color: #949799; color: #fff; padding: 10px;border-radius: 10px;">本文を入力</div>