day 13

知識回顧

1、瀏覽器對應的私有字首

• 谷歌、蘋果 -webkit-
• 火狐 -moz-
• ie -ms-
• 歐朋 -o-

2、css3新增的選擇器有哪些

• 屬性選擇器
  • element[attr^=value]
  • element[attr$=value]
  • element[attr*=value]
• 結構偽類選擇器
  • ：first-child
  • ：last-child
  • ：nth-child(n)
  • ：nth-last-child(n)
  • :nth-of-type(n)
  • :nth-last-of-type(n)
• 狀態偽類選擇器
  • :checked
  • :disabled
  • :enabled

3、border-radius：20px 30px 40px代表什麼意思

圓角屬性，設定左上角20畫素，右上角30畫素，右下角40畫素，左下角30畫素

4、如何給盒子設定陰影

box-shadow:水平陰影位置 垂直陰影位置 模糊距離 陰影大小 陰影顏色 內/外陰影;

5、如何改變背景圖的大小

background-size

6、線性漸變

background:linear-gradient(方向，漸變顏色1，陰影顏色2,...)

一、css3使用者介面屬性

1、resize屬性

規定使用者是否可以調整元素的尺寸，ie不相容

注意: 如果需要給盒子來設定resize屬性,還需要給盒子設定一個overflow: auto;屬性

resize: none|both|horizontal|vertical;

• none 沒有
• both 使用者可以調整水平和垂直方向的尺寸
• horizontal 使用者可以調整水平方向的尺寸
• vertical 使用者可以調整垂直方向的尺寸

<style>
    textarea {
        resize: none;
    }
    .box {
        width: 300px;
        height: 200px;
        border: 1px solid red;
        overflow: auto;
        resize: both;
        resize: horizontal;
        resize: vertical;
    }
</style>
 

2、box-sizing屬性

允許以特定的方式定義匹配某個區域的特定元素

box-sizing: content-box|border-box;

• content-box 寬度和高度分別應用到元素的內容區，也就是說padding和border會在給定寬高之外繪製
• border-box 寬度和高度決定元素的邊框盒，也就是說元素的內容區域的寬高需要在給定寬高的基礎上分別減去padding和border的值，最終得到的結果才是內容區域的寬高

相容性：ie8+及標準瀏覽器最新版是支援的

二、多列布局

相容性：ie10+及標準瀏覽器最新版是支援的

1、column-count屬性

定義元素應該被劃分為幾列

column-count:number | auto;

• number 需要將內容分成幾列就寫數字幾
• auto 由其他屬性來決定分的列數

2、column-width屬性

定義欄目的寬度

column-width:auto | length;

• length 指定欄目寬度
• auto 自動，由其他屬性來決定分為幾列

3、column-gap屬性

定義列與列之間的間隔

column-gap: length | normal;

• length 把列與列之間的間隔設定指定長度
• normal 由瀏覽器自己決定間隔是多少，常規間隔，w3c建議的值是1em

4、column-rule屬性

簡寫，設定列之間的分割線的寬度、樣式和顏色

 column-rule: column-rule-width column-rule-style column-rule-color;

三、css3過渡效果

相容性：ie10+及標準瀏覽器最新版是支援的

1、transition-property

規定設定過渡效果的 CSS 屬性的名稱。

transition-property:none | all | property;

• none 沒有

• all 所有能過渡的屬性都完成過渡效果

• property 指定哪個屬性需要過渡

注意：只設置過渡屬性的名稱沒有效果，還需要配合過渡時間來使用

2、transition-duration

規定完成過渡效果需要多少秒或毫秒。

transition-duration:time;

• time 指定過渡完成的時間，常用的單位是秒（s）或者毫秒（ms）

3、transition-timing-function

規定速度效果的速度曲線。

transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out;

• linear 以勻速完成過渡效果
• ease 以慢速開始，然後變快，最後慢速結束完成過渡效果
• ease-in 以慢速開始的過渡效果
• ease-out 以慢速結束的過渡效果
• ease-in-out 以慢速開始和結束的過渡效果

4、transition-delay

定義過渡效果從何時開始。

transition-delay:time;

• time 在開始過渡效果之前需要等待多長時間，常用的單位是秒或者毫秒

5、transition簡寫

transition: transition-property  transition-duration  transition-timing-function  transition-delay;

簡寫屬性中過渡時間是必須屬性

