CSS3-選擇器和過渡

一、選擇器和盒模型

1.屬性選擇器

• E[attr]:查找指定的擁有attr屬性的E標籤
• E[attr=value]:查找擁有指定的Attr屬性並且屬性值爲value的E標籤，=是嚴格匹配
• E[attr*=value]:查找擁有指定的attr屬性並且屬性值中包含(可以在任意位置)value的E標籤
• E[attr^=value]:查找擁有指定的attr屬性並且屬性值以value開頭的E標籤
• E[attr$=value]:查找擁有指定的attr屬性並且屬性值以value結束的E標籤

2.兄弟選擇器

• .first + li{}：查找添加了.first樣式的標籤的相鄰的下一個li元素，必須是指定類型的元素，如果下一個元素不是li則無效
• .first ~ li{}：查找添加了.first樣式的元素後面的所有兄弟li元素

3.僞類選擇器

• E:first-child:查找E元素的父級元素中的第一個E元素。如果第一個元素不是E，則設置無效
• E:last-child:同上
• E:first-of-type：在查找的時候只會查找滿足類型條件的元素，過渡掉其它類型的元素
• E:last-of-type：同上
• E:nth-of-type(n)：指定索引位置，當n=1時，爲第一個元素。n取值範圍爲0~子元素的長度。但是當n<=0時，選取無效
• E:target：可以爲錨點目標元素添加樣式，當目標元素被觸發爲當前錨鏈接的目標時，調用此僞類樣式
• p::first-letter：獲取第一個字符
• p::first-line：獲取第一行內容
• p::selection：設置當前選中內容的樣式，它只能設置顯示的樣式，而不能設置內容大小
• before和after：必須添加content屬性，否則後期不可見，默認是行級元素，如果想設置寬高，就必須轉換爲塊級元素

4.字體效果

• css3可以直接使用text-shadow屬性來指定陰影。這個屬性可以有兩個作用，產生陰影和模糊主體。這樣在不使用圖片時能給文字增加質感
• 用法：text-shadow:offsetX offsetY blur color；
• 前兩個屬性是偏移值，blur是模糊值（模糊的程度），color是陰影的顏色
• 例：text-shadow: -2px -2px 5px red;
• 多層陰影效果：text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;
• 浮雕立體效果：text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;

5.盒模型

• 在默認情況下，CSS設置的盒子寬度僅僅是內容區的寬度，而非盒子的寬度。同樣，高度類似。真正盒子的寬度（在頁面呈現出來的寬度）和高度，需要加上 padding + border + width。
• 設置屬性box-sizing：border-box，對象的實際寬度就等於設置的width值

6.邊框陰影

• box-shadow:h v blur spread color inset；
• h:水平方向的偏移值
• v:垂直方向的偏移值
• blur:模糊–可選，默認0
• spread:陰影的尺寸，擴展和收縮陰影的大小–可選 默認0
• color:顏色–可選，默認黑色
• inset:內陰影–可選,默認是外陰影

二、漸變和過渡

1.漸變：漸變產生的是圖像，所以需要使用background

• 線性漸變：linear-gradient(方向，開始顏色 位置，顏色2 位置，顏色3 位置…);

            /*方向：
            to top:0deg
            to right:90deg
            to bottom:180deg --默認值
            to left:270deg*/
            
            /*background: linear-gradient(to right,red,blue);*/
            background: linear-gradient(to right,red 0%,red 50%,blue 80%,blue 100%);

• 徑向漸變：background: radial-gradient(形狀 大小 座標,顏色1，顏色2…);

            形狀shape:circle:產生正方形的漸變色   ellipse:適配當前的形狀,如果是正方形的容器，兩者效果一樣.如果寬高不一樣，默認效果切換到ellipse
            at position:座標，默認在正中心。可以賦值座標（參照元素的左上角），也可以賦值關鍵字(left center right top bottom)
            大小size: closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角。默認是最遠的角farthest-corner*/
            /*background: radial-gradient(circle,red,blue);*/
            /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
            background: radial-gradient(at 10px 10px,red,blue);

• 重複漸變：

/*徑向漸變重複*/
background: repeating-radial-gradient(
            #fff 0%,#fff 10%,
            #000 10%,#000 20%);
/*線性漸變重複*/
background: repeating-linear-gradient(45deg,
            #fff 0%,#fff 10%,
            #000 10%,#000 20%);

2.背景樣式

• 背景平鋪：background-repeat

            /*3.設置背景平鋪
            round:會將圖片進行縮放之後再平鋪
            space:圖片不會縮放平鋪，只是會在圖片之間產生相同的間距值*/
            background-repeat: space;

• 背景是否滾動：background-attachment

            /*4.設置在滾動容器的背景的行爲：跟隨滾動/固定
            fixed:背景圖片的位置固定不變
            scroll:當滾動容器的時候，背景圖片也會跟隨滾動*/

            /*local和scroll的區別：前提是滾動當前容器的內容
            local:背景圖片會跟隨內容一起滾動
            scroll:背景圖片不會跟隨內容一起滾動*/
            background-attachment: fixed;

• 背景大小：background-size

/*contain:按比例調整圖片大小，使用圖片寬高自適應整個元素的背景區域，使圖片全部包含在容器內
1.圖片大於容器：有可能造成容器的空白區域,將圖片縮小
2.圖片小於容器：有可能造成容器的空白區域，將圖片放大*/
/*background-size: contain;*/

/*cover:與contain剛好相反，背景圖片會按比例縮放自 適應整個背景區域，如果背景區域不足以包含所有背景圖片，圖片內容會溢出
1.圖片大於容器：等比例縮小，會填滿整個背景區域，有可能造成圖片的某些區域不可見
2.圖片小於容器：等比例放大，填滿整個背景區域，圖片有可能造成某個方向上內容的溢出*/
background-size: contain;

• 提升移動端響應區域的大小，用到的樣式：background-origin，background-clip

            /*設置背景座標的原點
            border-box:從border的位置開始填充背景，會與border重疊
            padding-box:從padding的位置開始填充背景，會與padding重疊
            content-box:從內容的位置開始填充背景*/
            background-origin: content-box;
            /*設置內容的裁切:設置的是裁切，控制的是從哪裏顯示
            border-box:其實是顯示border及以內的內容
            padding-box:其實是顯示padding及以內的內容
            content-box:其實是顯示content及以內的內容*/
            background-clip: content-box;

3.過渡

• 語法：

            /*添加過渡效果:過渡效果執行完畢之後，默認會還原到原始狀態*/
            /*1.transition-property:添加過渡效果的樣式屬性名稱*/
            transition-property: left;
            /*2.transition-duration:過渡效果的耗時 以秒做爲單位*/
            transition-duration: 2s;
            /*3.transition-timing-function:設置時間函數--控制運動的速度*/
            transition-timing-function: linear;
            /*4.transition-delay:過渡效果的延遲*/
            transition-delay: 2s;

			/*簡寫 transition:屬性名稱 過渡時間  時間函數  延遲*/
			transition: left 2s linear 0s;

			/*爲多個樣式同時添加過渡效果*/
            transition: left 2s linear 0s,background-color 5s linear 0s;