html5新增了哪些標(biāo)簽？css3新增了哪些屬性？

一、 h5是html的最新版本，是14年由w3c完成標(biāo)準(zhǔn)制定。增強(qiáng)了，瀏覽器的原生功能，減少瀏覽器插件（eg：flash）的應(yīng)用，提高用戶體驗(yàn)滿意度，讓開發(fā)更加方便。?

創(chuàng)新互聯(lián)成立于2013年，先為斗門等服務(wù)建站，斗門等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為斗門企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

- h5新增的標(biāo)簽：

video ： ?表示一段視頻并提供播放的用戶界面 ?

audio ： 表示音頻 ?

canvas： 表示位圖區(qū)域 ?

source： ?為video和audio提供數(shù)據(jù)源 ?

track ： ? 為video和audio指定字母 ?

svg： ?定義矢量圖 ?

code： 代碼段 ?

figure ： 和文檔有關(guān)的圖例 ?

figcaption ： 圖例的說明

time： ?日期和時(shí)間值 ?

mark： 高亮的引用文字 ?

datalist ： 提供給其他控件的預(yù)定義選項(xiàng) ?

keyge： 秘鑰對(duì)生成器控件 ?

output ： ?計(jì)算值 ?

rogress ： ? 進(jìn)度條 ?

menu： ? ?菜單 ?

embed： ?嵌入的外部資源 ?

menuitem： 用戶可點(diǎn)擊的菜單項(xiàng) ?

menu： 菜單

二、 css3被劃分為模塊，最重要的幾個(gè)模塊包括：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉(zhuǎn)換、動(dòng)畫、多列布局、用戶界面。

新增屬性：

選擇器

框模型

背景和邊框?

border-radius、box-shadow、border-image、?

background-size：規(guī)定背景圖片的尺寸?

background-origin：規(guī)定背景圖片的定位區(qū)域?

background-clip：規(guī)定背景的繪制區(qū)域

文本效果（常用）?

text-shadow：設(shè)置文字陰影?

word-wrap：強(qiáng)制換行?

word-break?

css3提出@font-face規(guī)則，規(guī)則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D轉(zhuǎn)換?

transform：向元素應(yīng)用2/3D轉(zhuǎn)換?

transition：過渡

動(dòng)畫

@keyframes規(guī)則：?

animation、animation-name、animation-duration等

用戶界面（常用）?

box-sizing、resize?

css3新增偽類?

：nth-child()?

：nth-last-child()?

：only-child?

：last-child?

：nth-of-type()?

：only-of-type()?

：empty?

：target 這個(gè)偽類允許我們選擇基于URL的元素，如果這個(gè)元素有一個(gè)識(shí)別器（比如跟著一個(gè)#），那么:target會(huì)對(duì)使用這個(gè)ID識(shí)別器的元素增加樣式。?

：enabled?

：disabled?

：checked?

：not

CSS3都有哪些新特性呢？

第 1 選擇器

第 2 RGBA和透明度

第 3 多欄布局

第 4 多背景圖

第 5 Word Wrap

第 6 文字陰影

第 7 @font-face屬性

第 8 圓角(邊框半徑)

第 9 邊框圖片

第 10 盒陰影

第 11 盒子大小

第 12 媒體查詢

第 13 語音

擴(kuò)展資料:

工作原理

CSS3原理同CSS，是在網(wǎng)頁中自定義樣式表的選擇符，然后在網(wǎng)頁中大量引用這些選擇符[29]。

新增特性中transform的原理較為特殊，雖然使用位移函數(shù)translate()、縮放函數(shù)scale()、旋轉(zhuǎn)函數(shù)rotate()和傾斜函數(shù)skew()可以簡單地實(shí)現(xiàn)變形，但是變形中的矩陣函數(shù)都可以使用matrix()函數(shù)來代替。

新增特性

CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、多欄布局、媒體查詢等。

參考資料:百度百科-css3

css3有哪些新特性 包含哪些模塊

1、CSS3圓角表格圓角表格，對(duì)應(yīng)屬性：border-radius。

