background-size: auto | <長度值> | <百分比> | cover | contain

1、auto：默認值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比與自身以填滿整個容器會溢出但不會顯示；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。

5.CSS3通配符

E[att^="val"]:選擇匹配元素E，且元素定義了屬性att，其屬性值以val開頭的任何字符串；
E[att$="val"]:選擇匹配元素E，且E元素定義了屬性att，其屬性值以val結尾的任何字符串。
E[att*="val"]:選擇匹配元素E，且E元素定義了屬性att，其屬性值任意位置包含了val。換句話說，字符串與屬性值中的任意位置相匹配。

6.:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是

7.否定選擇器

input:not([type="submit"]){  /*表單中除submit按鈕之外的input元素添加紅色邊框*/
  border:1px solid red;
}
div:not([id=footer]){  /*除頁腳”div#footer”之外的所有div設置橙色背景色*/
        background:orange;
}

9.空選擇器

p:empty {      /*如果是空格也不會被選中*/
  display: none;
}?

10.:target選擇器稱為目標選擇器
匹配文檔(頁面)的url的某個標志符的目標元素, 用CSS表達對點擊事件的反應
HTML代碼：

Brand
  <--點擊鏈接-->
<--顯示段落-->
    content for Brand

CSS代碼：

.menuSection{
  display: none;
}
#brand:target{/*這里的:target就是指id="brand"的div對象,如果有多個target,用#brand:target*/
  display:block;
}

11.list列表去裝飾

list-style:none;
text-decoration:none;

12.nth-last-child(n)
從某父元素的最后一個子元素開始計算，來選擇特定的元素。

13.:only-child, :only-of-type
父元素中只有一個子元素，而且只有唯一的一個子元素。

14.狀態選擇器“:checked”配合其他標簽實現自定義樣式

input[type="checkbox"] + span {
  opacity: 0;
}

input[type="checkbox"]:checked + span {
  opacity: 1;
}

15.::selection”偽元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。

::selection{
  background: orange;
  color: white;
}

16.:read-only”偽類選擇器用來指定處于只讀狀態元素的樣式。簡單點理解就是，元素中設置了“readonly=’readonly’”,
“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處于非只讀狀態時的樣式。

17.變形--旋轉 rotate()
transform: rotate(45deg);

18:變形--扭曲 skew()
將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜
transform:skew(45deg);

19:變形--縮放 scale()
scale(X,Y)使元素水平方向和垂直方向同時縮放
transform: scale(1.5);

20:變形--位移 translate()
使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
transform:translate(-50%,-50%);

21.變形--原點 transform-origin
transform-origin: left top;

22.過渡屬性 transition
通過鼠標的單擊、獲得焦點，被點擊或對元素任何改變中觸發，并平滑地以動畫效果改變CSS的屬性值。

在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現：
第一，在默認樣式中聲明元素的初始狀態樣式；
第二，聲明過渡元素最終狀態樣式，比如懸浮狀態；
第三，在默認樣式中通過添加過渡函數，添加一些不同的樣式。

CSS3的過度transition屬性是一個復合屬性，主要包括以下幾個子屬性：

transition-property:指定過渡或動態模擬的CSS屬性
transition-duration:指定完成過渡所需的時間
transition-timing-function:指定過渡函數
transition-delay:指定開始出現的延遲時間

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

23.過渡函數 transition-timing-function

24.動畫定義關鍵幀

@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}

div:hover {
  animation: changecolor 5s ease-out .2s;
}

25.animation-iteration-count屬性主要用來定義動畫的播放次數

26.animation-direction屬性主要用來設置動畫播放方向，其語法規則如下：

animation-direction:normal | alternate [, normal | alternate]*

其主要有兩個值：normal、alternate

1、normal是默認值，如果設置為normal時，動畫的每次循環都是向前播放；

2、另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

27.設置動畫的播放狀態
animation-play-state屬性主要用來控制元素動畫的播放狀態。其主要有兩個值：running和paused。

28.animation-fill-mode屬性定義在動畫開始之前和結束之后發生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：
none 默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處
forwards 表示動畫在結束后繼續應用最后的關鍵幀的位置
backwards 會在向元素應用動畫樣式時迅速應用動畫的初始幀
both 元素動畫同時具有forwards和backwards效果

29.多列布局——Columns

columns： || 

多列布局columns屬性參數主要就兩個屬性參數：列寬和列數。
主要用來定義多列中每列的寬度
主要用來定義多列中的列數
要顯示2欄顯示，每欄寬度為200px，代碼為：columns: 200px 2;

30.column-gap主要用來設置列與列之間的間距，其語法規則如下：

column-gap: normal || 

31.列表邊框column-rule
column-rule主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。 跟border一樣
column-rule: 2px dotted green;

32.跨列設置column-span
column-span主要用來定義一個分列元素中的子元素能跨列多少,即跨越所以列

33.Responsive設計

對應的CSS代碼：

@media (min-device-width:600px){
img[data-src-600px]{
  content: attr(data-src-600px,url);
  }
}
@media (min-device-width:800px){
  img[data-src-800px] {
  content:attr(data-src-800px,url);
  }
}

34.自由縮放屬性resize
resize: none | both | horizontal | vertical | inherit

