css3 新特性 最新總結

一、選擇器

CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。

element1~element2: 選擇前面有element1元素的每個element2元素。
[attribute^=value]: 選擇某元素attribute屬性是以value開頭的。
[attribute$=value]: 選擇某元素attribute屬性是以value結尾的。
[attribute*=value]: 選擇某元素attribute屬性包含value字符串的。
E:first-of-type: 選擇屬于其父元素的首個E元素的每個E元素。
E:last-of-type: 選擇屬于其父元素的最后E元素的每個E元素。
E:only-of-type: 選擇屬于其父元素唯一的E元素的每個E元素。
E:only-child: 選擇屬于其父元素的唯一子元素的每個E元素。
E:nth-child(n): 選擇屬于其父元素的第n個子元素的每個E元素。
E:nth-last-child(n): 選擇屬于其父元素的倒數(shù)第n個子元素的每個E元素。
E:nth-of-type(n): 選擇屬于其父元素第n個E元素的每個E元素。
E:nth-last-of-type(n): 選擇屬于其父元素倒數(shù)第n個E元素的每個E元素。
E:last-child: 選擇屬于其父元素最后一個子元素每個E元素。
:root: 選擇文檔的根元素。
E:empty: 選擇沒有子元素的每個E元素（包括文本節(jié)點)。
E:target: 選擇當前活動的E元素。
E:enabled: 選擇每個啟用的E元素。
E:disabled: 選擇每個禁用的E元素。
E:checked: 選擇每個被選中的E元素。
E:not(selector): 選擇非selector元素的每個元素。
E::selection: 選擇被用戶選取的元素部分。

二、transition

當元素從一種樣式變換成另一種樣式時 , 為元素添加效果(不用使用Flash動畫或JS)

transition.png

三、transform

對元素在2D、3D進行旋轉 、 縮放 、 位移 、傾斜等操作
none: 定義不進行轉換。
matrix(n,n,n,n,n,n): 定義2D轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定義3D轉換，使用16個值的4x4矩陣。
translate(x,y): 定義2D位移轉換。
translate3d(x,y,z): 定義3D位移轉換。
translateX(x): 定義位移轉換，只是用X軸的值。
translateY(y): 定義位移轉換，只是用Y軸的值。
translateZ(z): 定義3D位移轉換，只是用Z軸的值。
scale(x,y): 定義2D縮放轉換。
scale3d(x,y,z): 定義3D縮放轉換。
scaleX(x): 通過設置X軸的值來定義縮放轉換。
scaleY(y): 通過設置Y軸的值來定義縮放轉換。
scaleZ(z): 通過設置Z軸的值來定義3D縮放轉換。
rotate(angle): 定義2D旋轉，在參數(shù)中規(guī)定角度。
rotate3d(x,y,z,angle): 定義3D旋轉。
rotateX(angle): 定義沿著X軸的3D旋轉。
rotateY(angle): 定義沿著Y軸的3D旋轉。
rotateZ(angle): 定義沿著Z軸的3D旋轉。
skew(x-angle,y-angle): 定義沿著X和Y軸的2D傾斜轉換。
skewX(angle): 定義沿著X軸的2D傾斜轉換。
skewY(angle): 定義沿著Y軸的2D傾斜轉換。
perspective(n): 為3D轉換元素定義透視視圖。

判斷3d旋轉方向.png

四、animation

讓css可以制作動畫

1.@keyframes(重點) 定義動畫的名稱和動畫的內(nèi)容
2.animation(重點) 以下所有動畫屬性的簡寫方式，除了 animation-play-state 屬性。
3.animation-name(了解) 引用動畫的名稱
4.animation-duration(了解) 設置動畫持續(xù)的時間，單位可以是 s(秒) ms(毫秒)
5.animation-timing-function(了解) 設置動畫的運動方式，默認是‘ease‘緩沖運動，還有'linear' 勻速運動
6.animation-delay(了解) 設置動畫延遲執(zhí)行時間，單位可以是 s(秒) ms(毫秒)
7.animation-iteration-count(了解) 設置動畫播放的次數(shù)，默認是 1，設置無數(shù)次用"infinite"
8.animation-direction(了解) 設置動畫是否在下一周期逆向返回，默認是 "normal"，不返回，還可以設置"alternate",返回
9.animation-play-state(了解) 設置動畫是否正在運行或暫停。默認是 "running",播放，暫停用"paused"

