***************************************************
css3是基於css的基礎，開發出了更多的屬性功能。其實3已經在開發中常常用到，但是還是總結一下，區分總結一下其新的屬性。
CSS3已完全向後兼容
一、css邊框border
border-radius（圓角）
以左上角開始
可以一起設定
或者設置某一個
border-top-right
border-top-left
border-bottom-right
border-bottom-left
border-box（陰影）
border-box:x y 偏移量 顏色
border-image（圖片）
border-image:url(border.png) 30 30 round;
二、css背景
background-image（背景圖）
background-image: url(img_flwr.gif), url(paper.gif);
也可以同時爲不同的設置
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
background-size（背景大小）
CSS3以前，背景圖像大小由圖像的實際大小決定。大小是相對於父元素的寬度和高度的百分比的大小。
background-size:x y
background-clip（指定位置開始繪製）
content-box, padding-box,和 border-box
background-origin（背景圖像位置）
content-box, padding-box,和 border-box
與background-position background-repeat配合使用
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>背景圖像邊界框的相對位置：</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>背景圖像的相對位置的內容框：</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
三、漸變
在兩個或多個指定的顏色之間顯示平穩的過渡，減少下載的事件和寬帶
1.線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
2.徑向漸變（Radial Gradients）- 由它們的中心定義
屬性
linear-gradient線性
（上到下）
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標準的語法 */
（左到右）
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 標準的語法 */
（對角）
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */
radial-gradient徑向
repeating-linear-gradient
repeating-radial-gradient
四、多媒體查詢
媒體查詢一般放到樣式的最下面，@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
兩種media的使用方法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
通過不同的大小來改變其中的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@media screen and (max-width: 960px) {
body{background-color: red;}
}
@media screen and (max-width: 768px) {
body{background-color: green;}
}
@media screen and (max-width: 480px) {
body{background-color: yellow;}
}
</style>
<script>
</script>
</head>
<body>
</body>
</html>
五、彈性盒子（Flex-Box）
彈性盒子是css3的一種新的屬性
當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。
***************************************************