css3新增屬性

box-shadow

box-shadow: 10px 10px 10px rgba(54,54,54,0.36);
元素陰影，這個不會影響頁面布局；分別指定如下參數：

1. 水平偏移量，正數向右，負數向左
2. 垂直偏移量，正數向下，負數向上
3. 陰影模糊效果，數值越大越模糊
4. 顏色

border-radius

border-radius: 2px;
邊框圓角半徑，會影響box-shadow顯示

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

設置橢圓

border-radius: 30px/10px;

position: sticky;

粘滯定位，和相對定位類型，不同的是粘滯定位可以在元素到達某個位置時將其固定住，兼容性不好；
通過設置top、bottom、left、right設置固定范圍，當這些值設置為0px時，就是整個視口

漸變背景

漸變是圖片，需要通過background-image進行設置；

線性漸變

漸變默認是從上到下；

• linear-gradient(red, yellow) 從上到下，紅色到黃色的漸變
• linear-gradient(to right, red, yellow) to right指定漸變方向，這個指定方向還可以設置deg（度），turn(圈)
• 漸變可以同時指定多個顏色，多個顏色默認情況下平均分布，即指定的顏色之間的距離是相等的
  也可以手動指定分布情況：background-image: linear-gradient(red 20px, yellow 80px);，指定漸變分界顏色出現的位置

可重復的漸變背景

background-image: repeating-linear-gradient(red 0px, yellow 40px);

徑向漸變

• radial-gradient(red, yellow) red中心向四周輻射yellow

整體和線性漸變一樣；默認情況下徑向漸變的形狀根據元素形狀來計算，即：

• 元素為正方形，徑向漸變就是圓形

• 元素為長方形，徑向漸變就是橢圓

• 可以手動指定徑向漸變范圍的大小radial-gradient(100px 200px, red, yellow)
  這個指定大小存在預設值

  • closest-side 到達最近的邊
  • closest-corner 到達最近的角
  • farthest-side 到達最遠的邊
  • farthest-corner 到達最遠的角

• 可以手動指定元素的徑向漸變形狀：radial-gradient(circle, red, yellow)或者radial-gradient(ellipse, red, yellow)

• 可以手動執行元素徑向漸變的中心點位置radial-gradient(100px 200px at 0px 0px, red, yellow)

可重復的漸變背景

background-image: repeating-radial-gradient(red 0px, yellow 40px);

過渡

過渡，只有在屬性、樣式發生變化的時候才會執行，如hover狀態；
transition: 對象 時間，通過過渡指定一個屬性切換到目標狀態以過渡的方式，主要有兩個，一個是目標狀態，一個當前狀態，一個是過渡時間；

• transition: all 2s 所有屬性再2s內進行過渡
• transition: width 0.5s, height 1s;同時指定多個使用逗號隔開

分屬性

簡寫屬性無順序要求，只是路過同時使用duration和delay，那么第一個是duration，第二個是delay

• transition-property 指定要執行過渡的屬性，多個屬性使用逗號隔開，如果要針對所有屬性，那就設置為all

  • transition-property: width, height;
  • transition-property: all;

• transition-duration 執行執行過渡的持續時間，針對transition-property不同屬性設置的transition-duration也使用逗號隔開，然后會對應上去，如：

  transition-property: width, height;
  transition-duration: 1s, 2s;
  

• transition-timing-function 執行過渡的時間分布效果，注意，要看到效果一定要先指定transition-during；

  • ease 默認效果，慢速開始，先加速再減速
  • linear 勻速運動
  • ease-in 加速運動
  • ease-out 減速運動
  • ease-in-out 先加速后減速
  • cubic-bezier() 通過指定函數，通過網站https://cubic-bezier.com/#.17,.67,.83,.67可以得到這個曲線
  • steps() 指定過渡效果分幾步進行過渡，可設置一個、兩個值
    • 一個值就是指定分幾步
    • 兩個值就是制定分幾步，每次在一步的什么時候執行過渡

• transition-delay 指定進行過渡的延時

動畫

設置動畫效果，必須先要設置一個關鍵幀，動畫效果執行完畢就正常顯示元素。
簡寫屬性無順序要求，只是路過同時使用duration和delay，那么第一個是duration，第二個是delay

• animation-name 指定動畫的關鍵幀
• animation-duration 指定整個動畫持續時間
• animation-delay 指定動畫延時時間
• animation-timing-function 指定動畫播放時間函數，這個函數指的是關鍵幀之間的函數；
  • step() 指定的是關鍵幀之間的跳轉次數
• animation-iteration-count 動畫執行次數，默認一次
  • infinite 無限次
• animation-direction 方向
  • normal from -> to
  • reverse to -> from
  • alternate 交替 from -> to -> from …
  • alternate-reverse 反向交替 to -> from -> to …
• animation-play-state 控制動畫停止和播放
  • running 播放
  • paused 停止
• animation-fill-mode 動畫執行的填充效果
  • none 默認，動畫執行完畢元素回到元素屬性定義的位置
  • forward 動畫執行完畢元素停止到動畫結束的位置
  • backward 動畫延遲等待時，元素會處于動畫開始狀態，結束位置會回到none位置
  • both == backward + forward

關鍵幀

@keyframes
關鍵幀設置了動畫執行的每一個步驟；

與transition的關系

transition – 過渡，與transition類型，但是transition需要當元素屬性發生變化才會發生；而動畫可以自動觸發動態效果；

demo

