文章に枠を付けたいで説明した枠を角丸にする方法
文章の枠の付け方は前回説明したとおりですが、その枠を角丸にする方法
角丸を指定する方法は2種類ありますが、今回はborder-radiusというスタイルシートを使います。
フチを角丸にするとこのように表示されます。柔らかさが出てステキですね。
上記で使用している角丸のスタイルシートは以下の通りです。
この6pxの6の数値を大きくしたり小さくすることで、角丸の大きさを変えることが出来ます。
<div style="border: 3px solid #999; padding: 1em; border-radius: 6px;">
<p> フチを角丸にするとこのように表示されます。柔らかさが出てステキですね。</p>
</div>
border-radiusの数値は％で指定することも出来ます。
その場合には、表情が異なります。border-radius:30%;で指定したのがこの枠です。
4角それぞれに別々の角丸を指定したい。
4角にそれぞれに角丸を指定する場合は以下のように指定します。
border-radius:6px 0px 0px 6px;
上記の数値は、それぞれ 左上、右上、右下、左下になります。
工夫次第で、面白い枠線を作ることが出来ます。
border-radius: 30px 0px 30px 0px;
border-radius:0px 80% 20px 50px;
padding:1em 0 10px;
border-radius: 30% 50% 30% 50%;
右のようにスタイルシートを組み合わせれば、様々な形状や雰囲気を出すことも可能になります。
border-top: 10px solid #900;
border-bottom: 10px solid #333; padding: 3em;
border-radius: 50% 50% 50% 50%;
コメントをお書きください
川合 勝 (土曜日, 18 7月 2015 09:35)
文章に枠を付ける1連のシリーズは素晴らしいです！
今迄は表を利用して枠替わりにしていましたが、文字の大きさを変えられ無い、外部メモからコピペすると枠が乱れる問題有り、ダミーのコンテンツ文章にコピペしてから、表に移していました。
今回はコンテンツの文章ですから、枠の中に見出し風にｐｘの大きい文字を使い、下の行には通常文字にしたり、自由性が有って大変助かります。
有難う御座います。
PIK村井 (土曜日, 18 7月 2015 10:25)
川合さん
ありがとうございます。m(_ _)m
これからも内容を充実させて参ります。
たまに、覗きにいらしてくださいね＾＾