CSS3新特性

原創 我的绝伦大人 2020-02-21 03:04

CSS3新特性

CSS3的特性那麼多該從哪裏說起了？很顯然這道題目是有陷阱的，你不可能將所有的特性一個不漏的說
出來，就算你說出來，別人還認爲你是背的了！所以你主要講一下在項目中經常用到的Css3的屬性就可以   
，以第一人稱來回答這個問題，例如：在我們的項目中經常用CSS3中的XX屬性來實現XX特效。

一、圓角

使用 CSS3 border-radius 屬性，你可以給任何元素製作 "圓角"。

由浮點數字和單位標識符組成的長度值。不可爲負值。各種長度單位都可以：px，%

如果你在 border-radius 屬性中只指定一個值，那麼將生成 4 個 圓角。
但是，如果你要在四個角上一一指定，可以使用以下規則：

  • 四個值: 第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。
  • 三個值: 第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角
  • 兩個值: 第一個值爲左上角與右下角，第二個值爲右上角與左下角
  • 一個值： 四個圓角值相同

具體的原理見此處

代碼實例： 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{margin:0;}
        ul{margin:0; padding:0;}
        li{list-style:none;}
        .clearfix:before,.clearfix:after{display:table; content:"";}
        .clearfix:after{clear:both;}
        .clearfix{*zoom:1;}
         div{
            float:left;
        }
        #div0{
            /* 做環形，只要在圓的基礎上加一個border即可 */
            width:100px;
            height:100px;
            background-color: yellow;
            border: 80px solid red;     /* border的寬度可以隨意設置，都是環形,只是環的寬度不同*/
            border-radius:50%;
        }
        #div1{ 
        /*把寬度（width）與高度(height)值設置爲一致（也就是正方形），並且四個圓角值都設置爲它們值的一半*/
        width:100px;  
        height:100px;  
        background-color:yellow;  
        border-radius:50px 50px 50px 50px;  
        }  
        #div2{
            width:100px;  
            height:50px;  
            background-color:yellow;  
            border-radius:50px 50px 0px 0px;  
        }
        #div3{
            width:200px;  
            height:100px; 
            background-color: blue;
            border-radius: 100px/50px;
        }
        #div4{
            /* 使用transform和rotate相結合，使兩個正反三角形上下顯示。 */
             width: 100px;  
            height: 100px;  
            background: #8e00ff;  
            /* Rotate */  
            -webkit-transform: rotate(-45deg);  
            -moz-transform: rotate(-45deg);  
             -ms-transform: rotate(-45deg);  
            -o-transform: rotate(-45deg);  
             transform: rotate(-45deg);  
            /* Rotate Origin */  
            -webkit-transform-origin: 0 100%;  
            -moz-transform-origin: 0 100%;  
            -ms-transform-origin: 0 100%;  
            -o-transform-origin: 0 100%;  
            transform-origin: 0 100%;  
            margin: 40px 0 10px 240px;  
        }
        #div5{
            /* 寬度和高度設置爲0，border設置左，右邊透明，底邊可見Solid。 */
             width: 0;  
            height: 0;  
            float: left;  
            border-bottom: 100px solid #fcf706;  
            border-left: 50px solid transparent;  
            border-right: 50px solid transparent;  
        }
    </style>
</head>
<body>
    <div id="all clearfix">
        <div id="div0">
        </div>
        <div id="div1">實心圓</div>
        <div id="div2">半圓</div>
        <div id="div3">橢圓</div>
        <div id="div4">菱形</div>
        <div id="div5">三角形</div>
    </div>
</body>
</html>

這裏寫圖片描述

更多圖形繪製看這裏

三角形的繪製

