html5css3課程-第九章新特性

信賴源于專業(yè)CSS3新特性預(yù)習(xí)檢查CSS3和之前版本的CSS相比，增加了哪些功能？如何使用CSS3的屬性選擇器？2增加了選擇器，支持圓角邊框，文字特效，半透明。。。。選擇器名稱[屬性=值]{。。。。}Input[type=“text”]{。。。。}了解CSS3的新特性掌握屬性選擇器掌握CSS3的特效使用方式本章目標(biāo)3信賴源于專業(yè)什么是CSS3是CSS技術(shù)的升級版本。CSS3語言開發(fā)是朝著模塊化發(fā)展的.模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。就目前來講CSS3規(guī)范并未成型，瀏覽器的支持參差不齊。相比CSS2CSS3增加了新的選擇器和新的功能參考《》將以前的整個(gè)大模塊拆分成了一個(gè)一個(gè)小的模塊，降低了復(fù)雜度。CSS3將完全向后兼容。CSS3新的特性?屬性選擇器?半透明效果?邊框樣式?文本樣式?背景色漸變?元素變形?效果過度屬性選擇器,透明效果

input[type="text"]{ width:180px; } input[type="password"]{ width:280px; } .load{

opacity:0.5 } <inputtype="text"/> <inputtype="password"/> <inputtype="text"class="load"value="歡迎來到KPCP"/> <inputtype="text"value="歡迎來到KPCP"/>

參考：屬性選擇器.html屬性選擇器設(shè)置透明度，0：不透，1：全透信賴源于專業(yè)邊框樣式CSS3中新增了邊框樣式，可以做出以前必須用圖片才能做出的事情。1.broder-radius:圓角邊框 broder-top-left-radius 左上角為圓角 broder-top-right-radius 右上角為圓角 broder-bottom-left-radius 左下角為圓角 broder-bottom-right-radius 右下角為圓角

信賴源于專業(yè)信賴源于專業(yè)邊框樣式2.邊框陰影：box-shadow：能夠?yàn)檫吙蛱砑雨幱埃⑶夷軌蛑该鞣较?，顏色等屬?p1{box-shadow:5px3pxblack;} {XY模糊的顏色}#p2{ box-shadow:5px3px3pxblack;} {XY模糊半徑顏色}#p3{ box-shadow:003px3pxblack;} {XY模糊半徑傳播半徑顏色}#p4{ box-shadow:inset3px3px3pxblack;} {inset表示內(nèi)陰影}#p5{ box-shadow:inset3px3px3pxblack,3px3px3pxblack;}{內(nèi)外陰影}<pid="txt1">普通邊框陰影</p><br/><pid="txt2">模糊邊框陰影</p><br/><pid="txt3">整體邊框陰影</p><br/><pid="txt4">邊框內(nèi)部陰影</p><br/><pid="txt5">邊框內(nèi)外陰影</p><br/>參考：邊框.html

信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)文本樣式1.文本陰影：#but1{text-shadow:5px3px3pxblack;}{XY模糊半徑顏色}<inputtype="button"id="but1"value="陰影"/>2.文本溢出：#div2{width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}<divid=“div2”>這個(gè)地方會溢出</div>參考：文本樣式.html

值小伙ellipsis使用符號“…”代替輸出clip直接截?cái)噍敵鲂刨囋从趯I(yè)信賴源于專業(yè)信賴源于專業(yè)背景色漸變r(jià)adial-gradien([方向]，<顏色[范圍]>，<顏色[范圍]>，<顏色[范圍]>);#div1{ height:300px; width:20px; background:-webkit-linear-gradient(top,#9F9,#C60,#F09);}#div2{ background:-webkit-linear-gradient(left,#9F9,#C60,#F09);}<divid="div1">背景色漸變</div><divid="div2">背景色漸變</div>參考：背景色漸變.html

針對的瀏覽器內(nèi)核Top,上下。Left，左右信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)放射漸變r(jià)adial-gradien([位置]，[大小|形狀]，<顏色[范圍]>，<顏色[范圍]>，<顏色[范圍]>);.d{ background:-webkit-radial-gradient(centercenter,50px50px,black40px,white0px);}.a{ background:-webkit-radial-gradient(black,white);}.img{-webkit-mask-image:-webkit-radial-gradient(black100px,rgba(0,0,0,0)240px);}<divclass="a"></div><divclass="d">ddddd</div><imgsrc="psb.jpg"class="img"/></body>參考：放射漸變.html

信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)元素變形css3中新曾的transform可用于內(nèi)聯(lián)元素（inline）和塊級元素（block）,對其進(jìn)行外觀的轉(zhuǎn)換；.rotate{-webkit-transform:rotate(45deg);}<divclass="rotate"><imgsrc="psb.jpg"/>旋轉(zhuǎn)變形</div>Transform支持matrix（矩陣變化）:一次使用多種變形方式-webkit-transform:rotate(45deg)scale(0.5,1.5);參考：元素變形.html

屬性名稱含義rotate旋轉(zhuǎn)變形scale縮放變形skew傾斜變形translate位移變形信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)效果過渡CSS3中，可以通過非常簡單的設(shè)置，來完成不同要是之間的切換。li{ -webkit-transition-property:all;-webkit-transition-duration:1s;}li.a:hover{-webkit-transform:scale(1.5,1.5);}<ul> <liclass="a">放大</li></ul>參考：效果過渡.html

屬性名稱含義transition-property設(shè)置需要過渡的樣式transition-duration設(shè)置過渡的時(shí)間(單位：秒)transition-delay過渡等待時(shí)間(單位：秒)transition-timing-function過濾效果控制All:所有變化都適應(yīng)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)效果過渡有的時(shí)候我們需要一些特殊的過渡方式，比如控制過渡的節(jié)奏，這個(gè)時(shí)候我們就需要一些算法，在CSS3中，它幫我們集成一些不同的過渡效果（貝賽爾曲線）效果。使用transition-timing-function屬性來完成我們所需要的效果。參考：貝賽爾曲線.html

屬性名稱含義linear勻速ease逐漸變慢ease-in加速ease-out減速ease-in-out先加速后減速信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)瀏覽器支持目前市面上的瀏覽器，對CSS3的支持個(gè)不相同，這個(gè)相信在不就的將來將會得到完善，目前對CSS3支持的瀏覽器有：信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)信賴源于專業(yè)CSS3給我們帶來的影響1.CSS3向后完全兼容，讓我