グリーン系の囲み枠 [ シンプル・二重線・点線・破線 ] です。
Contents
シンプルな囲み枠
シンプル1
<p> </p><div style="border: 2px solid #DDF1EE; padding: 15px;">ここに本文。シンプル1</div><p> </p>
シンプル2
<p> </p><div style="border: 2px solid #B0E0E6; padding: 15px;">ここに本文。シンプル2</div><p> </p>
シンプル3
<p> </p><div style="border: 2px solid #8ECFD2; padding: 15px;">ここに本文。シンプル3</div><p> </p>
シンプル4
<p> </p><div style="border: 2px solid #A5C9C1; padding: 15px;">ここに本文。シンプル4</div><p> </p>
二重線の囲み枠
二重線1
<p> </p><div style="border: 4px double #DDF1EE; padding: 15px;">ここに本文。二重線1</div><p> </p>
二重線2
<p> </p><div style="border: 4px double #B0E0E6; padding: 15px;">ここに本文。二重線2</div><p> </p>
二重線3
<p> </p><div style="border: 4px double #8ECFD2; padding: 15px;">ここに本文。二重線3</div><p> </p>
二重線4
<p> </p><div style="border: 4px double #A5C9C1; padding: 15px;">ここに本文。二重線4</div><p> </p>
点線の囲み枠
点線1
<p> </p><div style="border: 2px dotted #DDF1EE; padding: 15px;">ここに本文。点線1</div><p> </p>
点線2
<p> </p><div style="border: 2px dotted #B0E0E6; padding: 15px;">ここに本文。点線2</div><p> </p>
点線3
<p> </p><div style="border: 2px dotted #8ECFD2; padding: 15px;">ここに本文。点線3</div><p> </p>
点線4
<p> </p><div style="border: 2px dotted #A5C9C1; padding: 15px;">ここに本文。点線4</div><p> </p>
破線の囲み枠
破線1
<p> </p><div style="border: 2px dashed #DDF1EE; padding: 15px;">ここに本文。破線1</div><p> </p>
破線2
<p> </p><div style="border: 2px dashed #B0E0E6; padding: 15px;">ここに本文。破線2</div><p> </p>
破線3
<p> </p><div style="border: 2px dashed #8ECFD2; padding: 15px;">ここに本文。破線3</div><p> </p>
破線4
<p> </p><div style="border: 2px dashed #A5C9C1; padding: 15px;">ここに本文。破線4</div><p> </p>
サイズが変わるシンプルな囲み枠
シンプル1
<p> </p><div style="display:inline-block;border: 2px solid #DDF1EE; padding: 15px;">ここに本文。シンプル1</div><p> </p>
シンプル2
<p> </p><div style="display:inline-block;border: 2px solid #B0E0E6; padding: 15px;">ここに本文。シンプル2</div><p> </p>
シンプル3
<p> </p><div style="display:inline-block;border: 2px solid #8ECFD2; padding: 15px;">ここに本文。シンプル3</div><p> </p>
シンプル4
<p> </p><div style="display:inline-block;border: 2px solid #A5C9C1; padding: 15px;">ここに本文。シンプル4</div><p> </p>
サイズが変わる二重線の囲み枠
二重線1
<p> </p><div style="display:inline-block;border: 4px double #DDF1EE; padding: 15px;">ここに本文。二重線1</div><p> </p>
二重線2
<p> </p><div style="display:inline-block;border: 4px double #B0E0E6; padding: 15px;">ここに本文。二重線2</div><p> </p>
二重線3
<p> </p><div style="display:inline-block;border: 4px double #8ECFD2; padding: 15px;">ここに本文。二重線3</div><p> </p>
二重線4
<p> </p><div style="display:inline-block;border: 4px double #A5C9C1; padding: 15px;">ここに本文。二重線4</div><p> </p>
サイズが変わる点線の囲み枠
点線1
<p> </p><div style="display:inline-block;border: 2px dotted #DDF1EE; padding: 15px;">ここに本文。点線1</div><p> </p>
点線2
<p> </p><div style="display:inline-block;border: 2px dotted #B0E0E6; padding: 15px;">ここに本文。点線2</div><p> </p>
点線3
<p> </p><div style="display:inline-block;border: 2px dotted #8ECFD2; padding: 15px;">ここに本文。点線3</div><p> </p>
点線4
<p> </p><div style="display:inline-block;border: 2px dotted #A5C9C1; padding: 15px;">ここに本文。点線4</div><p> </p>
サイズが変わる破線の囲み枠
破線1
<p> </p><div style="display:inline-block;border: 2px dashed #DDF1EE; padding: 15px;">ここに本文。破線1</div><p> </p>
破線2
<p> </p><div style="display:inline-block;border: 2px dashed #B0E0E6; padding: 15px;">ここに本文。破線2</div><p> </p>
破線3
<p> </p><div style="display:inline-block;border: 2px dashed #8ECFD2; padding: 15px;">ここに本文。破線3</div><p> </p>
破線4
<p> </p><div style="display:inline-block;border: 2px dashed #A5C9C1; padding: 15px;">ここに本文。破線4</div><p> </p>