css3總結

時間 2019-11-17

標籤 css3 css 總結欄目 CSS 简体版

原文原文鏈接

目錄css

Transition過渡 html

Transition的分體屬性：web

貝塞爾曲線cubic-bezier chrome

Body自己沒有高度，html自己也沒有高度，document的高度是可視區域。瀏覽器

文字陰影網絡

HTML5新增表單控件 ide

Input在HTML5中新增了不少的類型字體

新增表單屬性 flex

屬性選擇器動畫

子元素選擇器（結構性僞類）

僞類選擇器

盒模型

1. 陰影box-shadow

2. 倒影box-reflect(須要加內核前綴使用)

3. Resize

4. 遮罩mask（要加內核前綴）跟背景屬性值同樣

彈性盒模型（目前兼容性不是很好）

1. display：flex設置給父級；

2. flex-direction設置主軸設置給父級：

3. justify-content主軸對齊設置給父級：

4. align-items側軸對齊

5. flex-wrap換行

6. align-content（伸縮行側軸的對齊方式）

7. flex-flow

彈性盒模型子級須要的設置

1. order 顯示順序

2. flex所佔整體的份數；

3. align-self

Background

多背景

背景原點設置

背景圖裁切

漸變：

線性漸變

徑向漸變

Transition過渡

必不可少的一個參數是：秒數；

Transition是添加給須要有變更的元素的常態樣式上，而不是該元素有hover等變更時。

div {

width: 200px;

height: 200px;

background-color: red;

transition:2s width, 2s height, transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

}

div:hover {

transform: rotate(360deg);旋轉360度

width: 300px;

height: 300px;

background-color: green;

}

經過以上語句可實如今2s時間內完成寬度變300px高度變300px以及變背景的動畫效果，過渡只對數值性的東西起做用，好比寬高顏色值等，而對於左右浮動這種沒有數值考量的是不起做用的。

Transition的分體屬性：

transition-property 要運動的樣式 （all || [attr] || none）

transition-duration 運動時間

transition-delay 延遲時間

transition-timing-function過分效果的時間曲線

ease：（逐漸變慢）默認值

linear：（勻速）

ease-in：(加速)

ease-out：（減速）

ease-in-out：（先加速後減速）

cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ）

貝塞爾曲線cubic-bezier

transition:6s cubic-bezier(0.400, -0.240, 0.755, 1.2);貝塞爾曲線規定了transition的變化速度軌跡，如題意思是：在運動初期會先向後緩衝而後加速前進，到達終點後衝出終點有再反彈回終點。

Body自己沒有高度，html自己也沒有高度，document的高度是可視區域。

文字陰影

• text-shadow:x偏移量 y偏移量模糊半徑顏色；

text-shadow:5px 5px 10px red;紅色模糊背景，半徑10px，距離左邊5px距離上邊5px，若是想要多重陰影，只要用逗號隔開便可。

text-shadow:5px 5px 10px red，text-shadow:5px 7px 20px red;

先寫的在上方，後寫的在下面

• -webkit-text-stroke:描邊寬度，顏色，可是隻有谷歌支持是webkit的私有

• text-overflow:文字溢出顯示省略號：ellipsis

• direction：rtl；文字書寫方向右到左，ltr左到右

• direction: rtl; unicode-bidi: bidi-override; unicode-bidi:大概的含義是：編碼順序：順序推翻；direction: rtl必須配合unicode-bidi:使用，不然沒效果。

• fontLab studio+ai製做文字圖標字體，將ai中的路全選徑複製到fontlab裏面製做生成圖標文字，導出.ttf文件後在線製做成兼容各類合法字體，下載使用便可（製做各類合法字體的網站：http://www.fontsquirrel.com/tools/webfont-generator）

下載後除了

壓縮包之外其餘都刪除掉，而後解壓：

將橫線文件及html都刪除：而後在應用的時候調用stylesheet.css而後在用到字體的地方將字體用font-family引用進去便可（在字體的stylesheet.css文件中，能夠定義字體的名字，在引用的時候直接引用定義好的名字便可）

http://www.iconfont.cn/repositories/60 阿里媽媽字體庫