2、以往對(duì)網(wǎng)頁上的文字加特效只能用filter這個(gè)屬性，這次CSS3中專門制訂了一個(gè)加文字特效的屬性，而且不止加陰影這種效果。對(duì)應(yīng)屬性：font-effect。

3、豐富了對(duì)鏈接下劃線的樣式，以往的下劃線都是直線，這次可不一樣了，有波浪線、點(diǎn)線、虛線等等，更可對(duì)下劃線的顏色和位置進(jìn)行任意改變。（還有對(duì)應(yīng)頂線和中橫線的樣式，效果與下劃線類似）對(duì)應(yīng)屬性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。

4、在文字下點(diǎn)幾個(gè)點(diǎn)或打個(gè)圈以示重點(diǎn)，CSS3也開始加入了這項(xiàng)功能，這應(yīng)該在某些特定網(wǎng)頁上很有用。對(duì)應(yīng)屬性：font-emphasize-style和font-emphasize-position。

　

邊框（Borders）

border-color:控制邊框顏色，并且有了更大的靈活性，可以產(chǎn)生漸變效果

border-image:控制邊框圖象 CSS3邊框border-corner-image:控制邊框邊角的圖象

border-radius:能產(chǎn)生類似圓角矩形的效果

背景（Backgrounds）

background-origin:決定了背景在盒模型中的初始位置，提供了3個(gè)值，border, padding和content

border:控制背景起始于左上角的邊框

padding:控制背景起始于左上角的留白

content:控制背景起始于左上角的內(nèi)容 CSS3背景background-clip:決定邊框是否覆蓋住背景（默認(rèn)是不覆蓋），提供了兩個(gè)值，border和padding

border:會(huì)覆蓋住背景

padding:不會(huì)覆蓋背景

background-size:可以指定背景大小，以象素或百分比顯示。當(dāng)指定為百分比時(shí)，大小會(huì)由所在區(qū)域的寬度、高度，以及background-origin的位置決定

multiple backgrounds:多重背景圖象，可以把不同背景圖象只放到一個(gè)塊元素里。

文字效果（Text effects）

text-shadow:文字投影，可能是因?yàn)镸AC OSX的Safari瀏覽器開始支持投影才特意增加的。

text -overflow:當(dāng)文字溢出時(shí)，用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit，前兩個(gè)CSS2就有了，目前還是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一個(gè)單詞，對(duì)中文意義不大，inherit可以繼承父級(jí)元素。

顏色（Color）

HSL colors:除了支持RGB顏色外，還支持HSL（色相、飽和度、亮度）。以前一般都是作圖的時(shí)候用HSL色譜，但這樣一來會(huì)包括更多的顏色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）

HSLA colors:加了個(gè)不透明度（Apacity），用0到1之間的數(shù)來表示，比如hsla（0,100%,50%,0.2）

opacity:直接控制不透明度，用0到1之間的數(shù)來表示

RGBA colors:和HSLA colors類似，加了個(gè)不透明度。一直以來，瀏覽器的透明一直無法實(shí)現(xiàn)單純的顏色透明，每次使用alpha后就會(huì)把透明的屬性繼承到子節(jié)點(diǎn)上。換句話說，很難實(shí)現(xiàn)背景顏色透明而文字不透明的效果。直到RGBA顏色的出現(xiàn)這一切將成為現(xiàn)實(shí)。

實(shí)現(xiàn)這樣的效果非常簡單，設(shè)置顏色的時(shí)候我們使用標(biāo)準(zhǔn)的rgba（）單位即可，例如rgba（255,0,0,0.4）這樣就出現(xiàn)了一個(gè)紅色同時(shí)擁有alpha透明為0.4的顏色。

經(jīng)過測(cè)試firefox3.0、safari3.2、opera10都支持了rgba單位。

用戶界面（User-interface）

resize:可以由用戶自己調(diào)整div的大小，有horizontal（水平）vertical（垂直）或者both（同時(shí)），或者同時(shí)調(diào)整。如果再加上max-width或min-width的話還可以防止破壞布局

