CSS3樣式整理

標籤：

CSS樣式整理

很多功能為了實現相容，需要加瀏覽器首碼

—— – webkit - ， chrome

—— – moz - ，firefox

—— – ms - ，IE

—— – o - ，opera

 

css3選取器

屬性選取器

E[attr]

E[attr=value]

E[attr^=value]首字母是value

E[attr$=value]尾部結束字元是value   aaa.doc

E[attr*=value]只要包含value

ul > li 表示後代

span + p 表示span後第一個p

span ~ p 表示span兄弟元素中所有p標籤

結構偽類別選取器

E：nth-of-type  是指父元素下E這個類型元素的第n個元素

E : nth-child 是指父元素下第n個元素且這個元素為E

E：only-of-type 是指父元素下只有E一個元素類型（但可能還有別的元素）

E ： only-child 是指父元素下只有E這一個元素

E：not(attr=value) 選擇除了E中有attr屬性的元素

E：empty 選擇沒有內容的E元素

狀態偽類別選取器

：focus 元素中有焦點時

：checked 元素被選中時

：first-letter 第一個字母 ：first-line 第一行

：enabled 能夠輸入值的元素

：disabled 禁用輸入的元素

：read-only 選擇唯讀元素

 

css3文字屬性

text-shadow ： 水平距離 垂直距離 模糊距離 顏色，…

火焰字效果

技術分享

    #fire{
    text-align: center;
    margin: 200px auto;
    font-family: "Comic Sans MS";
    font-size: 80px;
    color: white;

    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

    }

    body {background:black; }

原網址：

 

text-stroke : w color

鏤空字效果（須加首碼，只能在chrome下使用）

技術分享

    p {
                font-size: 100px;
               color: transparent;
               -webkit-text-stroke: 2px red;
            
            }

     

     

    @font-face {

    font-family : 名字

    src ： 嵌入字型地址

    好處 ： 解決了系統字型缺失 帶來的頁面文字效果的差別（iconfont）

    }

 

css3顏色透明度

opacity:0~1

rgba(0~255,0~255,0~255,0~1)

 

css3漸層

線性漸層

    background : linear-gradient  （方向(角度) ， 顏色1， 顏色2， …）

    1.第一個顏色後面百分比表示第一個到哪裡結束，後面的顏色百分比表示的都是從哪裡開始

    2.方向可以寫成角度，讓漸層主軸變換

技術分享

    p {
                width: 200px;
                height: 200px;
                background: linear-gradient(to top , blue 25%, yellow 50%, red 80%);
            
            }

放射狀漸層

background : radial-gradient( 方向( at 位置)， 顏色1， 顏色2，…)

技術分享

    p {
        width: 200px;
        height: 200px;
        background: radial-gradient(to top , blue 25%, yellow 50%, red 80%);
     
    }

最後分享兩個有關css3的網站：

      能線上看到css3的效果以及屬性對瀏覽器的相容性

.com   這個主要是查看css3屬性使用的相容性，比較全的

稿源：勤快學QKXue.NET

擴充閱讀：

http://qkxue.net/info/29685/css-3

http://qkxue.net/info/30109/css-3

http://qkxue.net/info/30056/css-3

http://qkxue.net/info/30099/css-3

http://qkxue.net/info/30042/CSS

CSS3樣式整理