《web 前端》10.1CSS3背景屬性

教育.信息化教學(xué)課程web前端目錄ContentsCSS3背景屬性CSS3字體文本屬性CSS3變形動畫屬性CSS3新增多例屬性CSS3彈性盒子第十章

CSS3新增屬性10.110.210.310.410.5CSS3背景屬性01PART10.1CSS3新增功能

CSS3使用了層疊樣式表技術(shù)，可以對網(wǎng)頁布局、字體、顏色、背景燈效果做出控制。css3作為css的進(jìn)階版，拆分和增加了盒子模型、列表模塊、語言模塊、背景邊框、文字特效、多欄布局等等。CSS3的改變有很多，增加了文字特效，豐富了下劃線樣式，加入了圈重點(diǎn)的功能。在邊框方面，有了更多的靈活性，可以更加輕松地操控漸變效果和動態(tài)效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大的功夫，并且網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2，因此原來的代碼不需要做太多的改變，只會變得更加地輕松。CSS3邊框

用CSS3，您可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計程序（如Photoshop等作圖軟件），極大地幫助您節(jié)省了很多時間。而在本節(jié)中，您將了解以下的邊框?qū)傩杂校篵order-radiusbox-shadowborder-image（需要注意的是：該屬性不支持ie瀏覽器）InternetExplorer9+支持border-radius和box-shadow屬性。Firefox、Chrome以及Safari支持所有新的邊框?qū)傩?。注釋：對于border-image，Safari5以及更老的版本需要前綴-webkit-。Opera支持border-radius和box-shadow屬性，但是對于border-image需要前綴-o-。CSS3邊框CSS3圓角在CSS2中添加圓角是需要一些技巧的，尤其對于新手來說更加難了，所有我們不得不在每個角落使用不同的圖像。但是如果您在CSS3中，就能夠很容易創(chuàng)建圓角。在CSS3中border-radius屬性就是被用于創(chuàng)建圓角的：實(shí)例：圓角邊框在div中添加圓角元素：div{border:2pxsolid;border-radius:25px;}運(yùn)行效果CSS3邊框CSS3盒陰影CSS3中的box-shadow屬性被用來添加陰影；實(shí)例：陰影