選擇器（Selectors）

CSS3增加了更多的CSS選擇器，可以實(shí)現(xiàn)更簡單但是更強(qiáng)大的功能，比如:nth-child()等。

Attribute selectors:在屬性中可以加入通配符，包括^,$,*

[att^=val]:表示開始字符是val的att屬性 CSS3選擇器[att$=val]:表示結(jié)束字符是val的att屬性

[att*=val]:表示包含至少有一個(gè)val的att屬性

其它模塊：

（Other modules）

media queries:感覺叫媒體選擇比較合適，可以為網(wǎng)頁中不同的對(duì)象設(shè)置不同的瀏覽設(shè)備。比如可以為某一塊分別設(shè)置屏幕瀏覽樣式和手機(jī)瀏覽樣式，以前則只能設(shè)置整個(gè)網(wǎng)頁。

multi-column layout:多列布局，讓文字以多列顯示，包括column-width、column-count、column-gap三個(gè)值

column-width:指定每列寬度

column-count:指定列數(shù)

column-gap:指定每列之間的間距

column-rule-color:控制列間的顏色

column-rule-style:控制列間的樣式

column-rule-width:控制列間的寬度

column-space-distribution:平均分配列間距

html5新增了哪些標(biāo)簽？css3新增了哪些屬性

h5是html的最新版本，是14年由w3c完成標(biāo)準(zhǔn)制定。增強(qiáng)了，瀏覽器的原生功能，減少瀏覽器插件（eg：flash）的應(yīng)用，提高用戶體驗(yàn)滿意度，讓開發(fā)更加方便。

- h5新增的標(biāo)簽

新增元素

說明

video ? ?表示一段視頻并提供播放的用戶界面 ?

audio ? ?表示音頻 ?

canvas ? ?表示位圖區(qū)域 ?

source ? ?為video和audio提供數(shù)據(jù)源 ?

track ? ?為video和audio指定字母 ?

svg ? ?定義矢量圖 ?

code ? ?代碼段 ?

figure ? ?和文檔有關(guān)的圖例 ?

figcaption ? ?圖例的說明 ?

main ?

time ? ?日期和時(shí)間值 ?

mark ? ?高亮的引用文字 ?

datalist ? ?提供給其他控件的預(yù)定義選項(xiàng) ?

keygen ? ?秘鑰對(duì)生成器控件 ?

output ? ?計(jì)算值 ?

progress ? ?進(jìn)度條 ?

menu ? ?菜單 ?

embed ? ?嵌入的外部資源 ?

menuitem ? ?用戶可點(diǎn)擊的菜單項(xiàng) ?

menu ? ?菜單 ?

template ?

section ?

nav ?

aside ?

article ?

footer ?

header ?

- css3

css3被劃分為模塊，最重要的幾個(gè)模塊包括：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉(zhuǎn)換、動(dòng)畫、多列布局、用戶界面

選擇器

框模型

背景和邊框

border-radius、box-shadow、border-image、

background-size：規(guī)定背景圖片的尺寸

background-origin：規(guī)定背景圖片的定位區(qū)域

background-clip：規(guī)定背景的繪制區(qū)域

文本效果（常用）

text-shadow：設(shè)置文字陰影

word-wrap：強(qiáng)制換行

word-break

css3提出@font-face規(guī)則，規(guī)則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D轉(zhuǎn)換

transform：向元素應(yīng)用2/3D轉(zhuǎn)換

transition：過渡

動(dòng)畫

@keyframes規(guī)則：

animation、animation-name、animation-duration等

用戶界面（常用）

box-sizing、resize

css3新增偽類

：nth-child()

：nth-last-child()

：only-child

：last-child

：nth-of-type()

：only-of-type()

：empty

：target ?這個(gè)偽類允許我們選擇基于URL的元素，如果這個(gè)元素有一個(gè)識(shí)別器（比如跟著一個(gè)#），那么:target會(huì)對(duì)使用這個(gè)ID識(shí)別器的元素增加樣式。

：enabled ?

：disabled

：checked

：not

