css3(持續更新...)

時間 2019-12-13

標籤 css3 css 持續更新欄目 CSS 简体版

原文原文鏈接

一、瀏覽器支持： chrome、safari、firefox、opera、360、IE10之後。

二、瀏覽器前綴：

-webkit(chrome和safari)

-moz(firefox)

-ms(IE)

-o(opera)

三、圓角效果

border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */

四、陰影效果box-shadow

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

若是添加多個陰影，只需用逗號隔開便可。

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

}

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

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

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

X軸偏移量和Y軸偏移量值能夠設置爲負數

五、爲邊框應用圖片border-image

Round 參數：Round能夠理解爲圓滿的鋪滿。爲了實現圓滿因此會壓縮（或拉伸）；

#border-image {

width:170px;

height:170px;

border:70px solid;

border-image:url(borderimg.png) 70 round;

}

Stretch 很好理解就是拉伸，有多長拉多長。有多遠「滾」多遠。css3

border-image:url(borderimg.png) 70 stretch

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

語法：chrome

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

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

七、漸變色彩

線性漸變：

八、text-overflow與word-wrap

text-overflow用來設置是否使用一個 省略標記（...）標示對象內文本的溢出。

text-overflow只是用來講明文字溢出時用什麼方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果，代碼以下：瀏覽器

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

同時， word-wrap也能夠用來設置 文本行爲，當前行超過指定容器的邊界時是否斷開轉行。

九、嵌入字體@font-face

@font-face可以加載服務器端的字體文件，讓瀏覽器端能夠顯示用戶電腦裏沒有安裝的字體。服務器

語法：函數

@font-face {
    font-family : 字體名稱;
    src : 字體文件在服務器上的相對或絕對路徑;
}

這樣設置以後，就能夠像使用普通字體同樣在 （font-*）中設置字體樣式。

十、文本陰影text-shadow

text-shadow能夠用來設置文本的陰影效果。工具

語法：佈局

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示陰影的水平偏移距離，其值爲正值時陰影向右偏移，反之向左偏移；

Y-Offset：是指陰影的垂直偏移距離，若是其值是正值時，陰影向下偏移，反之向上偏移；

Blur：是指陰影的模糊程度，其值不能是負值，若是值越大，陰影越模糊，反之陰影越清晰，若是不須要陰影模糊能夠將Blur值設置爲0；

Color：是指陰影的顏色，其可使用rgba色。

十一、background-origin

設置元素背景圖片的原始起始位置。

語法：

background-origin ： border-box | padding-box | content-box;

參數分別表示背景圖片是從邊框，仍是 內邊距（默認值），或者是 內容區域開始顯示。

十二、background-alip

用來將背景圖片作適當的裁剪以適應實際須要。

語法：

background-clip ： border-box | padding-box | content-box | no-clip

參數分別表示從 邊框、或 內填充，或者 內容區域向外裁剪背景。 no-clip表示不裁切，和 參數border-box顯示一樣的效果。 backgroud-clip默認值爲 border-box。

1三、background-size:auto|<長度值>|<百分比>|cover|contain

一、auto：默認值，不改變背景圖片的原始高度和寬度；

二、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其做爲圖片寬度值來等比縮放；

三、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘之前面百分比得出的數值，當設置一個值時同上；

四、cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；

五、contain：容納，即將背景圖片等比縮放至 某一邊緊貼容器邊緣爲止。

1四、multiple backgrounds

多重背景，也就是CSS2裏background的屬性外加origin、clip和size組成的新background的屢次疊加，縮寫時爲用逗號隔開的每組值；用分解寫法時，若是有多個背景圖片，而其餘屬性只有一個（例如background-repeat只有一個），代表全部背景圖片應用該屬性值。

語法縮寫以下：

1五、屬性選擇器

新增了3個屬性選擇器，使得屬性選擇器有了 通配符的概念。

1六、結構性僞類選擇器——root

:root選擇器，從字面上咱們就能夠很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。

結構性僞類選擇器——not

:not選擇器稱爲 否認選擇器，和jQuery中的:not選擇器如出一轍， 能夠選擇除某個元素以外的全部元素。

結構性僞類選擇器——empty

:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。

結構性僞類選擇器——target

:target選擇器稱爲目標選擇器，用來匹配文檔(頁面)的 url的某個標誌符的目標元素。咱們

結構性僞類選擇器——first-chirld

「:first-child」選擇器表示的是 選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是 子元素，而不是後代元素。

結構性僞類選擇器——last-chirld

「:last-child」選擇器與「:first-child」選擇器做用相似，不一樣的是「:last-child」選擇器選擇的是元素的最後一個子元素。例如，須要改變的是列表中的最後一個「li」的背景色，就可使用這個選擇器，

ul>li:last-child{background:blue;}

