柚子快報激活碼778899分享：前端 CSS3的新特性

http://yzkb.51969.com/

1. 是什么

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

css3是css的最新標(biāo)準(zhǔn)，是向后兼容的，CSS1/2的特性在 CSS3 里都是可以使用的

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

2. 選擇器

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

3. 新樣式

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

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

box-shadow 設(shè)置元素陰影，設(shè)置屬性如下（其中水平陰影和垂直陰影是必須設(shè)置的）

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

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

background-clip 用于確定背景畫區(qū)，有以下幾種可能的屬性：通常情況，背景都是覆蓋整個元素的，利用這個屬性可以設(shè)定背景顏色或圖片的覆蓋范圍

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

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

background-origin: border-box; 從border開始計算background-positionbackground-origin: padding-box; 從padding開始計算background-positionbackground-origin: content-box; 從content開始計算background-position默認情況是padding-box，即以padding的左上角為原點

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: normal|break-word

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

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

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

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與hslargba分為兩部分，rgb為顏色值，a為透明度hala分為四部分，h為色相，s為飽和度，l為亮度，a為透明度

柚子快報激活碼778899分享：前端 CSS3的新特性

http://yzkb.51969.com/

相關(guān)閱讀