box-shadow＆角を丸くする！ - HTML5とCSS3をマスターするためのブログ

今回記述したのは以下のとおりです。

/*記事*/

article {

　background-color: #ffffff;

　width: 900px;

　margin-left: auto;

　margin-right: auto;

　border: solid 1px #aaaaaa;

　padding: 30px; box-sizing:

　border-box; margin-bottom: 15px;

　box-shadow: 1px 1px 3px #aaaaaa;

　border-radius: 20px;

赤字の部分が今回追加された記述です。

今回は本当に簡単でした。

box-shadow: 1px 1px 3px #aaaaaa

セレクタで影をつける指定をして、値の部分は横のオフセット縦のオフセットぼかし幅という順番で記述されています。

つまり横に1px縦に1pxのboxshadowが効き、そこに3pxのぼかし幅が効いているという指定になっています。

値の部分をマイナス値に指定すると、横の場合は左方向に影が付き、縦方向の場合は上に影がつくルールになっています。

box-shadow: -1px -1px 3px #aaaaaa

上記のように記述すると、左側と上側に影がつく指定になります。

border-radiusの指定は、テキストを表示させているボックスの角を丸くするための指定です。

border-radius: 20pxと記述することによって、角の半径を20pxに指定できます。同時にbox-shadowで付けた影も自動的に丸くなります。

4つの角をそれぞれ値を指定して、それぞれ違う形で丸くすることも可能です。

border-radius: 10px 30px 50px 70px

と指定した場合、10pxが左上 30pxが右上 50pxが右下 70pxが左下の記述になります。

左上から始まって時計回りに指定していく感じです。

今回のBefore Afterはほとんど変化はありせんでした。

Before

After

簡単に言うと角が丸くなって影がうっすら付いたくらいの変化しかありません。記述も簡単でしたし、特に悩むことはありませんでした。ただ、border-radiusとbox-shadowの変化をつける値を覚えないといけないなって実感しています。

box-shadowの値の場合は、+値で書けば右と下という順番に影が出て、-値で記述すると左と上に影が出るようになることを覚えておく必要があります。

border-radiusの場合は、それぞれの角を異なる指定をする機会はほとんどないと思いますけど、値の部分が左上から時計回りに指定が入ることを覚えておいたほうが良いと思います。

覚えることが多すぎて頭が軽いパニック状態になっている部分もありますが、この調子で勉強を積み重ねていきたいと思っています。