.parent-30 {width: 100px;height: 100px;background-color: silver;/* 設置動畫 */animation-name: keyframe-1;animation-duration: 2s;animation-delay: 1s;animation-timing-function: ease-in-out;
}@keyframes keyframe-1 {
/* to表示動畫的開始位置，也可以使用 0% 表示 */
from {width: 100px;height: 100px;
}/* from表示動畫的結束位置，也可以使用 100% 表示 */
to {width: 200px;height: 200px;
}

<div class="parent-30"></div>

變形

變形是指元素形狀或位置發生的改變；他不會影響頁面布局；這個就是和margin的區別，margin會影響到布局。
transform 用來設置變形效果，變形效果如果想要看到3D效果，就要對變形元素的父元素設置persprctive屬性

平移

• translateX() 元素沿著X方向平移，平移使的百分比不是相對父元素，而是相對自身
• translateY() 元素沿著Y方向平移，平移使的百分比不是相對父元素，而是相對自身
  可以利用上面兩個實現可適應內容大小的塊盒居中
• translateZ() 元素沿著Z方向平移
  Z軸平移，正常情況下就是調整元素和人眼之間的距離，距離越大，元素離人越近
  Z軸平移屬于立體效果(近大遠小)，默認情況下網頁不支持，如果需要看見效果，必須要設置視距perspective：transform: perspective(800px) translateZ(200px);；設置視距之后Z軸平移才有效果；
  平移Z軸，他是將整個屏幕向用戶方向移動，就像場景視圖概念，此時場景向用戶移動，視圖顯示的范圍必定會縮小，于是顯示范圍會縮減，計算機的視圖一直是場景中心，因此會出現四周元素消失的情況。

使用

transform: translateX(-50%) translateY(-50%);這個是按照順序進行變形的。

旋轉

旋轉的時候立體坐標系的原點在元素的中心位置，橫穿原點的是x軸，縱穿原點的是y軸，垂直顯示器平面的是Z軸，站在軸的正方向，順時針旋轉時，旋轉角度為正數；逆時針為負數。
通過旋轉可以使元素沿著x、y、z旋轉指定的角度

• rotateZ 沿著Z旋轉，旋轉的點為元素中心
• rotateX 驗證X旋轉，旋轉的軸為X軸，是元素橫向的、元素縱向中點的那條線，父元素設置perspective有立體效果
• rotateY 沿著Y旋轉，旋轉的是Y軸，橫向左邊為元素中點，父元素設置perspective有立體效果
  旋轉到背面元素上的數據依舊是可見的，只不過是倒過去了。

使用

transform: rotateZ(45deg);

其他

backface-visibility

• visible 默認顯示
• hidden 這個不顯示是直接背景也都不顯示的

使用

transform: rotateY(45deg) translateZ(100px);，這個是按照順序進行變形的，先旋轉Y軸，然后Z軸也會跟著旋轉，因此平移Z軸時移動的方向并不是正對著人，而是會有一個偏移。

立體效果

perspective和transform-style均設置在父元素中

perspective

perspective 指定了觀察者與 z=0 平面的距離，使具有三維位置變換的元素產生透視效果。z>0 的三維元素比正常大，而 z<0 時則比正常小，大小程度由該屬性的值決定。
三維元素在觀察者后面的部分不會繪制出來，即 z 軸坐標值大于 perspective 屬性值的部分。
當該屬性值不為 0 和 none 時，會創建新的 層疊上下文。在這種情況下，容器內元素的層疊關系像是使用了 position: fixed 一樣。

元素位于3D空間還是平面中

transform-style

• flat 默認值，設置元素的子元素位于該元素的平面中，一般的移動(主要是Z軸移動），他是沒有效果的，即使有效果，那也是計算機計算出來的，僅顯示x、y平面上可以看到的；設置為preserve-3d，那么在顯示時會顯示Z軸方向上的信息。
• preserve-3d 指示元素的子元素應位于 3D 空間中。

縮放

縮放的本質是對軸進行拉伸，他是一種對像素的增益，而不是直接修改了像素，也就是說顯示像素=元素像素*增益

• transform: scaleX(2) 水平方向縮放
• transform: scaleY(3) 垂直方向縮放
• transform: scale(3) 雙方向上的縮放
• transform: scaleZ(3)
  如果transform-style為默認情況，即flat，那么對于單個元素，此時scaleZ()是看不出效果的，因為這種元素他只是一個平面的概念，他是沒有Z軸的，要看到Z軸的效果，就要將兩個元素(也就是兩個平面）利用position: absolute放置到相同x、y位置，然后旋轉Y軸才看的出來兩者的Z軸間隙。
  而單純的給人看的時候，兩者的像素一直都是不變的，因此單純在平面是無法觀測到的。

變形的原點

transform-origin，設定變形原點，所有的縮放均圍繞變形原點進行變形：旋轉、縮放均與該屬性相關。

• center 默認值，在中心位置，偶數為n/2,奇數為n/2 + 1
• transform-origin: 0px 0px

變量

兼容性差；
css中有變量的概念，但是兼容性存在問題。

變量的定義、作用域和使用

定義

定義就是在一個元素中使用--key: value;進行定義

作用域

css定義的變量的作用域是當前元素以及當前元素的后代元素

使用

var(--key)

示例

<style>.parent-1 {/* 定義變量 */--color: red;}.parent-1 .box-1 {width: 100px;height: 100px;/* 使用變量 */background-color: var(--color);}.parent-1 .box-2 {width: 100px;height: 100px;/* 使用變量 */color: var(--color);}
</style>

<div class="parent-1"><div class="box-1"></div><div class="box-2">123</div>
</div>

運算

兼容性差
如width: calc(100px / 2);