CSS3基礎

CSS3
ベンダープレフィックス（接頭辞）

・ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のこと

主要ブラウザのベンダープレフィックス

※IE8以前は接頭辞を置いてもほとんどが対応していない


標準形を描いた後に接頭辞をつけたものも書く

border-radius: 30px;
-ms-border-radius: 30px;

・習慣として-moz-,-webkit-,を書いておく
・スマートフォンは対応している

border-radius

・boxに対してborder-radiusを指定することで角に丸みをつけられる
・borderが無くても適用される

linear-gradeint

・グラデーションをつける、下記は白からグレーに

linear-gradeint(#fff 0%, #dfdfdf 100%,#ccc 60%, #bbb 80%);
※最大4項目でグラデーションが指定できる

・パーセントは色の濃度ではなくて、位置を示している

・角度を変えるときは最初に●degを入れる
例）　（90deg,#fff 0%, #dfdfdf 100%）;

box-shadow

・枠に影をつける

box-shadow: 5px 5px 5px #bbb;
横　縦　ぼかし
内側をぼかす時には最後に inset を書く

・二重に指定することも可能
box-shadow: 5px 5px 5px #bbb,5px 5px 5px #ccc inset;



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
	section.box {
		width: 500px;
		height: 500px;
		margin: 50px;
		border: 1px solid #ccc;
		border-radius: 30px;
		-moz-border-radius: 30px;
		-webkit-border-radius: 30px;
		-ms-border-radius: 30px;
		 background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%);
		 background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%);
 box-shadow: 0px 8px 10px #000,0px 20px 20px #bbb;
 -webkit-box-shadow: 0px 8px 10px #000,0px 20px 20px #bbb;
	}
</style> 
</head>
<body>
<article>
<section class="box">
</section>
</article>
</body>
</html>