原理剖析見這裏 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
*{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    color:#000;
}
body{margin:0;}
ul{margin:0; padding:0;}
li{list-style:none;}
a{text-decoration:none; color:#000;border:0;}
a:link{text-decoration:none; color:#000;}
a:hover{text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#000;}
a:active{text-decoration:none; color:#000;}
#rect{
    width: 100px;  
    height: 100px;  
    border:2px solid #000;   //左邊的矩形框  
     position: relative;  
}

#rect:before,#rect:after{  
    content: ' ';  
     position: absolute;  
     left: 10px;
     border: solid transparent;    //僞元素設置爲透明框  
}  
 #rect:after{  
    width: 0px;  
    height: 0px;  
    top:22px; 
    left:98px; 
    border-width: 8px;  
    border-left: 8px solid  #fff;    //after元素，左三角形，白色，小三角形，會遮蓋before元素  
}   
#rect:before{  
    width: 0px;  
    height: 0px;  
    top:20px; 
    left:98px; 
    border-width: 10px;  
    border-left: 10px solid #000;  //黑色大左三角形，被白色覆蓋一部分，正好剩下2px的邊  
}  
</style>
<body>
    <div id="rect">
        <!-- 總結：邊框爲2px,兩個僞元素寬度差2px,縱向位移差2px -->
    </div>
</body>
</html>

這裏寫圖片描述

這裏寫圖片描述

二、陰影

box-shadow是向盒子添加陰影。   

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

這裏寫圖片描述

注意：inset 可以寫在參數的第一個或最後一個，其它位置是無效的。

①如果添加多個陰影，只需用逗號隔開即可。如：

.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

②陰影模糊半徑與陰影擴展半徑的區別 

陰影模糊半徑：此參數可選，其值只能是爲正值，如果其值爲0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴展半徑：此參數可選，其值可以是正負值，如果值爲正，則整個陰影都延展擴大，反之值爲負值時，則縮小；

③.X軸偏移量和Y軸偏移量值可以設置爲負數 

 x軸正值：陰影在右邊右側，反之，左邊左側 
 y軸正值：陰影在下邊下側，反之，上邊上側

CSS3邊框 爲邊框應用圖片 border-image

顧名思義就是爲邊框應用背景圖片，它和我們常用的background屬性比較相似

這裏寫圖片描述 

repeat就是一直重複，然後超出部分剪裁掉，而且是居中開始重複。  

Round可以理解爲圓滿的鋪滿。爲了實現圓滿所以會壓縮（或拉伸）  

Stretch 很好理解就是拉伸，有多長拉多長。有多遠“滾”多遠

CSS3顏色 顏色之RGBA

RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA是在RGB的基礎上增加了控制alpha透明度的參數。 

  color：rgba(R,G,B,A)

以上R、G、B三個參數，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並非所有瀏覽器都支持使用百分數值。A爲透明度參數，取值在0~1之間，不可爲負值。

三、CSS3變形

transform（重點）

transform 的屬性有以下幾類

①translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定義位置的移動距離。
②scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)：定義元素的縮放比例。
③rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定義元素的旋轉角度。
④skew(x-angle,y-angle)、skewX(angle)、skewY(angle)：定義元素的傾斜角度。

這裏寫圖片描述

可以認爲電腦屏幕中心是原點，原點往右就是X軸正方向，往下就是Y軸正方向，往屏幕前方（也就是往人臉）的方向就是Z軸的正方向了

（A）transform-style指定嵌套元素如何在3D空間中呈現。
transform-style: flat | preserve-3d

flat是默認值，表示所有子元素在2D平面呈現；preserve-3d表示所有子元素在3D空間中呈現。

（B）transform-origin用來改變元素的原點位置。

  • transform-origin:center（默認值，等價於：center center/ 50% 50%）—–（幾何中心）
  • transform-origin:top（等價於：top center/center top）——（上邊中）
  • transform-origin:bottom（等價於：bottom center/center bottom）——（下邊中）
  • transform-origin:right（等價於：right center/center right）—–（右邊中）
  • transform-origin:left（等價於：left center/center left）—–（左邊中）
  • transform-origin:top left（等價於：left top）——-（左上角）
  • 同理，還可以設置爲：transform-origin:top right（右上角爲原點）、transform-origin:bottom right（右下角爲原點）、transform-origin:bottom left（左下角爲原點）