HTML5新增表單控件

Input在HTML5中新增了不少的類型

• email跟text很像，可是會判斷是不是郵箱地址

• tel跟text很像，可是在移動端時觸發以後會自動切換到數字鍵盤，不會判斷是不是電話號

• url跟text很像，可是會驗證是否是網址（根據http://或者https://或者ftp://等網絡傳輸協議進行判斷）

• search跟text很像，可是有文字輸入以後在框的最後面有個「X」，在輸錯的時候能夠點擊清空以前輸入的內容

• range數量選擇，有min max value step幾個屬性，在value值和step衝突的時候會自動糾正進行顯示

• number也是數量選擇，可是樣式有不一樣，在value值和step min max衝突的時候會先顯示value，在加減的時候再糾正。

• color就是一個取色器，可將選中的顏色配合submit進行提交，一般用在主題中

點擊顏色後出現取色器

• datetime-local顯示完整的日曆，不含時區

• time顯示具體的時間（小時：分鐘）

• date顯示日期（月-日）

• week顯示這周是今年第幾周

• month顯示本月是今年第幾月

新增表單屬性

• password其中加入了一個屬性值placeholder=「請輸入密碼」，在點擊開始輸入時placeholder的內容會自動消失，支持文字color設置

更改文字顏色：注意是雙冒號還要加前綴

• required，當沒有輸入值時就切換的tab時會提示還沒輸入，只要寫上這個屬性就生效，不用寫值。

• autocomplete是否顯示以前輸入過的值有on和off兩個值

有name值時，不設置off的狀況下：

設置off之後輸入框本來輸入過的東西就不會被保存了。

• autofocus加載進來以後或者刷新以後自動獲取焦點，跟checked同樣，只要寫上這個屬性就生效，不用寫值。

表單的<form action=」這裏寫提交成功跳轉的地址」></form>是必需要寫的否則不會提交的

• datalist定義input下可能會出現的選項（爲輸入框構造一個選擇列表），支持首字母檢索，好比輸入c就出來css

注意這個標籤是配合input的，將這個標籤的id寫到input的list屬性中去。

• pattern正則驗證，一堆的轉譯字符表示的驗證過程，通常從網上找就好了

若是輸入與要求不一致則顯示：

• formaction當須要另外提交一個地址的時候：配合submit使用

屬性選擇器

• E[attr]只是用屬性名，但沒有肯定任何屬性值（這裏的miaov是個自定義屬性，支持自定義屬性）

• E[attr=」value」]限制屬性值的選擇

• E[attr~=」value」]是指屬性名中有這一項便可被選中

、

這時候上面兩條會都被選中

• E[attr^=」value」]是指屬性名中以value值開頭的便可被選中

• E[attr$=」value」]以value值結尾的便可被選中

• E[attr*=」value」]包含有value值的便可被選中

• E[attr|=」value」]以value值加-開始的便可被選中，好比value=g 那麼就選中了以g-開頭的元素

子元素選擇器（結構性僞類）

• body p:nth-child(1){……………………;}選擇body下第一個元素，且必須是p元素

• body :nth-child(1){……………………;}選擇body下第一個子元素，不限制元素類型

• body :nth-child(even){……………………;}選擇body下的偶數子元素，不限制類型

• body :nth-child(odd){……………………;}選擇body下的偶數子元素，不限制類型

• body :nth-child(2n){……………………;}選擇body下的遞進元素，數列的寫法。3n-一、3n+1等

• body :nth-last-child(1){………………;}倒數第一個子元素

• body p:nth-of-type(2){………………;}找到body下第二個p類型的元素

• body :nth-of-type(2){………………;}找到body下第二個不限類型的元素（能夠同時找到第二個p第二個h1等全部類型的第二個）

• body :nth-last-of-type(2){………………;}從後往前數找到body下第二個不限類型的元素

• p:nth-child(1){……………………;}p元素父級下的第一個p，支持class或者id，支持隔代選擇

這種狀況下依然可使用

選中p

例如：

能夠用

顯示成

僞類選擇器