css3有哪些新特性？包含哪些模塊？

第 1 選擇器

第 2 RGBA和透明度

第 3 多欄布局

第 4 多背景圖

第 5 Word Wrap

第 6 文字陰影

第 7 @font-face屬性

第 8 圓角(邊框半徑)

第 9 邊框圖片

第 10 盒陰影

第 11 盒子大小

第 12 媒體查詢

第 13 語音

1、CSS3圓角表格圓角表格，對(duì)應(yīng)屬性：border-radius。

2、以往對(duì)網(wǎng)頁上的文字加特效只能用filter這個(gè)屬性，這次CSS3中專門制訂了一個(gè)加文字特效的屬性，而且不止加陰影這種效果。對(duì)應(yīng)屬性：font-effect。

4、在文字下點(diǎn)幾個(gè)點(diǎn)或打個(gè)圈以示重點(diǎn)，CSS3也開始加入了這項(xiàng)功能，這應(yīng)該在某些特定網(wǎng)頁上很有用。對(duì)應(yīng)屬性：font-emphasize-style和font-emphasize-position。

邊框（Borders）

border-color:控制邊框顏色，并且有了更大的靈活性，可以產(chǎn)生漸變效果；

border-image:控制邊框圖象 CSS3邊框border-corner-image:控制邊框邊角的圖象；

border-radius:能產(chǎn)生類似圓角矩形的效果。

背景（Backgrounds）

background-origin:決定了背景在盒模型中的初始位置，提供了3個(gè)值，border, padding和content。

border:控制背景起始于左上角的邊框；

padding:控制背景起始于左上角的留白；

content:控制背景起始于左上角的內(nèi)容 CSS3背景background-clip:決定邊框是否覆蓋住背景（默認(rèn)是不覆蓋），提供了兩個(gè)值，border和padding。

border:會(huì)覆蓋住背景；

padding:不會(huì)覆蓋背景；

background-size:可以指定背景大小，以象素或百分比顯示。當(dāng)指定為百分比時(shí)，大小會(huì)由所在區(qū)域的寬度、高度，以及background-origin的位置決定。

multiple backgrounds:多重背景圖象，可以把不同背景圖象只放到一個(gè)塊元素里。

文字效果（Text effects）

text-shadow:文字投影，可能是因?yàn)镸AC OSX的Safari瀏覽器開始支持投影才特意增加的。

text -overflow:當(dāng)文字溢出時(shí)，用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit，前兩個(gè)CSS2就有了，目前還是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一個(gè)單詞，對(duì)中文意義不大，inherit可以繼承父級(jí)元素。

顏色（Color）

HSL colors:除了支持RGB顏色外，還支持HSL（色相、飽和度、亮度）。以前一般都是作圖的時(shí)候用HSL色譜，但這樣一來會(huì)包括更多的顏色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）

HSLA colors:加了個(gè)不透明度（Apacity），用0到1之間的數(shù)來表示，比如hsla（0,100%,50%,0.2）

opacity:直接控制不透明度，用0到1之間的數(shù)來表示。

實(shí)現(xiàn)這樣的效果非常簡單，設(shè)置顏色的時(shí)候我們使用標(biāo)準(zhǔn)的rgba（）單位即可，例如rgba（255,0,0,0.4）這樣就出現(xiàn)了一個(gè)紅色同時(shí)擁有alpha透明為0.4的顏色。

經(jīng)過測(cè)試firefox3.0、safari3.2、opera10都支持了rgba單位。

用戶界面（User-interface）

resize:可以由用戶自己調(diào)整div的大小，有horizontal（水平）vertical（垂直）或者both（同時(shí)），或者同時(shí)調(diào)整。如果再加上max-width或min-width的話還可以防止破壞布局。

選擇器（Selectors）

CSS3增加了更多的CSS選擇器，可以實(shí)現(xiàn)更簡單但是更強(qiáng)大的功能，比如:nth-child()等。

其它模塊：

（Other modules）

