2015/07/17

Jimdoの文章枠を角丸にしたい

文章に枠を付けたいで説明した枠を角丸にする方法

文章の枠の付け方は前回説明したとおりですが、その枠を角丸にする方法

文章に枠をつける方法はこちら

角丸を指定する方法は2種類ありますが、今回はborder-radiusというスタイルシートを使います。

フチを角丸にするとこのように表示されます。柔らかさが出てステキですね。

上記で使用している角丸のスタイルシートは以下の通りです。
この6pxの6の数値を大きくしたり小さくすることで、角丸の大きさを変えることが出来ます。

<p> フチを角丸にするとこのように表示されます。柔らかさが出てステキですね。</p>

</div>

border-radiusの数値は％で指定することも出来ます。
その場合には、表情が異なります。border-radius:30%;で指定したのがこの枠です。

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

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。

カテゴリ： tips

コメント: 2