【スキルハックス】CSSで画像に丸みをつけたり、文字に影を付ける

今回は画像に丸みを付けたり、文字に影を付けて立体感を出したりします。

まずは画像を表示させます。

サイズが大きすぎると分かりにくいので幅を150pxにします。

border-radiusは画像の丸くすることができます。50％にすると丸くなります。

border-radiusを20％にすると、角が取れたような画像になります。

ちなみに、それぞれの角をpxで指定して変えることができます。20pxの部分が左上、0pxの部分が右上、50pxの部分が右下、10pxの部分が左下になります。

2番目のpタグのフォントサイズを40pxにして、色を青にしてみます。

分かりやすくするように、太字にします。

text-shadowで文字に影を付けることができます。5pxが横方向の影、3pxが縦方向の影、1pxが影の太さ、blackが影の色になります。

横方向を0pxにしてみると、かなり印象が変わると思います。