下面這段代碼的效果

        body{
            background-color: #333;
        }
        .con{
            width:380px;
            height:270px;
            margin:150px auto 0;
        }
        .con div{
            height:200px;
            width:24px;
            margin:15px;
            float: left;
            background:#ddd;
            border-radius:12px;
        }
        .con p{            
            text-align: center;
            font-size:18px;
            color:#fff;
        }
        .con .box:nth-child(1){
            background-color: #20c070;
            animation: jumping 500ms ease 0ms infinite alternate;
        }
        .con .box:nth-child(2){
            background-color: #3090d0;
            animation: jumping 500ms ease 100ms infinite alternate;
        }
        .con .box:nth-child(3){
            background-color: #9050b0;
            animation: jumping 500ms ease 200ms infinite alternate;
        }
        .con .box:nth-child(4){
            background-color: #e07020;
            animation: jumping 500ms ease 300ms infinite alternate;
        }
        .con .box:nth-child(5){
            background-color: #c03020;
            animation: jumping 500ms ease 400ms infinite alternate;
        }
        .con .box:nth-child(6){
            background-color: #e04030;
            animation: jumping 500ms ease 500ms infinite alternate;
        }
        .con .box:nth-child(7){
            background-color: #e04080;
            animation: jumping 500ms ease 600ms infinite alternate;
        }
        @keyframes jumping{
            from{
                transform:scale(1,0.3);
            }
            to{
                transform:scale(1,1); 
            }
        }
    </style>``
<body>
    <div class="con">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <p>LOADING...</p>
    </div>
</body>
loading.gif

五、邊框

  1. border-radius可以創(chuàng)建圓角邊框
  2. box-shadow可以為元素添加陰影
  3. border-image可以使用圖片來繪制邊框

六、背景

1.background-clip 屬性用于確定背景畫區(qū) (通常情況，背景都是覆蓋整個元素的，利用這個屬性可以設定背景顏色或圖片的覆蓋范圍)
background-clip: border-box; 背景從border開始顯示
background-clip: padding-box; 背景從padding開始顯示
background-clip: content-box;背景顯content區(qū)域開始顯示
background-clip: no-clip; 默認屬性，等同于border-box
2.background-origin 屬性用于確定背景的位置，它通常與background-position一起用 3. background-size 屬性常用來調整背景圖片的大小，主要用于設定圖片本身
4.background-break

七、文字效果

  1. word-wrap屬性允許您允許文本強制文本進行換行，即這意味著會對單詞進行拆分
  2. text-overflow設置或檢索當當前行超過指定容器的邊界時如何顯示
  3. text-shadow可向文本應用陰影
  4. text-decoration對文字的更深層次的渲染，具體有三個屬性可供設置：
    text-fill-color: 設置文字內(nèi)部填充顏色
    text-stroke-color: 設置文字邊界填充顏色
    text-stroke-width: 設置文字邊界寬度

八、漸變

教程

  1. linear-gradient(線性漸變)

  2. radial-gradient(徑向漸變)
    線性漸變.png

九、@font-face特性

通過css3 , 可以自由使用任意字體

十、多列布局

  1. column-count: 規(guī)定元素應該被分隔的列數(shù)。
  2. column-gap: 規(guī)定列之間的間隔。
  3. column-rule: 設置列之間的寬度、樣式和顏色規(guī)則

十一、界面

  1. resize屬性規(guī)定是否可由用戶調整元素尺寸
  2. box-sizing 有content-box、border-box和inherit三個值 (這里涉及標準盒模型和怪異盒模型)
  3. outline-offset屬性對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。

歡迎補充!!!~~~

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容