perspective屬性———-透視，視角！該屬性用來激活一個3D空間

當爲元素定義perspective屬性時，其子元素都會獲得透視效果（使用了3D變換的元素）。所以一般來說perspective屬性都應用在父元素上，我們可以把這個父元素稱爲舞臺元素。

另外，perspective的取值也一直是個謎，經過我的多次查閱和測試，得出了一下幾個結論：

取值爲none或不設置，就沒有3D空間。
取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
貌似當取值爲元素的寬度時，視覺效果比較好。

(1)旋轉 rotate()

旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。如果這個值爲正值，元素相對原點中心順時針旋轉；如果這個值爲負值，元素相對原點中心逆時針旋轉。

transform: rotate(45deg);

旋轉方向（3D）

①rotateX（正值）：站在X軸正方向上順時針旋轉 
②rotateY(正值)：站在Y軸正方向上順時針旋轉  
③rotateZ(正值)：站在Z軸正方向順時針旋轉

(2)扭曲 skew()

扭曲skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞着X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。

  ①skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）

這裏寫圖片描述

   ②skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

這裏寫圖片描述 

  ③skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）

這裏寫圖片描述

(3)縮放 scale()

縮放 scale()函數 讓元素根據中心原點對對象進行縮放。 

 ① scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）

這裏寫圖片描述 

      ②scaleX(x)元素僅水平方向縮放（X軸縮放）

這裏寫圖片描述 

      ③scaleY(y)元素僅垂直方向縮放（Y軸縮放）

這裏寫圖片描述

注意： scale()的取值默認的值爲1，當值設置爲0.01到0.99之間的任何值，作用使一個元素縮小；而任何大於或等於1.01的值，作用是讓元素放大。

(4)位移 translate() —–重點

translate()函數可以將元素向指定的方向移動，類似於position中的relative。或以簡單的理解爲，使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。 

  ①translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）----正值默認向右向下   
  ②translateX(x)僅水平方向移動（X軸移動）   
  ③translateY(Y)僅垂直方向移動（Y軸移動）

用法：令不知道寬度和高度的元素，水平居中和垂直居中

四.CSS3中的動畫

(1)過渡屬性 transition-property

transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一箇中點值的屬性（需要產生動畫的屬性）才能具備過渡效果。

這裏寫圖片描述

（2）過渡所需時間 transition-duration

transition-duration屬性主要用來設置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續時間。

（3）過渡函數 transition-timing-function

transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：

這裏寫圖片描述

（4）過渡延遲時間 transition-delay

transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設置過渡動畫的持續時間，而transition-delay主要用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行。

有時我們想改變兩個或者多個css屬性的transition效果時，只要把幾個transition的聲明串在一起，用逗號（“，”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：第一個時間的值爲 transition-duration，第二個爲transition-delay。

總結：transition屬性
transition: all .28s ease-in .1s;

這裏寫圖片描述

動畫的執行方面和設置

(1)調用動畫

animation-name屬性主要是用來調用 @keyframes 定義好的動畫。需要特別注意: animation-name 調用的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區分大小寫），如果不一致將不具有任何動畫效果。

(2)設置動畫播放時間

animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒

(3)設置動畫播放方式

animation-timing-function屬性主要用來設置動畫播放方式。主要讓元素根據時間的推進來改變屬性值的變換速率，簡單點說就是動畫的播放方式。它和transition中的transition-timing-function一樣，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。

(4)設置動畫開始播放的時間

animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。和transition-delay屬性一樣，用於定義在瀏覽器開始執行動畫之前等待的時間。

(5)設置動畫播放次數

animation-iteration-count屬性主要用來定義動畫的播放次數。如果取值爲infinite，動畫將會無限次的播放。

(6)設置動畫播放方向

