background-size: auto | <長(zhǎng)度值> | <百分比> | cover | contain

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

5.CSS3通配符

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

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

7.否定選擇器

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

9.空選擇器

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

10.:target選擇器稱(chēng)為目標(biāo)選擇器
匹配文檔(頁(yè)面)的url的某個(gè)標(biāo)志符的目標(biāo)元素, 用CSS表達(dá)對(duì)點(diǎn)擊事件的反應(yīng)
HTML代碼：

Brand
  <--點(diǎn)擊鏈接-->
<--顯示段落-->
    content for Brand

CSS代碼：

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

11.list列表去裝飾

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

12.nth-last-child(n)
從某父元素的最后一個(gè)子元素開(kāi)始計(jì)算，來(lái)選擇特定的元素。

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

14.狀態(tài)選擇器“:checked”配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式

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

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

15.::selection”偽元素是用來(lái)匹配突出顯示的文本(用鼠標(biāo)選擇文本時(shí)的文本)。

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

16.:read-only”偽類(lèi)選擇器用來(lái)指定處于只讀狀態(tài)元素的樣式。簡(jiǎn)單點(diǎn)理解就是，元素中設(shè)置了“readonly=’readonly’”,
“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來(lái)指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。

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

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

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

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

21.變形--原點(diǎn) transform-origin
transform-origin: left top;

22.過(guò)渡屬性 transition
通過(guò)鼠標(biāo)的單擊、獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動(dòng)畫(huà)效果改變CSS的屬性值。

在CSS中創(chuàng)建簡(jiǎn)單的過(guò)渡效果可以從以下幾個(gè)步驟來(lái)實(shí)現(xiàn)：
第一，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式；
第二，聲明過(guò)渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)；
第三，在默認(rèn)樣式中通過(guò)添加過(guò)渡函數(shù)，添加一些不同的樣式。

CSS3的過(guò)度transition屬性是一個(gè)復(fù)合屬性，主要包括以下幾個(gè)子屬性：

transition-property:指定過(guò)渡或動(dòng)態(tài)模擬的CSS屬性
transition-duration:指定完成過(guò)渡所需的時(shí)間
transition-timing-function:指定過(guò)渡函數(shù)
transition-delay:指定開(kāi)始出現(xiàn)的延遲時(shí)間

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.過(guò)渡函數(shù) transition-timing-function

24.動(dòng)畫(huà)定義關(guān)鍵幀

@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屬性主要用來(lái)定義動(dòng)畫(huà)的播放次數(shù)

26.animation-direction屬性主要用來(lái)設(shè)置動(dòng)畫(huà)播放方向，其語(yǔ)法規(guī)則如下：

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

其主要有兩個(gè)值：normal、alternate

1、normal是默認(rèn)值，如果設(shè)置為normal時(shí)，動(dòng)畫(huà)的每次循環(huán)都是向前播放；

2、另一個(gè)值是alternate，他的作用是，動(dòng)畫(huà)播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

27.設(shè)置動(dòng)畫(huà)的播放狀態(tài)
animation-play-state屬性主要用來(lái)控制元素動(dòng)畫(huà)的播放狀態(tài)。其主要有兩個(gè)值：running和paused。

28.animation-fill-mode屬性定義在動(dòng)畫(huà)開(kāi)始之前和結(jié)束之后發(fā)生的操作。主要具有四個(gè)屬性值：none、forwards、backwords和both。其四個(gè)屬性值對(duì)應(yīng)效果如下：
none 默認(rèn)值，表示動(dòng)畫(huà)將按預(yù)期進(jìn)行和結(jié)束，在動(dòng)畫(huà)完成其最后一幀時(shí)，動(dòng)畫(huà)會(huì)反轉(zhuǎn)到初始幀處
forwards 表示動(dòng)畫(huà)在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置
backwards 會(huì)在向元素應(yīng)用動(dòng)畫(huà)樣式時(shí)迅速應(yīng)用動(dòng)畫(huà)的初始幀
both 元素動(dòng)畫(huà)同時(shí)具有forwards和backwards效果

29.多列布局——Columns

columns： || 

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

30.column-gap主要用來(lái)設(shè)置列與列之間的間距，其語(yǔ)法規(guī)則如下：

column-gap: normal || 

31.列表邊框column-rule
column-rule主要是用來(lái)定義列與列之間的邊框?qū)挾?、邊框樣式和邊框顏色?跟border一樣
column-rule: 2px dotted green;

32.跨列設(shè)置column-span
column-span主要用來(lái)定義一個(gè)分列元素中的子元素能跨列多少,即跨越所以列

33.Responsive設(shè)計(jì)

對(duì)應(yīng)的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.外輪廓線: 外輪廓線不占用網(wǎng)頁(yè)布局空間,offset要多帶帶寫(xiě)

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

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

36.CSS生成內(nèi)容

我是元素

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

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

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

38.hsla顏色
H：
Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。取值為：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 /
可以用逗號(hào)隔開(kāi)，多重投影

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

background-position: right 20px bottom 10px;

background-origin
有兩個(gè)值，一個(gè)是content-box，即以?xún)?nèi)容為基準(zhǔn)，一個(gè)是padding box

background-origin: content-box;

42.漸變色的處理

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

1)20%表示色標(biāo)，表示從上到下20%的地方開(kāi)始漸變成#58a,并在80%的地方停止?jié)u變.
2)如果我們把第二個(gè)色標(biāo)的位置值設(shè)置為0，那它的位置就總是會(huì)被瀏覽器調(diào)整為前一個(gè)色標(biāo)的位置值
3)background: linear-gradient(to right, / 或 90deg /
#fb3 50%, #58a 0); 第一個(gè)值可以設(shè)置為方向，從下往上是0°，順時(shí)針?lè)较?br>4)整版無(wú)縫對(duì)接:

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

5)重復(fù)漸變:

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

43.background-size:為background-image中的每一個(gè)背景設(shè)置size，background-image中可以有多個(gè)圖形，第一個(gè)的優(yōu)先級(jí)最高，然后依次降低，就如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軸的偏移量，使用高斯模糊算法（或類(lèi)似算法）將它進(jìn)行4px 的模糊處理，這在本質(zhì)上表示在陰影邊緣發(fā)生陰影色和純透明色之間的顏色過(guò)渡長(zhǎng)度近似于模

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

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

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

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

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

  


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

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

(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 屬性則可以讓每層背景跟它的下層背景進(jìn)行混合

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

#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像素；剪裁矩形的左邊緣距離原元素左邊緣的距離時(shí)20像素。
注意: clip:rect矩形剪裁只能作用于position:absolute的元素上