１．ブルーの枠で影をつけたパターン
この部分に文字を入れる。
下記をコピー＆ペーストして使ってください。
↓ ↓
<div style=”padding: 10px; margin: 15px auto; color: #333333fe; background: #ffffff none repeat scroll 0% 0%; border: 1px solid #629DF5; box-shadow: 8px 8px 16px #dddddd;”>この部分に文字を入れる。</div>
２．角をまるくして枠の中をグラデーションにしたパターン
この部分に文字を入れる。
下記をコピー＆ペーストして使ってください。
↓ ↓
<div style=”background-image: linear-gradient(#0040FF,white,white,white,#0040FF); background-color: #0000ff; padding: 10px; width: auto; margin-right: 6px; border-radius: 10px; border: 2px dotted #0000FF; box-shadow: 5px 5px 5px #AAA;”>この部分に文字を入れる。</div>
３．角を丸くしてこまかい点線の枠に入れる
この部分に文字を入力する。
下記をコピー＆ペーストして使ってください。
↓ ↓
<p style=”text-align: center;”>↓ ↓</p>
<div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;”>
この部分に文字を入力する。</div>
<div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;”>
この部分に文字を入力する。</div>
４．こまかい点線の枠にタイトルをつける。
下記をコピー＆ペーストして使ってください。
↓ ↓
<fieldset style=”border: 1px dotted #000000; padding: 10px;”>
<legend>タイトル</legend>この部分に文字を入力する。</fieldset>
<legend>タイトル</legend>この部分に文字を入力する。</fieldset>
ご参考にして頂ければ幸いです。
コメント