1.background
//----------------------------------
background: url("CSS3%20DAY%2003/images/baby0.jpg") no-repeat;
/*cover:不改變圖檔的比例，完全放大填充，溢出隐藏*/
/*background-size: cover;*/
/*contain:不改變圖檔的比例，放大到一邊達到100%，另一個方向不管*/
/*background-size: contain ;*/
/*100% 100%:改變圖檔的比例，雙邊都放大到100%*/
background-size: 100% 100%;
//---------------------------------
/*背景原點：控制背景圖從哪兒開始顯示*/
/*預設值,padding也有背景圖*/
/*background-origin: padding-box;*/
/*邊框開始有背景圖*/
/*background-origin: border-box;*/
/*隻有内容區域有背景圖*/
background-origin: content-box;
//----------------------------------
/*背景裁切,不改變背景的位置*/
background-clip: content-box;
/*三個參數：padding-box,border-box,content-box*/ 複制
2.漸變
//----------------------------------
//linear-gradient()
.s{
/*标準寫法*/
/*linear-gradient表示線性漸變的意思*/
/*括号裡面兩個參數，表示從黃色漸變到綠色*/
background-image: linear-gradient(yellow,green);
}
/*多顔色線性漸變*/
.s1{
background-image: linear-gradient(red,orange,yellow,green,cyan);
}
/*漸變方向，預設都是從上往下，我們可以通過設定，來更改漸變的方向*/
/*用角度确定方向*/
.s2{
background-image: linear-gradient(270deg,yellow,green);
}
/*用關鍵字确定方向*/
.s3{
background-image: linear-gradient(to left top,yellow,green);
}
/*在漸變裡面，可以通過百分比，控制漸變的起點*/
/*下面這個，就是黃色從20%地方開始漸變，綠色從40%的地方開始漸變，
如果百分比不到100%，那麼，缺少的用純顔色填充*/
.s4{
background-image: linear-gradient(90deg,yellow 20%,green 40%);
}
.s5{
background-image: linear-gradient(90deg,yellow 40%,green 40%,green 50%,blue 50%);
}
<!--控制得當有點像進度條-->
//--------------------------------
//repeating-linear-gradient():重複線性漸變，文法與線性漸變一樣
//---------------------------------
//radial-gradient()
.s{
background-image: radial-gradient(yellow,green);
/*基本寫法*/
}
/*标準寫法：三要素：1輻射範圍2中心點3顔色起止*/
.s1{
/*120px表示輻射範圍（半徑），at後面跟的屬性表示中心點*/
background-image: radial-gradient(200px at 0 center,yellow,green);
}
//-------------------------------------------
//repeating-radial-gradient():重複徑向漸變，文法與徑向漸變一樣 複制
3.過渡
<!------------------------------------>
<!--簡寫：transition:property duration timing-function times-->
<!--<' transition-property '>： 檢索或設定對象中的參與過渡的屬性 -->
<!--<' transition-duration '>： 檢索或設定對象過渡的持續時間 -->
<!--<' transition-timing-function '>： 檢索或設定對象中過渡的動畫類型 -->
<!--<' transition-delay '>： 檢索或設定對象延遲過渡的時間 -->
<!--多個屬性-->
<!--縮寫方式-->
transition: border-color .5s ease-in .1s,
background-color .5s ease-in .1s,
color .5s ease-in .1s;
<!--拆分方式-->
transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;
<!--所有屬性-->
transition:all 2s linear 1s; 複制
4.轉換
//-------------------------------
transform:
2D Transform Functions：
matrix()： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應用一個[a,b,c,d,e,f]變換矩陣
translate()： 指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0
translatex()： 指定對象X軸（水準方向）的平移
translatey()： 指定對象Y軸（垂直方向）的平移
rotate()： 指定對象的2D rotation（2D旋轉），需先有 <' transform-origin '> 屬性的定義
scale()： 指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設取第一個參數的值
scalex()： 指定對象X軸的（水準方向）縮放
scaley()： 指定對象Y軸的（垂直方向）縮放
skew()： 指定對象skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0
skewx()： 指定對象X軸的（水準方向）扭曲
skewy()： 指定對象Y軸的（垂直方向）扭曲
3D Transform Functions：
matrix3d()： 以一個4x4矩陣的形式指定一個3D變換
translate3d()： 指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
translatez()： 指定對象Z軸的平移
rotate3d()： 指定對象的3D旋轉角度，其中前3個參數分别表示旋轉的方向x,y,z，第4個參數表示旋轉的角度，參數不允許省略
rotatex()： 指定對象在x軸上的旋轉角度
rotatey()： 指定對象在y軸上的旋轉角度
rotatez()： 指定對象在z軸上的旋轉角度
scale3d()： 指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
scalez()： 指定對象的z軸縮放
perspective()： 指定透視距離
//--------------------------------
transform-origin:設定或檢索對象以某個原點進行轉換,
該屬性提供2個參數值。
如果提供兩個，第一個用于橫坐标，第二個用于縱坐标。
如果隻提供一個，該值将用于橫坐标；縱坐标将預設為50%。
對應的腳本特性為transformOrigin。
//--------------------------------
perspective:透視，在電腦上相當于到螢幕的距離
//-----------------------------
transfrom-style:flat： 指定子元素位于此元素所在平面内
preserve-3d： 指定子元素定位在三維空間内
指定某元素的子元素是（看起來）位于三維空間内，還是在該元素所在的平面内被扁平化。
/*1.當該屬性值為「preserve-3d」時，元素将會建立局部堆疊上下文。
2.決定一個變換元素看起來是處在三維空間還是平面内，需要該元素的父元素上定義
3.<' transform-style '> 屬性。 對應的腳本特性為transformStyle。 */ 複制
5.六壬神骰
//樣式
<style>
.box{
width: 600px;
height: 600px;
margin: 100px auto;
/*border: 1px solid #eee;*/
font-size: 40px;
color: white;
text-align: center;
line-height: 160px;
transform-style: preserve-3d;
perspective: 3000px;
position: relative;
transition: all 2s;
transform: rotateY(45deg) rotateX(45deg);
}
.box:hover{
transform: rotateY(360deg) rotateX(360deg);
}
.box>div{
width: 160px;
height: 160px;
position: absolute;
left: 50%;
top:50%;
margin-left: -80px;
margin-top: -80px;
}
.one{
background: rgba(186,175,12,0.6);
transform: translateZ(80px);
}
.two{
background: rgba(12,210,56,0.6);
transform: translateX(-80px) rotateY(90deg);
}
.three{
background: rgba(182,42,156,0.6);
transform: translateY(-80px) rotateX(90deg);
}
.four{
background: rgba(12,210,56,0.6);
transform: translateX(80px) rotateY(-90deg);
}
.five{
background: rgba(182,42,156,0.6);
transform: translateY(80px) rotateX(-90deg);
}
.six{
background: rgba(12,175,186,0.6);
transform: translateZ(-80px);
}
</style>
//結構
<div class="box">
<div class="one">洗碗</div>
<div class="two">拖地</div>
<div class="three">做飯</div>
<div class="four">看電視</div>
<div class="five">買菜</div>
<div class="six">獎品</div>
</div> 複制