media queries:感覺叫媒體選擇比較合適，可以為網(wǎng)頁中不同的對(duì)象設(shè)置不同的瀏覽設(shè)備。比如可以為某一塊分別設(shè)置屏幕瀏覽樣式和手機(jī)瀏覽樣式，以前則只能設(shè)置整個(gè)網(wǎng)頁。

multi-column layout:多列布局，讓文字以多列顯示，包括column-width、column-count、column-gap三個(gè)值。

column-width:指定每列寬度;

column-count:指定列數(shù);

column-gap:指定每列之間的間距;

column-rule-color:控制列間的顏色;

column-rule-style:控制列間的樣式;

column-rule-width:控制列間的寬度;

column-space-distribution:平均分配列間距。

CSS3新增的哪些選擇器和常見的屬性是哪些？

一、新增的選擇器

CSS3新增的屬性選擇器 {除ie6外的大部分瀏覽器支持）

1 ? ?E[att^="val"] ? ?屬性att的值以"val"開頭的元素 ? ?div[id^="nav"] { background:#ff0; }?

2 ? ?E[att$="val"] ? ?屬性att的值以"val"結(jié)尾的元素 ? ?? ?

3 ? ?E[att*="val"] ? ?屬性att的值包含"val"字符串的元素 ? ?? ?

結(jié)構(gòu)偽類選擇器（過濾選擇器）

(注：FireFox 1.5/2.0/3.0支持E:root，F(xiàn)ireFox 3.0支持E:last-child、E:only-child、E:empty。

由于IE6/7/8不支持，沒辦法，選擇合適的場(chǎng)合用吧。)

4 ? ?E:root ? ?匹配文檔的根元素，對(duì)于HTML文檔，就是HTML元素 ? ?? ?

5 ? ?E:nth-child(n) ? ?匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1 ? ?p:nth-child(3) { color:#f00; } ?

6 ? ?E:nth-last-child(n) ? ?匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1 ? ?p:last-child { background:#ff0; } ?

7 ? ?E:nth-of-type(n) ? ?與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素 ? ?p:nth-of-type(2){color:red;}選擇父元素的第n個(gè)子元素p ?

8 ? ?E:nth-last-of-type(n) ? ?與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 ? ?? ?

9 ? ?E:last-child ? ?匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1) ? ?? ?

10 ? ?E:first-of-type ? ?匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1) ? ?? ?

11 ? ?E:last-of-type ? ?匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1) ? ?? ?

12 ? ?E:only-child ? ?匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) ? ?p:only-child { background:#ff0; } ?

13 ? ?E:only-of-type ? ?匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) ? ?? ?

