グラデーション背景2の囲み枠

文章が長めになっても、キレイなグラデーションのまま伸びていくシームレスタイプの囲み枠です。

Contents

シンプルなグラデーション囲み枠

ここに見出し
<p>&nbsp;</p><div style="padding: 8px;background-image: linear-gradient(-45deg, #C0F5EF,
 #FFECE3);"><span style="font-weight:bold;">ここに見出し</span></div><p>&nbsp;</p>
シンプル1
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF,
 #FFECE3);"><div style="background:rgba(255,255,255,0.8);padding:20px;">ここに本文。シンプル1</div></div><p>&nbsp;</p>
シンプル2
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF,
 #FFECE3);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFDED0;padding:20px;">ここに本文。シンプル2</div></div></div><p>&nbsp;</p>
シンプル3
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF,
 #FFECE3);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">ここに本文。シンプル3</div></div></div><p>&nbsp;</p>

角丸グラデーション囲み枠

角丸1
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:20px;">ここに本文。角丸1</div></div><p>&nbsp;</p>
角丸2
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFDED0;padding:20px;">ここに本文。角丸2</div></div></div><p>&nbsp;</p>
角丸3
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">ここに本文。角丸3</div></div></div><p>&nbsp;</p>

影つきグラデーション囲み枠

影つき1
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:20px;">ここに本文。影つき1</div></div><p>&nbsp;</p>
影つき2
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #FFDED0;padding:20px;">ここに本文。影つき2</div></div></div><p>&nbsp;</p>
影つき3
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);"><div style="background:rgba(255,255,255,0.8);padding:5px;"><div style="border:4px double #DFC69B;padding:20px;">ここに本文。影つき3</div></div></div><p>&nbsp;</p>

影つき角丸グラデーション囲み枠

影つき角丸1
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:20px;border-radius:5px;">ここに本文。影つき角丸1</div></div><p>&nbsp;</p>
影つき角丸2
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;border-radius:5px;"><div style="border:4px double #FFDED0;padding:20px;border-radius:5px;">ここに本文。影つき角丸2</div></div></div><p>&nbsp;</p>
影つき角丸3
<p>&nbsp;</p><div style="padding:20px;background-image: linear-gradient(-45deg, #C0F5EF, #FFECE3);box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);border-radius:10px;"><div style="background:rgba(255,255,255,0.8);padding:5px;border-radius:5px;"><div style="border:4px double #DFC69B;padding:20px;border-radius:5px;">ここに本文。影つき角丸3</div></div></div><p>&nbsp;</p>
share
  • URLをコピーしました!
  • URLをコピーしました!
Contents