柚子快報(bào)激活碼778899分享：前端 CSS3的新特性

http://yzkb.51969.com/

css3的新特性如下：

1.新增了更加實(shí)用的選擇器，例如：動(dòng)態(tài)偽類選擇器，目標(biāo)偽類選擇器，偽元素選擇器等等。 2.新增了更好的視覺效果，例如：圓角，陰影，漸變等。 3.新增了豐富的背景效果，例如：支持多個(gè)圖片背景，同時(shí)新增了若干個(gè)背景元素的屬性。 4.新增了全新的布局方案—彈性盒子。 5.新增了web字體，可以顯示用戶電腦上沒有安裝的字體 6.增強(qiáng)了顏色，例如：HSL，HSLA，RGBA幾種新的顏色模式，新增opacity屬性來(lái)控制透明度。 7.增加了2D和3D變換，例如：旋轉(zhuǎn)，扭曲，縮放，位移等。 8.增加動(dòng)畫和過(guò)渡效果，讓效果的變換更具流線性，平滑性。 。。。。等等

css3私有前綴

查詢css3兼容性的網(wǎng)站：https://caniuse.com/ 常見瀏覽器私有前綴 Chrome 瀏覽器 -webkit- Safari 瀏覽器 -webkit- Firefox 瀏覽器 -moz- Edge 瀏覽器 -webkit- 舊 Opera 瀏覽器 -o- 舊 IE 瀏覽器 -ms-

注意：我們?cè)诰幋a時(shí)，不用過(guò)于關(guān)注瀏覽器私有前綴，不用絞盡腦汁的去記憶，也不用每個(gè)都去查詢，因?yàn)槌Ｓ玫腸ss3新特性，主流瀏覽器都是支持的，即便是為了老瀏覽器而加前綴，我們也可以借助現(xiàn)代的構(gòu)建工具比如：webpack，去幫我們添加私有前綴。

css3新增長(zhǎng)度單位

1.rem根元素字體大小的倍數(shù)，只與根元素字體大小有關(guān)。 2.vw視口寬度的百分之多少 10vw 就是視口寬度的10% 3.vh視口高度的百分之多少 10vh就是視口高度的10% 4.vmax視口寬高中大的那個(gè)的百分之多少。（了解即可） 5.vmin視口寬高中小的那個(gè)的百分之多少。（了解即可）

新增盒子屬性 border-box

resize(了解) box-shadow 盒子陰影 （寫4個(gè)值的比較常用） opacity 不透明度（0~1）

opacity與rgba（區(qū)別） opacity是一個(gè)屬性，設(shè)置的是整個(gè)元素（包括元素里的內(nèi)容）的不透明度。 rgba是顏色的設(shè)置方式，用于設(shè)置顏色，它的透明度，僅僅是調(diào)整顏色的透明度。

新增背景屬性 background-origin

設(shè)置背景圖的原點(diǎn)

background-clip 對(duì)背景圖進(jìn)行修剪

background-size 背景大小

background復(fù)合屬性

多背景圖background

邊框圓角border

邊框外輪廓outline

文本陰影text-shadow

文本換行white-space

文本溢出text-overflow

文本修飾text-decoration

文本描邊text-stroke

新增漸變

線性漸變 linear-gradient 文字漸變

徑向漸變r(jià)adial-gradient

重復(fù)漸變 repeating-xxx-gradient

在沒有發(fā)生漸變的區(qū)域，重新開始漸變，就是重復(fù)漸變

web字體 font-family

https://www.iconfont.cn/webfont#!/webfont/index 阿里定制字體 體積小 本地下載 引入所有解壓的文件 不包括html文件 https://www.iconfont.cn/ 可以定制圖片圖標(biāo) 把需要的圖標(biāo)下載本地 有說(shuō)明html文件文檔 按步驟操作就可以

2d變換 transform

translate 位移 1.位移與相對(duì)定位很相似，都不脫離文檔流，不會(huì)影響到其他元素 2.與相對(duì)定位的區(qū)別：相對(duì)定位的百分值，參考的是其父元素，定位的百分比值，參考的是其自身 3.瀏覽器針對(duì)位移有優(yōu)先，與定位相比，瀏覽器處理位移的效率更高 4.位移對(duì)行內(nèi)元素?zé)o效 5.位移配合定位，可實(shí)現(xiàn)元素水平垂直居中

縮放 scale

旋轉(zhuǎn) rotate

扭曲（了解）skew

多重變換 注意:多重變換時(shí)，建議最后旋轉(zhuǎn)