14 ? ?E:empty ? ?匹配一個(gè)不包含任何子元素的元素，注意，文本節(jié)點(diǎn)也被看作子元素 ? ?p:empty { background:#ff0; } ?

與用戶界面(UI)有關(guān)的偽類(ie6 7 8不支持)? ??

15 ? ?E:enabled ? ?匹配表單中激活的元素 ? ?? ?

16 ? ?E:disabled ? ?匹配表單中禁用的元素 ? ?input[type="text"]:disabled { background:#ddd; } ?

17 ? ?E:checked ? ?匹配表單中被選中的radio（單選框）或checkbox（復(fù)選框）元素 ? ?? ?

18 ? ?E::selection ? ?匹配用戶當(dāng)前選中的元素 ? ?? ?

級(jí)元素通用選擇器

ie6不支持?

19 ? ?E ~ F ? ?匹配任何在E元素之后的同級(jí)F元素 ? ?p ~ ul { background:#ff0; } ?

反選偽類

(ie6 7 8 firefox3.0以下 Opera9.0不支持) ?

20 ? ?E:not(s) ? ?匹配不符合當(dāng)前選擇器的任何元素 ? ?:not(p) { border:1px solid #ccc; } ?

:target 偽類

(ie6 7 8不支持) ?

21 ? ?E:target ? ?匹配文檔中特定"id"點(diǎn)擊后的效果 ? ?? ?

二、css3新增屬性

一. box-shadow(陰影效果)

使用:

box-shadow: 20px 10px 0 #000;

-moz-box-shadow: 20px 10px 0 #000;

-webkit-box-shadow: 20px 10px 0 #000;

支持:

FF3.5, Safari 4, Chrome 3

二. border-colors(為邊框設(shè)置多種顏色)

使用:

border: 10px solid #000;

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

說明:

顏色值數(shù)量不固定, 且FF的私有寫法不支持縮寫: -moz-border-colors: #333 #444 #555;

支持:

FF3+

三. boder-image(圖片邊框)

使用:

-moz-border-image: url(exam.png) 20 20 20 20 repeat;

-webkit-border-image: url(exam.png) 20 20 20 20 repeat;

說明:

(1). 20 20 20 20 --- 邊框的寬度, 分別對(duì)應(yīng)top, right, bottom, left邊框, 改變寬度可以實(shí)現(xiàn)不同的效果;

(2). 邊框圖片效果(目前僅實(shí)現(xiàn)了兩種):

repeat --- 邊框圖片會(huì)平鋪, 類似于背景重復(fù);

stretch --- 邊框圖片會(huì)以拉伸的方式來鋪滿整個(gè)邊框;

(3). 必須將元素的邊框厚度設(shè)置為非0非auto值.

支持:

FF 3.5,?Safari 4, Chrome 3

四. text-shadow(文本陰影)

使用:

text-shadow:?[顏色水平偏移縱向偏移模糊半徑] ||?[水平偏移縱向偏移模糊半徑顏色];

說明:

(1)?顏色和模糊半徑是可選的, 當(dāng)顏色未指定時(shí), 將使用文本顏色; 當(dāng)模糊半徑未指定時(shí), 半徑值為0;

(2)?shadow可以是逗號(hào)分隔的列表, 如:

text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

(3)?陰影效果會(huì)按照shadow list中指定的順序應(yīng)用到元素上;

(4)?這些陰影效果有可能相互重疊, 但不會(huì)疊加文本本身;

(5)?陰影可能會(huì)跑到容器的邊界之外, 但不會(huì)影響容器的大小.

支持:

FF 3.5, Opera 10, Safari 4, Chrome 3

五.??text-overflow(文本截?cái)?

使用:

text-overflow: inherit | ellipsis | clip ;

-o-text-overflow: inherit | ellipsis | clip;

說明:

(1) 還有一個(gè)屬性ellipsis-word, 但各瀏覽器均不支持.

支持:

IE6+, Safari4, Chrome3, Opera10

六. word-wrap(自動(dòng)換行)

使用:

word-wrap: normal | break-word;

支持:

IE6+, FF 3.5, Safari 4, Chrome 3

七. border-radius(圓角邊框)

使用:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

支持:

FF 3+, Safari 4 , Chrome 3

八. ? opacity(不透明度)

使用:

opacity: 0.5;

filter: alpha(opacity=50); /* for IE6, 7 */

-ms-filter(opacity=50); /* for IE8 */

支持:

all

九. box-sizing(控制盒模型的組成模式)

使用:

box-sizing: content-box | border-box; // for opera

-moz-box-sizing:?content-box | border-box;

-webkit-box-sizing:?content-box | border-box;

說明:

1. content-box:

使用此值時(shí),?盒模型的組成模式是, 元素寬度 = content + padding + border;

2. border-box:

使用此值時(shí),?盒模型的組成模式是, 元素寬度 = content(即使設(shè)置了padding和border, 元素的寬度

也不會(huì)變).

支持:

FF3+, Opera 10, Safari 4, Chrome 3

十. resize(元素縮放)

使用:

resize:? none | both | horizontal | vertical;

說明:

1. 必須將元素的overflow屬性設(shè)置為auto或hidden, 該屬性才能起作用(overflow設(shè)置為visible時(shí), 無效);

2. 屬性值說明:

(1). none -- 禁用縮放;

(2). both -- 可同時(shí)縮放寬度和高度;

(3). horizontal -- 僅能縮放寬度;

(4). vertical -- 僅能縮放高度;

支持:

safari 4, chrome 3

十一. outline(外邊框)

使用:

outline: 邊框厚度 邊框樣式 邊框顏色;

outline-offset: 偏移值;

說明:

outline-offset需要獨(dú)立寫, 簡寫是無效的.

支持:

FF3+, safari 4, chrome 3, opera 10

十二. background-size(指定背景圖片的尺寸)

使用:

-o-background-size: [length | percentage] {1, 2};

-webkit-background-size:?[length | percentage] {1, 2};

例如:

-o-background-size: 50px 60px;

-webkit-background-size:?50px 60px;

這會(huì)將背景圖片的寬設(shè)置了50px, 高60px.

支持:

safari 4, chrome 3, opera 10

十三. background-origin(指定背景圖片從哪里開始顯示)

使用:

-webkit-background-origin: border | padding | content;

-moz-background-origin: border | padding | content;

說明:

(1) border --?從border區(qū)域開始顯示背景;

(2) padding --?從padding區(qū)域開始顯示背景;

(3) content --?從content區(qū)域開始顯示背景;

注意:

1. 必須先指定background屬性, 然后才能指定該屬性, 如果該屬性出現(xiàn)在background屬性之前,

會(huì)無效.

支持:

safari 4, chrome 3, FF 3+ ?? ?? ?

十四. background-clip(指定背景圖片從什么位置開始裁切)

使用:

-webkit-background-origin: border-box | padding-box | content-box | no-clip;

說明:

(1)?border-box?--?從border區(qū)域向外裁剪背景;

(2)?padding-box?--?從padding區(qū)域向外裁剪背景;

(3)?content-box?--?從content區(qū)域向外裁剪背景;

(4) no-clip -- 不裁切背景.

注意:

1. 必須先指定background屬性, 然后才能指定該屬性, 如果該屬性出現(xiàn)在background屬性之前,

會(huì)無效.

支持:

safari 4, chrome 3

十五. ?background(為一個(gè)元素指定多個(gè)背景)

使用:

background:? [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

例子:

background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;

支持:

safari 4, chrome 3

十六. hsl(通過色調(diào), 飽和度, 亮度來指定顏色值)

使用:

hsl: (?length?||?percentage?||?percentage);

說明:

(1) length: h(色調(diào)), ?0(或360)表示紅色, 120表示綠色, 240表示藍(lán)色;

(2) percentage: s(飽和度), ?取值為0%到100%之間的值;

(3) percentage: l(亮度), ?取值為0%到100%之間的值;

例子:

background: hsl(240, 50%, 100%);

color: hsl(100, 80, 100%);

支持:

safari 4, chrome 3, FF3, opera 10

十七. hsla(在hsl的基礎(chǔ)上上增加了一個(gè)透明度設(shè)置)

使用:

hsla: (?length??||??percentage??||??percentage || opacity);

說明:

(1) opacity: a(透明度), 取值在0到1之間;

例子:

background: hsl(240, 50%, 100%, 0.5);

color: hsl(240, 50%, 100%, 0.5);

支持:

safari 4, chrome 3, FF3, opera 10

十八. rgba(基于r,g,b三個(gè)顏色通道來設(shè)置顏色值, 通過a來設(shè)置透明度)

使用:

rgba: (r, g, b, opacity);

說明:

(1) r: 紅色,?正整數(shù) | 百分?jǐn)?shù);

(2) g: 綠色,?正整數(shù) | 百分?jǐn)?shù);

(3) b: 藍(lán)色,?正整數(shù) | 百分?jǐn)?shù);

(4) a: 透明度, 取值在0到1之間;

(5) 正整數(shù)在0到255之間, 百分?jǐn)?shù)在0%到100%之間.

例子:

rgba: (100%, 244, 0, 0.5);

支持:

safari 4, chrome 3, FF3, opera 10

十九、?transition（a標(biāo)簽hover漸隱效果）

a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s;}

-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

transition:color 0.15s linear 0s, background-color 0.3s linear 0s;

文章題目：css3新增樣式,css3新增樣式選擇器
鏈接地址：http://www.rwnh.cn/article26/dscogcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)