一、是什么

css，即層疊樣式表（Cascading Style Sheets）的簡稱，是一種標記語言，由瀏覽器解釋執(zhí)行用來使頁面變得更為美觀

css3是css的最新標準，是向后兼容的，CSS1/2的特性在CSS3 里都是可以使用的

CSS3 也增加了很多新特性，為開發(fā)者帶來了更佳的開發(fā)體驗

從幾個維度列舉一些常見的特性，如下

二、選擇器

css3中新增了一些選擇器，主要為如下圖所示：

三、新樣式

邊框

css3新增了三個邊框?qū)傩?，分別是：

• border-radius：創(chuàng)建圓角邊框
• box-shadow：為元素添加陰影
• border-image：使用圖片來繪制邊框

box-shadow

設(shè)置元素陰影，設(shè)置屬性如下：

• 水平陰影
• 垂直陰影
• 模糊距離(虛實)
• 陰影尺寸(影子大小)
• 陰影顏色
• 內(nèi)/外陰影

其中水平陰影和垂直陰影是必須設(shè)置的

背景

新增了幾個關(guān)于背景的屬性，分別是background-clip、background-origin、background-size和background-break

background-clip

用于確定背景畫區(qū)，有以下幾種可能的屬性：

• background-clip: border-box; 背景從border開始顯示
• background-clip: padding-box; 背景從padding開始顯示
• background-clip: content-box; 背景顯content區(qū)域開始顯示
• background-clip: no-clip; 默認屬性，等同于border-box

通常情況，背景都是覆蓋整個元素的，利用這個屬性可以設(shè)定背景顏色或圖片的覆蓋范圍

background-origin

當(dāng)我們設(shè)置背景圖片時，圖片是會以左上角對齊，但是是以border的左上角對齊還是以padding的左上角或者content的左上角對齊? border-origin正是用來設(shè)置這個的

• background-origin: border-box; 從border開始計算background-position
• background-origin: padding-box; 從padding開始計算background-position
• background-origin: content-box; 從content開始計算background-position

默認情況是padding-box，即以padding的左上角為原點

background-size

background-size屬性常用來調(diào)整背景圖片的大小，主要用于設(shè)定圖片本身。有以下可能的屬性：

• background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
• background-size: cover; 擴展元素以填補元素（維持像素長寬比）
• background-size: 100px 100px; 縮小圖片至指定的大小
• background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包 含元素的尺寸

background-break

元素可以被分成幾個獨立的盒子（如使內(nèi)聯(lián)元素span跨越多行），background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示

• background-break: continuous; 默認值。忽略盒之間的距離（也就是像元素沒有分成多個盒子，依然是一個整體一樣）
• background-break: bounding-box; 把盒之間的距離計算在內(nèi)；
• background-break: each-box; 為每個盒子單獨重繪背景

文字

word-wrap

語法：word-wrap: normal|break-word

• normal：使用瀏覽器默認的換行
• break-all：允許在單詞內(nèi)換行

text-overflow

text-overflow設(shè)置或檢索當(dāng)當(dāng)前行超過指定容器的邊界時如何顯示，屬性有兩個值選擇：

• clip：修剪文本
• ellipsis：顯示省略符號來代表被修剪的文本

text-shadow

text-shadow可向文本應(yīng)用陰影。能夠規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色

text-decoration

CSS3里面開始支持對文字的更深層次的渲染，具體有三個屬性可供設(shè)置

• text-fill-color: 設(shè)置文字內(nèi)部填充顏色
• text-stroke-color: 設(shè)置文字邊界填充顏色
• text-stroke-width: 設(shè)置文字邊界寬度

顏色

css3新增了新的顏色表示方式rgba與hsla

• rgba分為兩部分，rgb為顏色值，a為透明度
• hala分為四部分，h為色相，s為飽和度，l為亮度，a為透明度

四、transition 過渡

transition屬性可以被指定為一個或多個CSS屬性的過渡效果，多個屬性之間用逗號進行分隔，必須規(guī)定兩項內(nèi)容：

• 過度效果
• 持續(xù)時間

語法如下：

transition： CSS屬性，花費時間，效果曲線(默認ease)，延遲時間(默認0)

上面為簡寫模式，也可以分開寫各個屬性

transition-property: width; 
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

五、transform 轉(zhuǎn)換

transform屬性允許你旋轉(zhuǎn)，縮放，傾斜或平移給定元素

transform-origin：轉(zhuǎn)換元素的位置（圍繞那個點進行轉(zhuǎn)換），默認值為(x,y,z):(50%,50%,0)

使用方式：

• transform: translate(120px, 50%)：位移
• transform: scale(2, 0.5)：縮放
• transform: rotate(0.5turn)：旋轉(zhuǎn)
• transform: skew(30deg, 20deg)：傾斜

六、animation 動畫

動畫這個平常用的也很多，主要是做一個預(yù)設(shè)的動畫。和一些頁面交互的動畫效果，結(jié)果和過渡應(yīng)該一樣，讓頁面不會那么生硬

animation也有很多的屬性

• animation-name：動畫名稱
• animation-duration：動畫持續(xù)時間
• animation-timing-function：動畫時間函數(shù)
• animation-delay：動畫延遲時間
• animation-iteration-count：動畫執(zhí)行次數(shù)，可以設(shè)置為一個整數(shù)，也可以設(shè)置為infinite，意思是無限循環(huán)
• animation-direction：動畫執(zhí)行方向
• animation-paly-state：動畫播放狀態(tài)
• animation-fill-mode：動畫填充模式

七、漸變

顏色漸變是指在兩個顏色之間平穩(wěn)的過渡，css3漸變包括

linear-gradient：線性漸變

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

radial-gradient：徑向漸變

linear-gradient(0deg, red, green);

八、其他

關(guān)于css3其他的新特性還包括flex彈性布局、Grid柵格布局，這兩個布局在以前就已經(jīng)講過，這里就不再展示

除此之外，還包括多列布局、媒體查詢、混合模式等等…文章來源地址http://www.zghlxwxcb.cn/news/detail-506760.html

到了這里，關(guān)于css基礎(chǔ)知識十一：CSS3新增了哪些新特性？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！