變換原點(diǎn) transform-origin

如果只提供一個(gè)值，若是像素值，表示橫坐標(biāo)，縱坐標(biāo)取50%。若是關(guān)鍵詞，則另一個(gè)坐標(biāo)取50%

3D變換

1.開啟3D空間 transform-style 重要原則：元素進(jìn)行3D變換的首要操作：父元素必須開啟3D空間 2.設(shè)置景深 perspective 何為景深：指定觀察者與z=0平面的距離，能讓發(fā)生3D變換的元素，產(chǎn)生透視效果，看起來(lái)更加立體

透視點(diǎn)的位置 perspective-origin

所謂透視點(diǎn)位置，就是觀察者位置，默認(rèn)的透視點(diǎn)在元素的中心， 注意：通常情況下，我們不需要跳轉(zhuǎn)透視點(diǎn)位置

位移 translate3d

旋轉(zhuǎn) rotate3d

縮放 scale3d

多重變換 注意點(diǎn)：多重變換時(shí)，建議最后旋轉(zhuǎn)

背部可見性 backface-visibility

過(guò)渡 transition

不是所有的屬性都能過(guò)渡，值為數(shù)字，或者值能轉(zhuǎn)為數(shù)字的屬性，都支持過(guò)渡，否則不支持過(guò)渡， 常見的支持過(guò)渡的屬性有：顏色，長(zhǎng)度值，百分比，z-index, opacity , 2D變換屬性，3D變換屬性，陰影。 過(guò)渡屬性建議 放在容器身上 不要放在 :hover 身上 過(guò)渡需要觸發(fā)條件

高級(jí)使用—— 貝塞爾曲線

過(guò)渡 https://cubic-bezier.com/

復(fù)合屬性

動(dòng)畫

不需要觸發(fā)條件 第一步：定義關(guān)鍵幀（定義動(dòng)畫） @keyframes 動(dòng)畫名 第二步：給元素應(yīng)用動(dòng)畫，用到的屬性如下： animation-name:給元素指定具體的動(dòng)畫（具體的關(guān)鍵幀） animation-duration:設(shè)置動(dòng)畫所需時(shí)間 animation-delay:設(shè)置動(dòng)畫延遲

其他屬性 暫停 動(dòng)作往往寫在一個(gè)動(dòng)作里面比如 :hover

動(dòng)畫的復(fù)合屬性

只設(shè)置一個(gè)時(shí)間表示duration,設(shè)置兩個(gè)時(shí)間分別是：duration和delay,其他屬性沒有數(shù)量和順序要求 備注：animation-play-state 一般單獨(dú)使用。

動(dòng)畫與過(guò)渡的區(qū)別

最主要的區(qū)別就是： 1.動(dòng)畫不需要任何的觸發(fā)條件，而過(guò)渡必須得有觸發(fā)條件 2.動(dòng)畫從開始到結(jié)束的整個(gè)過(guò)程當(dāng)中，都可以通過(guò)關(guān)鍵幀，去進(jìn)行精細(xì)的設(shè)置。 而過(guò)渡確不能，只關(guān)注始末，從開始到結(jié)束的變化過(guò)程中，是不可操作的。

圖片動(dòng)畫

注意事項(xiàng)： 1.需要有一個(gè)像樣的圖 2.算好位置以及它走多少步數(shù)

多列布局 column

多列圖片 作用：專門用于實(shí)現(xiàn)類似于報(bào)紙的布局

伸縮容器（彈性盒子） display:flex

伸縮項(xiàng)目：伸縮容器所有 子元素 自動(dòng)成為了：伸縮項(xiàng)目。

主軸方向 flex-direction

主軸換行方式 flex-wrap

主軸對(duì)齊方式 justify-content

側(cè)軸對(duì)齊方式__一行 align-items

側(cè)軸對(duì)齊方式__多行 align-content

項(xiàng)目在主軸的基準(zhǔn)長(zhǎng)度 flex-basis

伸縮項(xiàng)目__伸 flex-grow

伸縮項(xiàng)目__縮 flex-shrink

復(fù)合屬性 flex

項(xiàng)目排序與單獨(dú)對(duì)齊 order align-self

響應(yīng)式布局

媒體查詢__媒體特性 @media

媒體查詢__媒體類型

媒體查詢__運(yùn)算符

媒體查詢__常用閾值

柚子快報(bào)激活碼778899分享：前端 CSS3的新特性

http://yzkb.51969.com/

精彩文章