四、css3中transform屬性

transform屬性，實現元素的2D轉換或者3d轉換

transform:none | transform-function;

• none 沒有（預設值）
• transform-function 變形函式

1、2d變換

（1）2d位移

transform: translate(x, y)     /*水平方向和垂直方向同時位移*/
transform: translateX(x)       /*水平方向位移*/
transform: translateY(y)       /*垂直方向位移*/

x,y的取值可以是正值或者負值

注意：

• 對行級元素無效

• 配合定位屬性實現盒子的絕對居中

   <style>
      .wrap {
          position: relative;
          width: 500px;
          height: 500px;
          background-color: blueviolet;
      }
      .box {
          position: absolute;
          left: 50%;
          top: 50%;
          /* margin-left: -50px;
          margin-top: -50px; */
          transform: translate(-50%,-50%);
          width: 189px;
          height: 189px;
          background-color: yellow;
      }
  </style>
  

（2）2d旋轉

transform: rotate(ndeg) 
transform: rotate(-ndeg)

n的取值可以是正值或者負值，正值是順時針旋轉，負值是逆時針旋轉

（3）2d縮放

transform: scale(x, y)        /*水平方向和垂直方向同時縮放*/
transform: scaleX(x)          /*水平方向進行縮放*/
transform: scaleY(y)          /*垂直方向進行縮放*/

放大： x,y的值大於1

縮小： x,y的取值0-1

x,y取值如果是負值，則先翻轉元素，然後在進行縮放

（4）2d傾斜

transform: skew(x, y)        /*水平方向和垂直方向同時傾斜*/
transform: skewX(x)          /*水平方向進行傾斜*/
transform: skewY(y)          /*垂直方向進行傾斜*/

2、基點變換

transform-origin 屬性 設定旋轉元素的基點位置

transform-origin:水平 垂直;

關鍵詞：

• 水平方向： left right center
• 垂直方向：top bottom center

一般情況下，第一個值是水平基點位置，第二個值是垂直基點位置，只給一個值，另一個值預設是center

百分比： 初始值是 50% 50%

3、3d變換

（1）3d位移

transform: translateZ()     元素在3D空間沿z軸進行位移

（2）3d旋轉

transform: rotateX() 元素圍繞X軸旋轉
transform: rotateY() 元素圍繞Y軸旋轉
transform: rotateZ() 元素圍繞Z軸旋轉

（3）3d縮放

transform:scaleZ(z)

4、透視屬性

perspective 透視屬性，用來設定視距

相容性：ie10+及標準瀏覽器最新版是支援的

5、3d空間

transform-style: preserve-3d | flat;

• preserve-3d 為子元素開啟3d空間
• flat 不開啟3d空間

注意： preserve-3d如果和overflow:hidden一起使用，3d效果將消失。

相容性：ie不支援

五、css3自定義動畫

1、定義動畫(關鍵幀動畫)

@keyframes 動畫名稱｛
    from{}
    to{}
｝

@keyframes 動畫名稱｛
    0%{}
    50%{}
    100%{}
｝

2、使用動畫

（1）animation-name

規定需要繫結到選擇器的 keyframe 名稱。

（2）animation-duration

規定完成動畫所花費的時間，以秒或毫秒計。

（3）animation-timing-function

規定動畫的速度曲線。

• linear 以勻速完成過渡效果
• ease 以慢速開始，然後變快，最後慢速結束完成過渡效果
• ease-in 以慢速開始的過渡效果
• ease-out 以慢速結束的過渡效果
• ease-in-out 以慢速開始和結束的過渡效果

（4）animation-delay

規定在動畫開始之前的延遲。

（5）animation-iteration-count

規定動畫應該播放的次數。

animation-iteration-count:n | infinite;

• n 設定播放幾次就寫幾
• infinite 迴圈

（6）animation-direction

規定是否應該輪流反向播放動畫。

animation-direction:normal | alternate;

• normal 正常
• alternate 反向輪流播放

（7）animation簡寫

animation: animation-name animation-duration animation-timing-function  animation-delay  animation-direction;

六、animate動畫庫

官網地址：https://animate.style/

使用方法：

（1）直接呼叫動畫名稱

.box1 {
    /* 使用方式1 */
    animation: bounce 1s infinite;
}

（2）呼叫類名

<!-- 使用方式二 -->
<div class="animated flash infinite">哈哈哈哈哈</div>