テキスト、文章をボックス、線で囲むオシャレな やり方
こんにちワ o(^-^)o
ちょっとサブタイトル用に使っている囲み枠に飽きたもんで少しイジクッテみました。
この記事冒頭の囲み枠のHTMLコードは以下のようになってます。
<div style="background-image:linear-gradient(#ffffff,#7affff,#05ffff);border:1px dotted #00ff00; padding: 10px 8px 4px;background-color:#ffffff;font-size:23px;font-weight:bold;color:#203744;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;box-shadow: 2px 2px 3px #aaaaaa;margin:5px;">テキスト、文章をボックス、線で囲むオシャレな やり方 </div>
a.margin（枠線の外側の余白）をmargin:5pxからmargin: 2px 8px 8px 0px;（ ［上］ と ［右］ と ［下］ と ［左］ を指定）にして左にピッタリくっつくようにしました。
b.影をつけて立体的に見せるためのコードをbox-shadow: 2px 2px 3px から、box-shadow:5px 5px 10pxに変えて少しボカシを強くしてみました。
以下のようになります。
～～任意の文章～～
コードはこうなってます（↓）。
<div style="background-image:linear-gradient(#ffffff,#7affff,#05ffff);border:1px dotted #00ff00; padding: 10px 8px 4px;background-color:#ffffff;font-size:23px;font-weight:bold;color:#203744;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;box-shadow:5px 5px 10px; #aaaaaa;margin: 2px 8px 8px 0px;">～～任意の文章～～</div>
■こっちのほうが、ちょびっとオシャレな気がします。
☆ブィブィ ('-^*)/
ネコちゃんダンスだ
ね！？