35.外輪廓線: 外輪廓線不占用網頁布局空間,offset要多帶帶寫

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

 {
      outline: red solid 2px;
      outline-offset:2px;
  }

36.CSS生成內容

我是元素

可以通過”:after”和”content:attr(title)”將元素的”title”值插入到元素內容“我是元素”之后：

a:after {
  content:attr(title);
  color:#f00;
}

37.CSS長度單位
em: 相對于父元素的字體大小
ch: 數字“0”的寬度, 1ch表示此字體下的0的寬度
ex: 相對長度單位。相對于字符“x”的高度。通常為字體高度的一半。
rem: 相對長度單位。相對于根元素(即html元素)font-size計算值的倍數
vmax: 相對于視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax
vmin: 相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin

38.hsla顏色
H：
Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：
Saturation(飽和度)。取值為：0.0% - 100.0%
L：
Lightness(亮度)。取值為：0.0% - 100.0%
A：
Alpha透明度。取值0~1之間。

39.border-shadow
/ offset-x | offset-y | blur-radius | spread-radius | color /
可以用逗號隔開，多重投影

40.background-position
指定背景圖片距離任意角的偏移量，

background-position: right 20px bottom 10px;

background-origin
有兩個值，一個是content-box，即以內容為基準，一個是padding box

background-origin: content-box;

42.漸變色的處理

background: linear-gradient(#fb3 20%, #58a 80%); /*容器頂部的20% 區域被填充為#fb3 實色，而底部20% 區域被
填充為#58a 實色*/

1)20%表示色標，表示從上到下20%的地方開始漸變成#58a,并在80%的地方停止漸變.
2)如果我們把第二個色標的位置值設置為0，那它的位置就總是會被瀏覽器調整為前一個色標的位置值
3)background: linear-gradient(to right, / 或 90deg /
#fb3 50%, #58a 0); 第一個值可以設置為方向，從下往上是0°，順時針方向
4)整版無縫對接:

 background: linear-gradient(45deg,
                              #fb3 25%, #58a 0, #58a 50%,
                              #fb3 0, #fb3 75%, #58a 0);
                              background-size: 30px 30px;/*有三個地方有顏色過度*/

5)重復漸變:

background: repeating-linear-gradient(60deg,
              #fb3, #fb3 15px, #58a 0, #58a 30px);/*表示從#fb3開始，#fb3的15px開始漸變，每次差值為（15px-0）

43.background-size:為background-image中的每一個背景設置size，background-image中可以有多個圖形，第一個的優先級最高，然后依次降低，就如font一樣，

background-image:
    linear-gradient(90deg, red 10px, transparent 0),
    linear-gradient(90deg, blue 20px, transparent 0),
    linear-gradient(90deg, pink 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%; 

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color
分別表示X軸方向的偏移量，Y軸的偏移量，使用高斯模糊算法（或類似算法）將它進行4px 的模糊處理，這在本質上表示在陰影邊緣發生陰影色和純透明色之間的顏色過渡長度近似于模

糊半徑的兩倍，使用4px 的模糊半徑意味著投影的尺寸會比元素本身的尺寸大約8px，
因此投影的最外圈會從元素的四面向外顯露出來，擴張半徑，一個-5px 的擴張半徑會把投
影的寬度和高度各減少10px（即每邊各5px）。

給圖片加濾鏡的幾種方式, 濾鏡是可動畫的，而混合模式則不是
1) 加濾鏡:

img {
  transition: .5s filter;
  filter: sepia(1) saturate(4) hue-rotate(295deg);
}
img:hover,
img:focus {
  filter: none;
}

sepia()，它會給圖片增加一種降飽和度的橙黃色染色效果,用saturate() 濾
鏡來給每個像素提升飽和度,hue-rotate() 濾鏡，把每個像素的色相以指定的度數進行偏移

2) 基于混合模式的方案,控制了上層元素的顏色與下層顏色進行混合的方式:
(1)mix-blend-mode

  


a {
  background: hsl(335, 100%, 50%);
}
img {
  mix-blend-mode: luminosity;
}

luminosity 混合模式會保留上層元素的HSL 亮度信息，并從它的下層吸取色相和飽和度信息。如果在下層準備好我們想要的主
色調，并把待處理的圖片放在上層并設置為這種混合模式

(2)background-blend-mode

.tinted-image {
  width: 640px; height: 440px;
  background-size: cover;
  background-color: hsl(335, 100%, 50%);
  background-blend-mode: luminosity;
  transition: .5s background-color;
}
.tinted-image:hover {
  background-color: transparent;
}

使用backgroundblend-mode 屬性則可以讓每層背景跟它的下層背景進行混合

用border制作三角形
高度和寬度都設置為0，上下左右的border都分割為小三角形，設置為透明，只留下一個自己想要的

#triangle-left {
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-right: 7px solid #fff;
}

47.clip:rect屬性
"auto"就是不剪裁之意，重置rect的作用外
rect(top right bottom left):最終剪裁的矩形的上邊距離原始元素的上邊緣30像素；剪裁矩形的右邊緣距離原元素左邊緣的距離是200像素；剪裁矩形的下邊緣距離原元素頂部的距離為200像素；剪裁矩形的左邊緣距離原元素左邊緣的距離時20像素。
注意: clip:rect矩形剪裁只能作用于position:absolute的元素上