div{width:300px;height:100px;background-color:yellow;box-shadow:10px10px5px#888888;}運(yùn)行效果CSS3邊框CSS3邊界圖片有了CSS3的border-image屬性，你可以使用圖像創(chuàng)建一個邊框：border-image屬性允許你指定一個圖片作為邊框！用于創(chuàng)建上文邊框的原始圖像.屬性

說明CSSborder-image設(shè)置所有邊框圖像的速記屬性。3border-radius一個用于設(shè)置所有四個邊框-*-半徑屬性的速記屬性3box-shadow附加一個或多個下拉框的陰影3CSS3邊框案例：div{border:15pxsolidtransparent;width:250px;padding:10px20px;}#round{-webkit-border-image:url(/statics/images/course/border.png)3030round;/*Safari5andolder*/-o-border-image:url(/statics/images/course/border.png)3030round;/*Opera*/border-image:url(/statics/images/course/border.png)3030round;}CSS3圓角

使用CSS3border-radius屬性，你可以給任何元素制作"圓角"。表格中的數(shù)字表示支持該屬性的第一個瀏覽器的版本號。-webkit-或-moz-前面的數(shù)字表示支持該前綴的第一個版本。提示：border-radius屬性實(shí)際上是以下屬性的簡寫屬性：border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radiusCSS3圓角

CSS3border-radius-指定每個圓角如果你在border-radius屬性中只指定一個值，那么將生成4個圓角。但是，如果你要在四個角上一一指定，可以使用以下規(guī)則：以下為三個實(shí)例:1.四個值-border-radius:15px50px30px5px:第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。2.三個值-border-radius:15px50px30px:第一個值為左上角,第二個值為右上角和左下角，第三個值為右下角3.兩個值-border-radius:15px50px:第一個值為左上角與右下角，第二個值為右上角與左下角4.一個值：-border-radius：15px;四個圓角值相同CSS3圓角

案例：#rcorners4{border-radius:15px50px30px5px;background:#8AC007;padding:20px;width:200px;height:150px;}#rcorners5{border-radius:15px50px30px;background:#8AC007;padding:20px;width:200px;height:150px;}#rcorners6{border-radius:15px50px;background:#8AC007;padding:20px;width:200px;height:150px;}CSS3背景CSS3更新了幾個新的背景屬性，提供更大背景元素控制，通過這幾個背景屬性，您能夠做出更加精美的樣式屬性

說明background用于在一條聲明中設(shè)置所有背景屬性的簡寫屬性。background-clip規(guī)定背景的繪制區(qū)域。background-image為一個元素指定一幅或多幅背景圖像。background-origin規(guī)定背景圖像的放置位置。background-size規(guī)定背景圖像的大小。CSS3背景CSS多重背景CSS允許您通過background-image屬性為一個元素添加多幅背景圖像。不同的背景圖像用逗號隔開，并且圖像會彼此堆疊，其中的第一幅圖像最靠近觀看者。下面的例子有兩幅背景圖像，第一幅圖像是花朵（與底部和右側(cè)對齊），第二幅圖像是紙張背景（與左上角對齊）：#example1{background-image:url(flower.gif),url(paper.gif);background-position:rightbottom,lefttop;background-repeat:no-repeat,repeat;}運(yùn)行效果CSS3背景CSS背景尺寸CSSbackground-size屬性允許您指定背景圖像的大小?？梢酝ㄟ^長度、百分比或使用以下兩個關(guān)鍵字之一來指定背景圖像的大?。篶ontain或cover。contain關(guān)鍵字將背景圖像縮放為盡可能大的尺寸（但其寬度和高度都必須適合內(nèi)容區(qū)域）。這樣，取決于背景圖像和背景定位區(qū)域的比例，可能存在一些未被背景圖像覆蓋的背景區(qū)域。cover關(guān)鍵字會縮放背景圖像，以使內(nèi)容區(qū)域完全被背景圖像覆蓋（其寬度和高度均等于或超過內(nèi)容區(qū)域）。這樣，背景圖像的某些部分可能在背景定位區(qū)域中不可見。CSS3背景

案例：.div1{border:1pxsolidblack;height:120px;width:150px;background:url(/i/photo/flower.gif);background-repeat:no-repeat;background-size:contain;}.div2{border:1pxsolidblack;height:120px;width:150px;background:url(/i/photo/flower.gif);background-repeat:no-repeat;background-size:cover;}.div3{border:1pxsolidblack;height:120px;width:150px;background:url(/i/photo/flower.gif);background-repeat:no-repeat;}CSS3背景定義多個背景圖像的尺寸在處理多重背景時，background-size屬性還可以接受多個設(shè)置背景尺寸的值（使用逗號分隔的列表）。案例：#example1{background:url(/i/photo/tree.png)lefttopno-repeat,url(/i/photo/flower.gif)rightbottomno-repeat,url(/i/paper.jpg)lefttoprepeat;padding:15px;background-size:50px,130px,auto;}CSS3背景全尺寸背景圖像現(xiàn)在，實(shí)現(xiàn)網(wǎng)站上的背景圖像始終覆蓋整個瀏覽器窗口。具體要求如下：用圖像填充整個頁面（無空白）；根據(jù)需要縮放圖像；在頁面上居中圖像；不引發(fā)滾動條；<style>html{background:url(/i/photo/tiyugongyuan.jpg)no-repeatcenterfixed;background-size:cover;}body{color:white;}</style>CSS3背景CSS3的background-Origin屬性background-Origin屬性指定了背景圖像的位置區(qū)域。content-box,padding-box,和border-box區(qū)域內(nèi)可以放置背景圖CSS3背景

案例：div{border:1pxsolidblack;padding:35px;background-image:url('/statics/images/course/smiley.gif');background-repeat:no-repeat;background-position:left;}#div1{background-origin:border-box;}#div2{background-origin:content-box;CSS3漸變CSS3漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。以前，你必須使用圖像來實(shí)現(xiàn)這些效果。但是，通過使用CSS3漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。CSS3定義了兩種類型的漸變（gradients）：線性漸變（LinearGradients）-向下/向上/向左/向右/對角方向徑向漸變（RadialGradients）-由它們的中心定義CSS3漸變CSS3漸變案例：線性漸變-從上到下#grad{background:-webkit-linear-gradient(red,blue);/*Safari5.1-6.0*/background:-o-linear-gradient(red,blue);/*Opera11.1-12.0*/background:-moz-linear-gradient(red,blue);/*Firefox3.6-15*/background:linear-gradient(red,blue);/*標(biāo)準(zhǔn)的語法*/}CSS3漸變案例：線性漸變-從左到右#grad{background:-webkit-linear-gradient(left,red,blue);/*Safari5.1-6.0*/background:-o-linear-gradient(right,red,blue);/*Opera11.1-12.0*/background:-moz-linear-gradient(right,red,blue);/*Firefox3.6-15*/background:linear-gradient(toright,red,blue);/*標(biāo)準(zhǔn)的語法*/}CSS3漸變案例：線性漸變-對角#grad{background:-webkit-linear-gradient(lefttop,red,blue);/*Safari5.1-6.0*/background:-o-linear-gradient(bottomright,red,blue);/*Opera11.1-12.0*/background:-moz-linear-gradient(bottomright,red,blue);/*Firefox3.6-15*/background:linear-gradient(tobottomright,red,blue);/*標(biāo)準(zhǔn)的語法*/}CSS3漸變案例：線性漸變-使用角度如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預(yù)定義方向（tobottom、totop、toright、toleft、tobottomright，等等）。#grad{background:-webkit-linear-gradient(180deg,red,blue);/*Safari5.1-6.0*/background:-o-linear-gradient(180deg,red,blue);/*Opera11.1-12.0*/background:-moz-linear-gradient(180deg,red,blue);/*Firefox3.6-15*/background:linear-gradient(180deg,red,blue);/*標(biāo)準(zhǔn)的語法*/}語法background:linear-gradient(angle,color-stop1,color-stop2);CSS3漸變案例：線性漸變-多個顏色結(jié)點(diǎn)#grad{background:-webkit-linear-gradient(red,green,blue);/*Safari5.1-6.0*/background:-o-linear-gradient(red,green,blue);/*Opera11.1-12.0*/background:-moz-linear-gradient(red,green,blue);/*Firefox3.6-15*/background:linear-gradient(red,green,blue);/*標(biāo)準(zhǔn)的語法*/}CSS3漸變案例：使用透明度（Transparency）CSS3漸變也支持透明度（transparency），可用于創(chuàng)建減弱變淡的效果。為了添加透明度，我們使用rgba()函數(shù)來定義顏色結(jié)點(diǎn)。rgba()函數(shù)中的最后一個參數(shù)可以是從0到1的值，它定義了顏色的透明度：0表示完全透明，1表示完全不透明。#grad{background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));/*Safari5.1-6*/background:-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));/*Opera11.1-12*/background:-moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));/*Firefox3.6-15*/background:linear-gradient(toright,rgba(255,0,0,0),rgba(255,0,0,1));/*標(biāo)準(zhǔn)的語法*/}CSS3漸變案例：重復(fù)的線性漸變repeating-linear-gradient()函數(shù)用于重復(fù)線性漸變：#grad{/*Safari5.1-6.0*/background:-webkit-repeating-linear-gradient(red,yellow10%,green20%);/*Opera11.1-12.0*/background:-o-repeating-linear-gradient(red,yellow10%,green20%);/*Firefox3.6-15*/background:-moz-repeating-linear-gradient(red,yellow10%,green20%);/*標(biāo)準(zhǔn)的語法*/background:repeating-linear-gradient(red,yellow10%,