其主要有兩個值：normal、alternate

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

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

(7)設置動畫的播放狀態

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

其中running是其默認值，主要作用就是類似於音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這裏的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。

(8)設置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始之前和結束之後發生的操作。主要具有四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果如下：
這裏寫圖片描述

在默認情況之下，動畫不會影響它的關鍵幀之外的屬性，使用animation-fill-mode屬性可以修改動畫的默認行爲。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最後一個關鍵幀上而不回到動畫的第一幀上。或者同時具有這兩個效果。

總結（重點了解）：translate，transform，translation，anmiation的區別

1.translate:translate()函數可以將元素向指定的方向移動，類似於position中的relative。或以簡單的理解爲，使用translate()函數，可以把元素從原來的位置移動
2.transform:靜態屬性！只要寫進style裏就會直接顯示生效，不會出現動畫過程。**通過使用transform屬性，能夠對元素進行移動（translate）、縮放（scale）、旋轉（rotate）、翻轉（skew）
3.translation:允許CSS屬性值在一定的時間區間內平滑的過渡，需要事件的觸發，例如單擊、獲取焦點、失去焦點等
4.animation:關鍵幀 keyframe 實現自定義動畫，通過對關鍵幀的設定來實現，也就是規定從起始點（0%）到終點（100%）之間的具體節點上的動畫樣式。animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果。

五、漸變(瞭解)

詳細實例參考這裏

  • 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
  • 徑向漸變（Radial Gradients）- 由它們的中心定義

（一）線性漸變

語法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);   

從上到下的漸變

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 標準的語法（必須放在最後） */
}

這裏寫圖片描述

從左到右的線性漸變：(注意不同瀏覽器對應的起點位置)------起點是紅色，慢慢過渡到藍色：

        #grad {
          background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
          background: linear-gradient(to right, red , blue); /* 標準的語法 */
        }

這裏寫圖片描述 

對角漸變  

#grad { 
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */ 
}
使用角度

（二）徑向漸變

爲了創建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。
同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。默認情況下，漸變的中心是    
center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner   
（表示到最遠的角落）。

background: radial-gradient(center, shape size, start-color, …, last-color); 

#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green, blue); /* 標準的語法（必須放在最後） */
}

這裏寫圖片描述

六、選擇器補充 （重點）

結構型僞類
  • E:nth-child(n) 表示E父元素中的第n個子節點，且類型爲E——先找個數，再找類型
  • p:nth-child(odd){background:red}/匹配奇數行/
  • p:nth-child(even){background:red}/匹配偶數行/
  • E:nth-last-child(n) 表示E父元素中的第n個子節點，從後向前計算，且類型爲E
  • E:nth-of-type(n) 表示E父元素中的第n個E子節點，:nth-of-type能夠從指定類型的子元素開始計數，只按照E計數，其他忽略
  • E:nth-last-of-type(n)表示E父元素中的第n個E子節點，從後向前計算
  • E:empty 表示E元素中沒有子節點。注意：包含文本節點
  • E:first-child 表示E父元素中的第一個子節點，且類型爲E
  • E:last-child 表示E父元素中的最後一個子節點，且類型爲E
  • E:first-of-type 表示E父元素中的第一個E子節點
  • E:last-of-type 表示E父元素中的最後一個E子節點
  • E:only-child表示E父元素中只有一個子節點。注意：不包含文本節點
  • E:only-of-type 表示E父元素中只有一個子節點，且這個唯一的子節點的類型必須是E。注意：不包含文本節點