• E:target（哈希選擇器或錨點選擇）代表當前url片斷的元素類型，這個元素必須是E

便可實現點擊切換

• E:disabled代表不可點擊的表單控件；E:enabled代表可點擊的表單控件

• E:checked

• E:first-line，選擇元素的第一行

• E:first-letter，選擇元素的第一個字符

• E::selection，定義元素選中狀態下的樣子（背景，字體顏色等）

• E::before生成內容在E以前

• E::after生成內容在E以後

• E:not(E1)含義是給除了E1之外全部E加樣式

• E~F選擇E元素後面的全部的同級F標籤，非同級是選不中的

• E+F選擇E元素後面的緊挨着的一個同級F標籤

• 模擬單選的示例

盒模型

• 陰影box-shadow

Box-shadow:x偏移量 y偏移量模糊半徑陰影顏色

可選參數：inset 內陰影寫在第一位

擴展半徑含義：邊框擴展多少以後再開始模糊

Box-shadow:inset 10px 10px 30px 50px #000;

含義是內陰影偏移量是10px 10px 模糊半徑是30px 在擴展50px以後開始模糊模糊顏色是黑色

若是想既有內陰影也有外陰影的話，直接在寫完內陰影以後用逗號隔開繼續寫外陰影的參數便可

（擴展：作一個只有右側陰影，擴展值爲負值另外加一個右側的偏移量）

• 倒影box-reflect(須要加內核前綴使用)

基本參數：above（上）below（下）right left

倒影和陰影是不佔位置的

Box-reflect：above 5px；含義是：有一個上方的倒影距離實體5px

其中有個參數是：linear-gradient漸變：也要加前綴使用

linear-gradient（rgba（0,0,0,0.1） 50%，rgba（0,0,0,1） 100%）

含義是從黑色0.1透明到黑色不透明的漸變，兩種顏色各佔50%

• Resize

Textarea默認有可拖動的寬高，這時給resize：none；便可實現不可拖動

Resize：both（水平垂直都可拖動）horizontal（水平）vertical（垂直）

Resize必須和overflow：auto配合使用

Textarea的cssreset

• 遮罩mask（要加內核前綴）跟背景屬性值同樣

遮罩層是個png圖片，有顏色的部分是未來要顯示內容的部分，透明的圖片是不需顯示的地方

#box{-webkit-mask:url(遮罩png圖片) no-repeat 20px 30px;transition：2s；}

#box：hover{-webkit-mask-position: 200px 300px; }

（倒影和遮罩只支持-webkit-內核瀏覽器：chrome Safari opera）

Caniuse.com能夠查看屬性支持程度

彈性盒模型（目前兼容性不是很好）

• display：flex設置給父級；

須要flex-direction定義主軸和側軸，定義x爲主軸後y天然爲側軸

• flex-direction設置主軸設置給父級：

row左到右row-reverse右到左column上到下column-reverse下到上

• justify-content主軸對齊設置給父級：

Flex-start（元素在開始位置，空白佔據另外一邊）

flex-end（元素在結束位置，空白佔據開始一邊）

flex-center（元素居中，空白佔據兩邊）

space-between（空白在元素中間平均分佈）

space-around（空白在元素兩邊平均分佈）

• align-items側軸對齊：

有flex-start、 flex-end、 flex-center、 space-between、 space-around屬性，側軸對齊後行之間會有間隙平均分配的一個間隙，使用伸縮行的對齊能夠去掉這個間隙

• flex-wrap換行

nowrap不換行 wrap換行 wrap-reverse反向換行，flex-wrap是針對伸縮項目的，使用會有相似以下狀況出現：

• align-content（伸縮行側軸的對齊方式）

伸縮行的對齊，能夠打破以前側軸的對齊方式：

有flex-start、 flex-end、 flex-center、 space-between、 space-around屬性

在父級設置display：flex；以後，子級的塊元素便可橫向排列且沒有間隙，可是當子級寬度超過父級以後，父級會擠壓子級，使子級會不受自身寬高設置而變形以適應父級的寬度，不會存在超出的問題；