結構性僞類選擇器——nth-child(n)

「:nth-child(n)」選擇器用來定位某個 父元素的 一個或多個特定的子元素。其中「n」是其參數，並且能夠是整數值(1,2,3,4)，也能夠是表達式(2n+一、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值爲0時，選擇器將選擇不到任何匹配的元素。

經驗與技巧:當「:nth-child(n)」選擇器中的n爲一個表達式時，其中n是從0開始計算，當表達式的值爲0或小於0的時候，不選擇任何匹配的元素。以下表所示：

結構性僞類選擇器——nth-last-child（n）

「:nth-last-child(n)」選擇器和前面的「:nth-child(n)」選擇器很是的類似，只是這裏多了一個「last」，所起的做用和「:nth-child(n)」選擇器有所區別，從某父元素的最後一個子元素開始計算，來選擇特定的元素。

1七、first-of-type選擇器

「:first-of-type」選擇器相似於「:first-child」選擇器，不一樣之處就是 指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。

1八、nth-of-type(n)選擇器

「 :nth-of-type(n)」選擇器和「 :nth-child(n)」選擇器很是相似，不一樣的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不僅僅是同一種類型的子元素時，使用「:nth-of-type(n)」選擇器來定位於父元素中某種類型的子元素是很是方便和有用的。在「:nth-of-type(n)」選擇器中的「n」和「:nth-child(n)」選擇器中的「n」參數也同樣，能夠是具體的整數，也能夠是 表達式，還能夠是 關鍵詞。

1九、last-of-type選擇器

「 :last-of-type」選擇器和「 :first-of-type」選擇器功能是同樣的，不一樣的是他選擇是父元素下的某個類型的 最後一個子元素。

20、nth-last-of-type(n)選擇器

「 :nth-last-of-type(n)」選擇器和「 :nth-of-type(n)」選擇器是同樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最後一個子元素開始，並且它的使用方法相似於上節中介紹的「 :nth-last-child(n)」選擇器同樣。

2一、only-child選擇器

「 :only-child」選擇器選擇的是父元素中只有一個子元素，並且只有惟一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，並且是一個 惟一的子元素。

2二、only-of-type選擇器

「:only-of-type」選擇器用來選擇一個元素是它的父元素的惟一一個相同類型的子元素。這樣說或許不太好理解，換一種說法。 「:only-of-type」是表示一個元素他有不少個子元素，而其中只有一種類型的子元素是惟一的，使用「:only-of-type」選擇器就能夠選中這個元素中的惟一一個類型子元素。

2三、:enabled選擇器

在Web的表單中，有些表單元素有可用（ 「:enabled」）和不可用（「 :disabled」）狀態，好比輸入框，密碼框，複選框等。在默認狀況之下，這些表單元素都處在可用狀態。那麼咱們能夠經過僞選擇器「 :enabled」對這些表單元素設置樣式。

:disabled選擇器

:checked

::selection選擇器

「 ::selection」僞元素是用來匹配 突出顯示的文本(用鼠標選擇文本時的文本)。

:read-only選擇器

「 :read-only」僞類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是，元素中設置了「 readonly=’readonly’」

:read-write選擇器

「 :read-write」選擇器恰好與「 :read-only」選擇器相反，主要用來指定當元素處於 非只讀狀態時的樣式。

::before和::after

::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。

2四、變形——旋轉 rotate()

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

一、使用CSS3Grid佈局的話，咱們只需這樣寫：

body{columns:3;column-gap:0.5in;}

img{float:pagetopright;width:3gr;}

css3更規範化

其中，body部分聲明頁面爲3欄，欄間距爲0.5英寸；

img中float屬性指明圖片浮動位置爲頁面的右上角，而寬度爲3個欄寬。

只需這樣兩行CSS，就能夠實現這個複雜佈局。

二、Flexbox(伸縮佈局盒)

Flexbox 由 伸縮容器 和 伸縮項目 組成。經過設置元素的 display 屬性爲 flex 或 inline-flex 能夠獲得一個伸縮容器。設置爲 flex 的容器被渲染爲一個塊級元素，而設置爲 inline-flex 的容器則渲染爲一個行內元素。

Flexbox一般能讓咱們更好的操做他的子元素佈局，例如：

1. 若是元素容器沒有足夠的空間，咱們無需計算每一個元素的寬度，就能夠設置他們在同一行；
2. 能夠快速讓他們佈局在一列；
3. 能夠方便讓他們對齊容器的左、右、中間等；
4. 無需修改結構就能夠改變他們的顯示順序；
5. 若是元素容器設置百分比和視窗大小改變，不用擔憂未指定元素的確切寬度而破壞佈局，由於容器中的每一個子元素均可以自動分配容器的寬度或高度的比例。