柚子快報(bào)邀請(qǐng)碼778899分享：前端 CSS3新增1

http://yzkb.51969.com/

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

rem根元素字體大小的倍數(shù)，只與根元素字體大小有關(guān)

vw視口寬度的百分之多少

vh視口高度的百分之多少

vmax視口寬高中大的哪個(gè)的百分之多少

vmin視口寬高中小的哪個(gè)的百分之多少

CSS3新增顏色設(shè)置方式

rgba、hsl、hsla

CSS3新增選擇器

動(dòng)態(tài)偽類、目標(biāo)偽類、語言偽類、UI偽類、結(jié)構(gòu)偽類、否定偽類、偽元素

CSS3新增盒子模型相關(guān)屬性

box-sizing怪異盒模型

可選值

content-box width和height設(shè)置的是盒子內(nèi)容去大?。J(rèn)值）

border-box width和height設(shè)置的是盒子總大?。ü之惡心Ｐ停?/p>

resize調(diào)整盒子大小

可選值 需要和overflow配合

none 不允許調(diào)整（默認(rèn)）

both 用戶可以調(diào)整寬高

horizontal 用戶可以調(diào)整寬

vertircal 用戶可以調(diào)整高

box-shadow盒子陰影

box-shaow: h-shadow v-shadow blur spread color inset;

h-shadow 水平陰影的位置，必須寫

v-shadow 垂直陰影的位置，必須寫

blur 模糊距離，可選

spread 外延值，可選

color 顏色，可選

inset 將外部陰影改成內(nèi)部陰影

opacity 不透明度

?為整個(gè)元素添加不透明度，值是0-1之間的小數(shù)，0是完全透明，1是完全不透明

CSS3新增背景相關(guān)屬性

?background-origin設(shè)置背景圖從那開始鋪

值：padding-box，從padding區(qū)域（左上角）開始顯示背景圖像，默認(rèn)值

border-box，從border區(qū)域（左上角）開始顯示背景圖像

content-box，從content區(qū)域（左上角）開始顯示背景圖像

background-clip設(shè)置背景圖的向外裁剪區(qū)域

值：border-box，從border區(qū)域開始向外裁剪背景，默認(rèn)

padding-box，從padding區(qū)域開始向外裁剪背景

content-box，從content區(qū)域開始向外裁剪背景

text，背景圖只呈現(xiàn)在文字上，需要和color: transparent一起使用，需要加前綴

background-size 設(shè)置背景圖的尺寸

值：像素值

百分比

auto 背景圖片真實(shí)大小，左上角對(duì)齊，顯示在容器中

contain 背景圖片等比例縮放，使背景圖片的寬或高（大的）與容器寬或高相等，再將完整背景放在容器內(nèi)，可能導(dǎo)致容器部分區(qū)域沒有背景圖片

cover 背景圖片等比例縮放，使背景圖片的寬或高（小的）與容器的寬或高相等，圖片會(huì)盡可能顯示在容器上，背景圖片可能顯示不完整

background 復(fù)合屬性

background: color url repeat position /size origin clip（這倆順序不能變 其他可以）

CSS3邊框相關(guān)屬性

邊框圓角

邊框外輪廓 了解

outline 不占位 不參與盒子計(jì)算

新增文本屬性

text-shadow 文本陰影

text-shadow：h-shadow（必須寫） v-shadow（必須寫） blur color;

white-space 文本換行

white-space：normal/pre/pre-wrap(在pre基礎(chǔ)上，超出元素邊界自動(dòng)換行)/pre-line(pre-wrap基礎(chǔ)上，只識(shí)別換行，空格會(huì)忽略)/nowrap（強(qiáng)制不換行）

text-overflow 文本溢出 需要和overflow:hidden white-space:nowrap配合使用

text-flow:clip（當(dāng)內(nèi)聯(lián)內(nèi)容溢出時(shí)，將溢出部分裁切掉 默認(rèn)）/ ellipsis（當(dāng)內(nèi)聯(lián)內(nèi)容溢出時(shí)，將溢出部分替換為...）

-web-kit-text-stroke文本描邊

CSS3新增漸變

線性漸變 background-image:linear-gradient()

background-image:linear-gradient(red,yellow,green)默認(rèn)從上到下漸變

background-image:linear-gradient(to right, red,yellow,green)使用關(guān)鍵詞設(shè)置線性漸變方向

background-image:linear-gradient(20deg,red,yellow,green)使用角度設(shè)置線性漸變方向

background-image:linear-gradient(red 50px,yellow 100px,green 150px)調(diào)整開始漸變的位置，0-50px是純紅，50-100px漸變，100px純黃，100-150px漸變，150px和150之后純綠

徑向漸變 background-image:radial-ggradient()

background-image:radial-ggradient(red,yellow,green)，默認(rèn)從圓心四散，不一定是正圓

background-image:radial-ggradient(at right top,red,yellow,green) 使用關(guān)鍵詞改變漸變圓圓心位置

background-image:radial-ggradient(at 100px 50px, red,yellow,green) 使用像素值改變漸變圓圓心位置

background-image:radial-ggradient(circle, red,yellow,green)使用關(guān)鍵詞將漸變圓改為正圓

background-image:radial-ggradient(100px 50px, red,yellow,green) 調(diào)整形狀半徑

background-image:radial-ggradient( red 50px,yellow 100px,green 150px)調(diào)整開始漸變的位置

重復(fù)漸變 在前兩種漸變前+repeating

柚子快報(bào)邀請(qǐng)碼778899分享：前端 CSS3新增1

http://yzkb.51969.com/

文章來源