總結：操作的元素爲子節點，存在多層父子結點時，要逐級下找。nth-child(n)先找個數，再找類型，:nth-of-type能夠從指定類型的子元素開始計數 只按照E計數，其他忽略 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    div p,div div{ margin:0;height:30px; margin-bottom:5px; background-color:#ccc;}
    div:nth-of-type(2) p:nth-child(2){background-color: chartreuse} //橄欖綠
    div:nth-of-type(1) p:nth-child(1){background-color: blue}
    div:nth-child(1) div:nth-child(2){background-color: aqua}  //水色
    div:nth-child(2) div:nth-child(1){background-color: antiquewhite} //古董白
    div:nth-child(2) div:nth-of-type(2){background-color: gold}  //金色
</style>
<body>
    <div>
        <p></p>
        <div></div>
    </div>
    <div>
        <div></div>
        <p></p>
        <div></div>
    </div>
</body>
</html>

這裏寫圖片描述

p:nth-child(2) 選擇每個P元素是其父級的第二個子元素
p:nth-of-type(2) 選擇每個P元素是其父級的第二個P元素
nth-child(n)表示，選擇滿足以下條件的元素：第一是一個p元素；第二是父元素的第n個子元素
nth-of-type(n)表示，選擇父元素的第n個子元素p ，只看P元素 

僞類選擇器

E:target 表示當前的URL片段的元素類型（id被a的href鏈接並被點擊），這個元素必須是E
E:disabled 表示不可點擊（獲取焦點）表單控件
E:enabled 表示可點擊（獲取焦點）的表單控件
E:checked 表示已選中的checkbox或radio

七、Webfont———–@font-face

//該樣式應寫爲公共樣式，否則會出現圖標錯亂,把所有人的圖標集中到一起，生成一個font-face  
@font-face {
  font-family: 'iconfont';  /* project id 371504 */
  src: url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.eot');
  src: url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_a6cizs0f81gaatt9.svg#iconfont') format('svg');
}

這裏寫圖片描述

unicode引用

兼容性最好，支持ie6+，及所有現代瀏覽器。
支持按字體的方式去動態調整圖標大小，顏色等等。
但是因爲是字體，所以不支持多色。只能使用平臺裏單色的圖標，就算項目裏有多色圖標也會自動去色。
unicode使用步驟如下：

第一步：拷貝項目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：定義使用iconfont的樣式

//這個寫到自己的頁面內部就可以
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    }

第三步：挑選相應圖標並獲取字體編碼，應用於頁面

<i class="iconfont">&#x33;</i>

其他用法見這裏

網絡字體(Web font)文件格式

