? ? ? ? 這兩天找工作，面試官問(wèn)了我一個(gè)問(wèn)題锄列，印象挺深刻的图云。問(wèn)：css3和html5都新增了些什么東西。然后我一下就蒙了邻邮，什么也沒(méi)答上來(lái)竣况，等面試結(jié)束之后去網(wǎng)上查了查資料，忽然發(fā)現(xiàn)css3和html5新增的東西不就是平常用的嗎筒严。
????????看完之后才想明白丹泉，由于進(jìn)入前端開(kāi)發(fā)也就兩年多的時(shí)間情萤，屬于半路出家，對(duì)于前端的歷史了解不足摹恨，從學(xué)習(xí)前端開(kāi)發(fā)那天起筋岛，我學(xué)的就是css3和html5的內(nèi)容，要是問(wèn)我新增了什么晒哄，那我也得知道在css3和html5之前都有什么呀睁宰。
不多說(shuō)了，根據(jù)從網(wǎng)上找到的內(nèi)容整理一下寝凌，加深印象
css3新增：
一勋陪、邊框?qū)傩?/b>
1、border-color：為邊框設(shè)置多種顏色
{
????border-style: solid;
????border-color: #ff0000 #0000ff;
}
這里說(shuō)一下題外話硫兰，需要注意："border-width" 屬性如果單獨(dú)使用的話是不會(huì)起作用的诅愚。請(qǐng)首先使用 "border-style" 屬性來(lái)設(shè)置邊框。
2劫映、border-image：圖片邊框（有瀏覽器兼容問(wèn)題违孝，注意:?Internet Explorer 10 及更早的版本不支持 border-image 屬性。）
{
????-webkit-border-image:url(../test.png) 30 30 round; /* Safari 5 */
????-o-border-image:url(../test.png) 30 30 round; /* Opera */
????border-image:url(../test.png) 30 30 round;
}
3泳赋、border-radius：圓角邊框
{
????border:2px solid;
????border-radius:25px;
}
4雌桑、box-shadow：陰影效果
{
????box-shadow: 10px 10px 5px #888888;
}
二、背景屬性
1祖今、background-size：指定背景圖片尺寸
????????在 CSS3 之前校坑，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的。在 CSS3 中千诬，可以規(guī)定背景圖片的尺寸耍目，這就允許我們?cè)诓煌沫h(huán)境中重復(fù)使用背景圖片。您能夠以像素或百分比規(guī)定尺寸徐绑。如果以百分比規(guī)定尺寸邪驮，那么尺寸相對(duì)于父元素的寬度和高度。
{
????background:url(img_flwr.gif);
????background-size:80px 60px;
????background-repeat:no-repeat;
}
2傲茄、background-origin：指定背景圖片從哪里開(kāi)始顯示
{
????background-image:url('smiley.gif');
????background-repeat:no-repeat;
????background-position:left;
? ? background-origin:content-box;
}
3毅访、background-clip：指定背景圖片從什么位置開(kāi)始裁剪
{
????background-color:yellow;
????background-clip:content-box;
}
三哭廉、文字效果
1潮孽、text-shadow：文本陰影
{
????text-shadow: 5px 5px 5px #FF0000;
}
說(shuō)明:
(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ì)影響容器的大小守呜。
2、word-wrap：自動(dòng)換行
單詞太長(zhǎng)的話就可能無(wú)法超出某個(gè)區(qū)域，允許對(duì)長(zhǎng)單詞進(jìn)行拆分弛饭，并換行到下一行
{
????word-wrap:break-word;
}
四冕末、css3新增動(dòng)畫(huà)效果
1、transform：變換效果
????????css3提供了元素變形效果侣颂，也叫做變換档桃。它可以將元素實(shí)現(xiàn)旋轉(zhuǎn)、縮放和平移的功能憔晒。
? ??????屬性值：
????????????（1）transform 藻肄；
????????????（2）transform-origin：transform-origin 屬性可以設(shè)置變換的起點(diǎn)。默認(rèn)情況下拒担，使用元素的中心作為起點(diǎn)嘹屯。
2、animation：動(dòng)畫(huà)效果
????????CSS3 提供了類似 Flash 關(guān)鍵幀控制的動(dòng)畫(huà)效果从撼，通過(guò) animation 屬性實(shí)現(xiàn)州弟。那么之前的 transition 屬性只能通過(guò)指定屬性的初始狀態(tài)和結(jié)束狀態(tài)來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，有一定的局限性低零。
????????animation 實(shí)現(xiàn)動(dòng)畫(huà)效果主要由兩個(gè)部分組成：1婆翔、通過(guò)類似 Flash 動(dòng)畫(huà)中的關(guān)鍵幀聲明一個(gè)動(dòng)畫(huà)；2掏婶、在 animation 屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫(huà)啃奴。
五、css3新增過(guò)渡效果
1雄妥、transition：過(guò)渡效果
過(guò)渡效果一般是通過(guò)一些簡(jiǎn)單的 CSS 動(dòng)作觸發(fā)平滑過(guò)渡功能最蕾，比如：:hover、:focus老厌、:active瘟则、:checked 等。CSS3 提供了 transition 屬性來(lái)實(shí)現(xiàn)這個(gè)過(guò)渡功能梅桩。
對(duì)于css3新增的過(guò)渡內(nèi)容和css新增動(dòng)畫(huà)效果大家也可以參考CSS3 最新版參考手冊(cè)壹粟。
本篇文章到這里也就結(jié)束了，以上就是為大家總結(jié)的css3中新增的常用屬性宿百。
HTML5新增
h5是html的最新版本，是14年由w3c完成標(biāo)準(zhǔn)制定洪添。增強(qiáng)了垦页，瀏覽器的原生功能，減少瀏覽器插件（eg：flash）的應(yīng)用干奢，提高用戶體驗(yàn)滿意度痊焊，讓開(kāi)發(fā)更加方便。- h5新增的標(biāo)簽
新增元素
video ? ?表示一段視頻并提供播放的用戶界面
audio ? ?表示音頻 ? ?
canvas ? ?表示位圖區(qū)域 ? ?
source ? ?為video和audio提供數(shù)據(jù)源 ? ?
track ? ?為video和audio指定字母 ? ?
svg ? ?定義矢量圖 ? ?
code ? ?代碼段 ? ?
figure ? ?和文檔有關(guān)的圖例 ? ?
figcaption ? ?圖例的說(shuō)明 ? ?
main ? ?規(guī)定文檔的主要內(nèi)容
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? ??