若是給子級添加了margin值之後，margin值不會被擠壓，子級的寬度就等於父級寬度減去全部margin值以後除以子級的個數；在設置了flex的父級的子級中margin：auto顯示成水平垂直居中

若是不想讓子級變形，則須要給父級設置flex-wrap：wrap；

• flex-flow

是flex-direction和flex-wrap的合寫，格式是：flex-flow：[flex-direction][flex-wrap]

彈性盒模型子級須要的設置

• order 顯示順序

全部子元素默認的order都是0，

此時第一個div就會跑到最後的位置，由於它的order比其餘的div的order都大，order能夠是負值

• flex所佔整體的份數；

以下是將父級分紅了1+2+3+4+……+8共36份，其中第一個div佔了一份，flex能夠是none，意思是不參與份數保持原大小，能夠是auto

• align-self

有flex-start、 flex-end、 center屬性

Background

Background-size：contain包含 cover覆蓋

包含是圖片按比例放大，當寬或者高一個方向撐滿時中止，有可能鋪不滿；覆蓋是圖片按比例放大，直到鋪滿整個區域，超出部分隱藏

多背景

先寫的在上面，後寫的在下面顯示，多個背景用逗號隔開寫就好了，多背景狀況下加背景顏色加到最後

若是設置hover時二者都要寫（即便其中一個不動也要寫上0 0，）：

背景原點設置

Background-origin：

border-box，邊框左上角、padding-box，padding左上角、content-box，content左上角

背景圖裁切

Background-clip：

border-box，包括邊框在內的全部區域、padding-box，padding以及其之內的區域、content-box，content範圍內的區域、text能夠給text添加圖像疊加:

text的背景是webkit私有屬性，要加前綴纔有效：-webkit- background-clip:text;

也能夠寫成：

此時爲了實現文字的背景，組要給文字加透明color：rgba（0,0,0,0），這是文字後面就會有圖片疊加的效果

漸變：

背景漸變屬於background-image的範疇

線性漸變

Background-image：linear-gradient（0deg，red，blue）第一個輸參數能夠寫度數也能夠寫方向關鍵字（好比：left等），用度數寫的時候不用加內核前綴，用方向關鍵詞寫的時候就要加內核前綴。

Background-image：linear-gradient（40deg，red 0%，blue 50%）；

含義是：40度的漸變，從紅色開始過渡到藍色，紅色在50%的位置徹底消失，後面都是藍色（其中百分比能夠寫成具體px值），若是兩個值同樣都是50%則會在50%的位置出現明顯分界：

Ie瀏覽器下只能用濾鏡來實現：

Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’blue’,endcolorstr=‘red’,GradientType=’1’); startColorstr開始顏色endcolorstr結束顏色GradientType漸變方向0是上下，1是左右

Repeating-linear-gradient用來循環背景用：下面語句含義是：0到10%是黑色，10%處出現黑白顏色的尖銳切換即黑白顏色同時出如今10%的位置，而後白色持續到20%再次出現尖銳換色，而後將這個規律循環下去。（0黑色—10%黑色10%白色---20%白色20%黑色）

效果以下：

還能夠經過複製以上語句，改下角度270deg便可獲得各自似的背景

範例：實現白光閃過：設置背景圖片，同時在背景圖片上面加漸變，漸變角度160，從透明到白色再到透明，並在初始狀態下移出圖片範圍-260px，而後hover的時候改變白光的位置便可。須要注意的是hover改變位置的時候白光和圖片的位置都要寫，即便圖片不變更仍是0 0.background-size也要寫全，沒變更的寫auto

www.tjrus.com裏面的東西使用純css寫的

徑向漸變

Background:radial-gradient(位置x 位置y，寬x 高y，顏色1 範圍，顏色2 範圍)

還有形狀circle square設置形狀就不能設置大小，兩者只能選擇一個

background:radial-gradient（）

filter濾鏡

grayscale灰度（要加前綴使用）

標準瀏覽器下要加前綴，grayscale的值是百分數，在ie下要用filter：gray；

標準瀏覽器中：

-webkit-filter：grayscale（50%）；

-moz-filter：grayscale（50%）；

-ms-filter：grayscale（50%）；