超シンプル解説！HTML、cssでよく使う角丸、シャドウの備忘録

2013/07/09 　カテゴリー：Web 　 　タグ：タグ: , ,

HTML、cssでよく使う角丸、シャドウの備忘録

意外と重宝するのがcss3になってから可能になった
角丸とドロップアンドシャドウ。

簡単なのに、意外とすぐに忘れてしまうので、超シンプルにまとめてみました。

画像を使わずにCSSだけで角を丸くする方法


HTML、cssでよく使う角丸、シャドウ

四隅がそれぞれ半径が違う場合

border-radius: 8px 2px 8px 2px;

この4つの数字は左から、
上　右　下　左

ということです。

2つだけ並べると

上下　左右

という意味になります。

これは、以下のすべてに共通です。

四隅が全部同じ場合

border-radius: 20px;

このように一つにまとめると
上下左右すべてに適用されます

シャドウ

box-shadow: 2px 2px 7px #D1D0D0;

最後の項目は色です。

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】
posted with ヨメレバ
大藤 幹,久保 知己,境 祐司,佐藤 裕 エムディエヌコーポレーション 2013-08-01
Amazon
楽天ブックス
紀伊國屋書店

よくわかるHTML5+CSS3の教科書
posted with ヨメレバ
大藤 幹 マイナビ 2012-07-28
Amazon
楽天ブックス
紀伊國屋書店

photo credit: Theresa Thompson via photopin cc

Share on Google+Tweet about this on TwitterShare on Facebook
　　　

あわせて読みたい

同じカテゴリーのみんなの記事