目前最主要的幾種網絡字體(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format幾個詞的首字母簡寫。這種字體格式專門用於網上，由Mozilla聯合其它幾大組織共同開發。WOFF字體通常比其它字體加載的要快些，因爲使用了OpenType (OTF)和TrueType (TTF)字體裏的存儲結構和壓縮算法。這種字體格式還可以加入元信息和授權信息。這種字體格式有君臨天下的趨勢，因爲所有的現代瀏覽器都開始支持這種字體格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一種用矢量圖格式改進的字體格式，體積上比矢量圖更小，適合在手機設備上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字體格式。火狐推遲對SVG字體的支持，重點放在WOFF格式上。SVGZ是壓縮版的SVG。

EOT

Embedded Open Type。這是微軟創造的字體格式(是微軟在15年前發明了網絡字體@font-face)。這種格式只在IE6/IE8裏使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因爲這種格式容易被複制(非法的)，這才催生了WOFF字體格式。然而，OpenType有很多獨特的地方，受到很多設計者的喜愛。

八、CSS3 多媒體查詢

CSS3 的多媒體查詢繼承了 CSS2 多媒體類型的所有思想： 取代了查找設備的類型，CSS3 根據設置自適應顯示。媒體查詢可用於檢測很多事情，例如：

viewport(視窗) 的寬度與高度
設備的寬度與高度
朝向 (智能手機橫屏，豎屏) 。
分辨率

詳細介紹見這裏

以下實例中在屏幕可視窗口尺寸大於 480 像素的設備上修改背景顏色: 

@media screen and (min-width: 480px) {
    body {
       background-color: lightgreen;
    }
}

製作單選框 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{display:block; width:20px; height:20px; background-color:#ccc; border-radius:50%;}
        label{display:block; width:20px; height:20px;}
        input{position:absolute; left:-5000px;}
        input:checked~span{background-color:red;}
        /* “~”能選擇該選擇器後的所有同級選擇器 */
    </style>
</head>
<body>
<label>
    <input type="radio" name="a"/>
    <span></span>
</label>
<label>
    <input type="radio" name="a"/>
    <span></span>
</label>
<label>
    <input type="radio" name="a"/>
    <span></span>
</label>
</body>
</html>

這裏寫圖片描述

我的絕倫大人
發佈了31 篇原創文章 · 獲贊 9 · 訪問量 1萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

CSS預處理器和後處理器

css預處理器 一、什麼是css預處理器？ CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增加了一些編程的特性，將CSS作爲目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS

我的绝伦大人 2020-07-08 09:19:30

css剩餘部分

一、link和@import的區別 頁面中引入的方式有三種： 1.在行內定義style屬性 2.頁面頭部內嵌<style>標籤 3.通過link和@import鏈接樣式表 <link rel="styles

我的绝伦大人 2020-07-08 09:19:30

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

bootstrap側邊導航欄的實現

https://blog.csdn.net/kebi007/article/details/76038251 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

吃鱼的羊 2020-07-08 05:50:47

移動web端css實現文本單行省略及多行省略

單行省略： selector{ text-overflow: ellipsis;/*這就是省略號嘍*/ overflow: hidden;/*設置超過的隱藏*/ white-space: nowrap;/*設置不斷行*/

Tyler-阿信 2020-07-08 04:54:20

CSS hack 整理（更新於20141109）

瀏覽器的兼容性一直是個頭疼的問題，使用“欺騙”技術可使各個瀏覽器效果一致，花了些時間整理了各個瀏覽器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比較全面的記錄下Hack，內容包括3部分

Tyler-阿信 2020-07-08 04:54:20

CSS實現button按鈕閃爍效果

最近有個奇葩需求，我們客戶要求按鈕要像星星一樣一閃一閃的！！！.......... <el-button type="success" class="flash animated infinite">按鈕</el-button> .

橘猫猫猫猫丶 2020-07-08 04:09:33

CSS＋JS實現瀏覽器不保存用戶名密碼

因爲信息安全問題，客戶要求在輸入密碼的時候，不讓瀏覽器彈出是否保存用戶名密碼的框框..... 調查發現只要將input的type指定爲password就會提示，所以想了這麼個辦法... 只試過IE11和Chrome，其他瀏覽器不知道好不好

橘猫猫猫猫丶 2020-07-08 04:09:33

自用省市級聯及定位

省市二級級聯===========================***///初始化省級聯==============================

iteye_3912 2020-07-08 01:01:43

CSS 基礎（020_下拉式菜單）

原始地址：http://www.w3schools.com/css/css_dropdowns.asp 翻譯： CSS 下拉式菜單（CSS Dropdowns） 使用 CSS 創建可懸停、下拉式菜單。 演示：下拉式菜單示例 移

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（019_導航欄）

原始網址：http://www.w3schools.com/css/css_navbar.asp 翻譯： CSS 導航欄 演示：導航欄 <!DOCTYPE html> <html lang="en-US"><head><me

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（009_Max-width）

原始網址：http://www.w3schools.com/css/css_max-width.asp 翻譯： CSS Layout - width and max-width 使用 width，max-width 和 marg

柯南道尔2606 2020-07-07 23:39:15

CSS3 基礎（005_3D 變換）

原始網址：http://www.w3schools.com/css/css3_3dtransforms.asp 翻譯： CSS3 3D 變換（CSS3 3D Transforms） CSS 3D 變換 CSS3 允許你使用 3D

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（014_Align）

原始網址：http://www.w3schools.com/css/css_align.asp 翻譯： CSS Layout - Horizontal & Vertical Align <!DOCTYPE html> <html

柯南道尔2606 2020-07-07 23:39:15