htmlで囲い枠作成

1.ブルーの枠で影をつけたパターン

この部分に文字を入れる。

 

下記をコピー&ペーストして使ってください。

↓ ↓

<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>

2.角をまるくして枠の中をグラデーションにしたパターン

この部分に文字を入れる。

 

下記をコピー&ペーストして使ってください。

↓ ↓

<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>

 

3.角を丸くしてこまかい点線の枠に入れる

この部分に文字を入力する。

 

下記をコピー&ペーストして使ってください。

↓ ↓

<p style=”text-align: center;”>↓ ↓</p>
<div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;”>
この部分に文字を入力する。</div>

 

4.こまかい点線の枠にタイトルをつける。

タイトル

この部分に文字を入力する。

 

下記をコピー&ペーストして使ってください。

↓ ↓

<fieldset style=”border: 1px dotted #000000; padding: 10px;”>
<legend>タイトル</legend>この部分に文字を入力する。</fieldset>

ご参考にして頂ければ幸いです。

コメント

タイトルとURLをコピーしました