CSS层叠样式表进阶
生活随笔
收集整理的這篇文章主要介紹了
CSS层叠样式表进阶
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 進(jìn)階學(xué)習(xí)導(dǎo)圖
- CSS3新增選擇器
- CSS3新增盒子屬性
- 圓角邊框?qū)傩?/li>
- 邊框圖片屬性
- 盒子陰影屬性
- 盒子背景屬性
- CSS3漸變屬性
- 線性漸變
- 重復(fù)線性漸變
- 徑向漸變
- 重復(fù)徑向漸變
- CSS3字體與文本效果
- 使用字體
- 文本陰影
- 文本溢出處理
- CSS3 2D/3D變換
- 平移變換
- 旋轉(zhuǎn)變換
- 旋轉(zhuǎn)變換
- 傾斜變換
- prespective屬性
- 變換應(yīng)用案例
- CSS3過渡與動畫效果
- 過渡效果
- 動畫效果
- 圖像濾鏡效果
- CSS3應(yīng)用案例
- 導(dǎo)航條
- 下拉菜單
- 響應(yīng)式圖片與媒體查詢
- 關(guān)鍵幀動畫
- 旋轉(zhuǎn)照片墻
- 輪播圖效果
- CSS3新增選擇器
- 新增偽類選擇器
- E:not() 用于匹配除not()中選擇的元素外的所有元素
- E:target用來匹配錨點(diǎn)#指向的文檔中的具體元素，即URL后面跟錨點(diǎn)#，指向文檔內(nèi)某個(gè)具體的元素，那么該元素就會觸發(fā)target
- E:first-child表示選擇父元素下的第一個(gè)子元素，E:last-child表示選擇父元素 下最后一個(gè)子元素
- E:nth-child(n)表示選擇父元素下的第n個(gè)子元素，注意在CSS中n從1開始，且n可以是表達(dá)式。E:nth-last-child(n)表示從父元素最后一個(gè)元素開始計(jì)數(shù)，反向選擇
- E:only-child表示如果父元素下僅有一個(gè)元素，那么該元素被選中
- E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-of-last-type(n),只考慮樣式中定義的子元素類型，不會受到其他元素的影響
- E:empty表示選擇沒有任何子元素的父元素
- 注意點(diǎn)：
- E:checked匹配用戶界面上處于選中狀態(tài)的元素E，該選擇器主要用于檢測表單中單選框或者復(fù)選框是否為選中狀態(tài)
- CSS3新增盒子屬性
- 圓角邊框?qū)傩詁order-radius
- 注意
- 設(shè)置不同個(gè)數(shù)的屬性值
- 設(shè)置橢圓邊框效果
- 圖片的圓角效果：
- 邊框圖片屬性
- 盒子陰影屬性
- 紙質(zhì)樣式卡片效果
- 圖片卡片陰影效果
- 盒子背景屬性
- background-size 指定背景圖像的大小，
- background-origin屬性指定了背景圖像的起始區(qū)域
- CSS3漸變屬性
- 線性漸變
- 指定線性漸變的方向（左右，對角線）
- 指定線性漸變的方向（指定角度）
- 多個(gè)顏色過渡節(jié)點(diǎn)的線性漸變
- 精確控制顏色過渡位置
- 帶透明度顏色過渡的線性漸變
- 重復(fù)線性漸變（repeating-linear-gradient）
- 徑向漸變
- 徑向漸變：
- 顏色節(jié)點(diǎn)均勻分布的徑向漸變
- 顏色節(jié)點(diǎn)不均勻分布的徑向漸變
- 重復(fù)徑向漸變
- CSS3字體與文本屬性
- 字體簡介
- 文本陰影
- 文本溢出處理
- 注意：
- CSS3 2D/3D變換
- 平移變換
- 旋轉(zhuǎn)變換
- 縮放變換
- 傾斜變換
- 存在傾斜偏差錯(cuò)位的原因呢，完全是因?yàn)樽值拇嬖?#xff1a;
- 透視變換（開啟3D）
- 近一步觀察
- 變換應(yīng)用案例
- CSS3過渡與動畫效果
- 過渡
- 動畫效果
- 圖片過濾效果
- CSS3應(yīng)用案例
- 水平導(dǎo)航條
- 下拉菜單
- 響應(yīng)式圖片與媒體查詢
- 響應(yīng)式圖片
- 媒體查詢
- 注意：
- 關(guān)鍵幀同樣大小，動畫
- 注意：
- 旋轉(zhuǎn)照片墻
- 注意
進(jìn)階學(xué)習(xí)導(dǎo)圖
CSS3新增選擇器
CSS3新增盒子屬性
圓角邊框?qū)傩?/h4>
邊框圖片屬性
盒子陰影屬性
盒子背景屬性
CSS3漸變屬性
線性漸變
重復(fù)線性漸變
徑向漸變
重復(fù)徑向漸變
CSS3字體與文本效果
使用字體
文本陰影
文本溢出處理
CSS3 2D/3D變換
平移變換
旋轉(zhuǎn)變換
旋轉(zhuǎn)變換
傾斜變換
prespective屬性
變換應(yīng)用案例
CSS3過渡與動畫效果
過渡效果
動畫效果
圖像濾鏡效果
CSS3應(yīng)用案例
導(dǎo)航條
下拉菜單
響應(yīng)式圖片與媒體查詢
關(guān)鍵幀動畫
旋轉(zhuǎn)照片墻
輪播圖效果
CSS3新增選擇器
新增偽類選擇器
| E:not() | 匹配除not()中選擇的元素外的所有元素 |
| E:root | 匹配文檔所在的根元素，一般是html元素 |
| E:target | 匹配錨點(diǎn)#指向的文檔中的具體元素 |
| E:first-child | 匹配父元素下的第一個(gè)子元素 |
| E:last-child | 匹配父元素下的最后一個(gè)子元素 |
| E:only-child | 如果父元素下僅有一個(gè)子元素，則匹配 |
| E:nth-child(n) | 匹配父元素下面的第n個(gè)子元素，n從1開始且n可以是表達(dá)式 |
| E:nth-last-child(n) | 從后向前匹配父元素下面的第n個(gè)子元素 |
| E:first-of-type | 在父元素下面尋找第一個(gè)匹配的子元素 |
| E:last-of-type | 在父元素下面尋找最后一個(gè)匹配的子元素 |
| E:only-of-type | 匹配父元素的所有子元素中唯一的那個(gè)子元素 |
| E:nth-of-last-type(n) | 匹配父元素的第n個(gè)子元素 |
| E:nth-of-last-type(n) | 從后往前匹配父元素的第n個(gè)子元素 |
| E:empty | 匹配沒有任何子元素的元素 |
| E:checked | 匹配用戶界面上處于選中狀態(tài)的元素 |
| E:enabled | E:disabled | 用戶選擇input的正常狀態(tài)和不可操作狀態(tài) |
| E:read-only | E:read-write | 用戶設(shè)置input是否只讀，或者可讀可寫 |
E:not() 用于匹配除not()中選擇的元素外的所有元素
<!DOCTYPE html> <html><head><style>p:not(.p3){background-color: gray;}</style> </head><body><p>p1</p><p>p2</p><p class="p3">p3</p> </body> </html>E:target用來匹配錨點(diǎn)#指向的文檔中的具體元素，即URL后面跟錨點(diǎn)#，指向文檔內(nèi)某個(gè)具體的元素，那么該元素就會觸發(fā)target
<!DOCTYPE html> <html><head><style>div{width:100px;height:100px;background-color: gray;}#box1:target{background-color: red;}#box2:target{background-color: red;}</style> </head><body><a href="#box1">box1</a><a href="#box2">box2</a><div id="box1">box1</div><br> <div id="box2">box2</div></body> </html>E:first-child表示選擇父元素下的第一個(gè)子元素，E:last-child表示選擇父元素 下最后一個(gè)子元素
<!DOCTYPE html> <html><head><style>.div1 p:first-child{background-color: gray;}</style> </head> <body><div class="div1"> <p>p1</p> <p>p2</p> </div> </body> </html> <!DOCTYPE html> <html><head><style>.div1 p:last-child{background-color: gray;}</style> </head> <body><div class="div1"> <p>p1</p> <p>p2</p> </div> </body> </html>E:nth-child(n)表示選擇父元素下的第n個(gè)子元素，注意在CSS中n從1開始，且n可以是表達(dá)式。E:nth-last-child(n)表示從父元素最后一個(gè)元素開始計(jì)數(shù)，反向選擇
<!DOCTYPE html> <html><head><style>li:nth-child(2n){background-color: gray;}span:nth-child(odd){background-color: gray;}p:nth-child(2){background-color: gray;}</style> </head> <body> <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul> <div><span>span1</span><span>span2</span><span>span3</span><span>span4</span> <span>span5</span><span>span6</span></div> <div><p>p1</p><p>p2</p><p>p3</p></div> </body> </html>
注意：odd翻譯為中文是奇數(shù)的，even翻譯為中文是偶數(shù)的
等價(jià)于
li:nth-child(even){background-color: gray;}E:only-child表示如果父元素下僅有一個(gè)元素，那么該元素被選中
<!DOCTYPE html> <html><head><style>p:only-child{background-color: gray;}li:only-child{background-color: gray;}</style> </head> <body> <div><p>p1</p></div> <ul><li>li1</li><li>li2</li></ul> </body> </html>E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-of-last-type(n),只考慮樣式中定義的子元素類型，不會受到其他元素的影響
<!DOCTYPE html> <html><head><style>li:first-of-type{background-color: gray;}span:first-child{background-color: gray;}</style> </head> <body> <ul><p></p><li>1</li><li>2</li><li>3</li></ul> <div> <p>p2</p><span>span1</span><span>span2</span><span>span3</span> </div> </div> </body> </html>E:empty表示選擇沒有任何子元素的父元素
<!DOCTYPE html> <html><head><style>div{border: black 1px solid;width: 100px; height: 100px;}.box:empty{background-color:gray;}</style> </head> <body> <div class="box"></div> <div class="box"> </div> </body> </html>注意點(diǎn)：
box是個(gè)類，前面有一個(gè)小圓點(diǎn)
E:checked匹配用戶界面上處于選中狀態(tài)的元素E，該選擇器主要用于檢測表單中單選框或者復(fù)選框是否為選中狀態(tài)
<!DOCTYPE html> <html><head><style>input:checked+span::after{content:"這個(gè)愛好不錯(cuò)哦";}</style> </head> <body><h1>愛好</h1> 游泳:<input type="checkbox"><span></span> <br>登山：<input type="checkbox"><span></span> </body> </html>CSS3新增盒子屬性
圓角邊框?qū)傩詁order-radius
<!DOCTYPE html> <html><head><style>#rcorner{border-radius: 25px;border: 2px solid #333333;padding: 20px;width: 200px;height: 150px;}</style> </head> <body> <p id="rcorner">圓角</p></body> </html>注意
當(dāng)僅設(shè)置一個(gè)屬性值時(shí)，邊框的四個(gè)角具有相同的大小，如果希望單獨(dú)設(shè)置四個(gè)角的圓角效果，可以使用border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius屬性設(shè)置圓角值
設(shè)置不同個(gè)數(shù)的屬性值
四個(gè)值：第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角
三個(gè)值：第一個(gè)值為左上角，第二個(gè)值為右上角和左下角，第三個(gè)值為右下角
兩個(gè)值：第一個(gè)值為左上角與右下角，第二個(gè)值為右上角和左下角
一個(gè)值：四個(gè)圓角值相同
設(shè)置橢圓邊框效果
第一個(gè)數(shù)值表示水平半徑，第二個(gè)數(shù)值表示垂直半徑
<!DOCTYPE html> <html><head><style>#rcorner{border-radius: 50px/15px;border: 2px solid #333333;padding: 20px;width: 200px;height: 150px;}</style> </head> <body> <p id="rcorner">橢圓邊框 border-radius:50px/15px</p></body> </html> <!DOCTYPE html> <html><head><style>#rcorner{border-radius: 50%;border: 2px solid #333333;padding: 20px;width: 200px;height: 150px;}</style> </head> <body> <p id="rcorner">橢圓邊框 border-radius:50%</p></body> </html>圖片的圓角效果：
<!DOCTYPE html> <html><head><style>img{margin:10px;width: 200px;height: 150px;display: inline-block;}#rcorner1{border-radius: 10px;}#rcorner2{border-radius: 50%;}</style> </head> <body> <img id="rcorner1" src="01.jpg">border-radius: 10px</img> <img id="rcorner2" src="01.jpg">border-radius: 50%</img> </body> </html>邊框圖片屬性
CSS3中提供了border-image屬性，該屬性使用了圖像填充盒子的邊框
border-image:url(border.png) 30% 35% 40% 30% repeat第一個(gè)參數(shù)是border-image-source,表示背景圖像的url地址；
第二個(gè)參數(shù)是border-image-slice,表示圖片剪裁位置；
表示距離圖片上部30%，距離右邊35%，距離底部40%，左邊30%的地方各裁剪一下，形成了9個(gè)分離的區(qū)域（圖片裁剪九宮格）
border-image:url(border.png) 27 repeat（這里的27指27個(gè)像素 ）
第三個(gè)參數(shù)是border-image-repeat.即邊框圖片的重復(fù)性，可取值repeat（重復(fù)），round（平鋪），Stretch（拉伸），其中Stretch是默認(rèn)值
border-image:url(border.png) 27 border-image:url(border.png) 27 repeat border-image:url(border.png) 27 round repeat拉伸示意圖：
平鋪示意圖：
盒子陰影屬性
box-shadow屬性用來定義盒子陰影效果
box-shadow：offset-x ，offset-y，blur，spread，color，inset
| offset-x | 必填項(xiàng)，表示水平陰影的位置，它是相對于x軸的偏移量，取值正負(fù)均可，如果是負(fù)值則陰影位于元素左邊 |
| offset-y | 同樣是必填項(xiàng)，表示垂直陰影的位置，它是相對于y軸的偏移量，取值正負(fù)均可，如果是負(fù)值則陰影位于元素上面 |
| blur | 選填項(xiàng)，表示陰影模糊半徑，只能取正值，0位無模糊效果，值越大模糊面積越大，陰影邊緣越模糊 |
| spread | 選填項(xiàng)，表示陰影大小，取值正負(fù)均可，取正值時(shí)，陰影擴(kuò)大，取負(fù)值時(shí)，陰影收縮，默認(rèn)值為0，此時(shí)陰影與元素同樣大 |
| color | 選填項(xiàng)，表示陰影顏色 |
| inset | 選填項(xiàng)，用于將外部投影（默認(rèn) outset）改為內(nèi)部投影，inset陰影在背景之上內(nèi)容之下，注意inset可以寫在參數(shù)的第一個(gè)或最后一個(gè)，其它位置是無效的 |
紙質(zhì)樣式卡片效果
<!DOCTYPE html> <html><head><style>div.card{width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;}div.header{background-color: #4CAF50;color: white;padding: 10px;font-size: 40px;}div.container{padding: 10px;}</style> </head> <body> <p>box-shadow 屬性用來可以創(chuàng)建紙質(zhì)樣式卡片</p> <div class="card"><div class="header"><h1>1</h1></div><div class="container"><p>January 1,2019</p></div> </div> </body> </html>圖片卡片陰影效果
<!DOCTYPE html> <html><head><style>div.polaroid{width: 250px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);text-align: center;}div.container{padding: 10px;}</style> </head> <body> <p>box-shadow 屬性用來可以創(chuàng)建卡片樣式：</p> <div class="polaroid"><img src="01.jpg" alt="desert" style="width: 100%"><div class="container"><p>二次元</p></div> </div> </body> </html>盒子背景屬性
backgroud-image屬性，將多張圖片同時(shí)設(shè)置為背景，不同背景圖片用逗號隔開
<!DOCTYPE html> <html><head><style>#example1{background-image:url(01.jpg),url(02.jpg);background-position: right bottom,left top;background-repeat: no-repeat,repeat;padding: 15px;}</style> </head> <body> <div id="example1"><h1>背景圖片示例</h1><p>在CSS3中，我們既可以在背景中設(shè)置多張圖片，也可以指定每一張背景圖片的大小和位置，另外還可以設(shè)置漸變效果作為背景圖像。</p> </div> </body> </html>background-size 指定背景圖像的大小，
CSS3以前，背景圖像大小是由圖像的實(shí)際大小決定。
background-size：auto | <長度值> | <百分比> | cover | contain
auto，默認(rèn)值，不改變背景圖片的原始高度和寬度
<長度值>，成對出現(xiàn)，例如80px，60px
<百分比>，例如100% 100%
Cover，覆蓋，背景圖片等比縮放以填滿整個(gè)容器
Contain，容納，背景圖片等比縮放至某一邊緊貼容器邊緣
background-origin屬性指定了背景圖像的起始區(qū)域
background-origin：border-box|padding-box|content-box當(dāng)background-attachment屬性設(shè)置為fixed時(shí)，background-origin屬性會失效
<!DOCTYPE html> <html><head><style>div{border: 1px solid black;padding:35px;background-image:url('02.jpg');background-repeat:no-repeat;background-position:left;}#div1{background-origin:border-box;}#div2{background-origin:content-box;}</style> </head> <body><p>border-box 作為背景圖像的起始區(qū)域：</p><div id="div1">背景圖像的坐標(biāo)原點(diǎn)設(shè)置在盒模型border-box區(qū)域的左上角</div> <p>content-box作為背景圖像的起始區(qū)域：</p> <div id="div2">背景圖像的坐標(biāo)原點(diǎn)設(shè)置在盒模型border-box區(qū)域的左上角</div></body> </html>CSS3漸變屬性
漸變效果提供了在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡。
CSS3定義了三種類型的漸變：一種是線性漸變（Linear Gradients），根據(jù)漸變方向的不同，又分為向下，向上，向左，向右，對角等不同方向的線性漸變；第二種漸變是徑向漸變（Radial Gradients），由具有不同半徑的圓的重心進(jìn)行定義；第三種類型為重復(fù)漸變，是由單個(gè)漸變重復(fù)而成。
由于不同瀏覽器產(chǎn)商在實(shí)現(xiàn)漸變標(biāo)準(zhǔn)時(shí)，對于漸變方向的定義，角度的定義以及順時(shí)針還是逆時(shí)針有所不同，所以在使用漸變時(shí)需要添加瀏覽器前綴。例如，對于Chrome，Safari瀏覽器，前綴為-webkit-，而火狐瀏覽器Firefox的前綴為-moz-，Opera瀏覽器的前綴為-o-
/*Safari*/background:-webkit-linear-gradient(red,blue) ;/*Opera*/background:-o-linear-gradient(red,blue) ;/*Firefox或者Chrome*/background:-moz-linear-gradient(red,blue) ;/*標(biāo)準(zhǔn)的語法，放在最后*/background:linear-gradient(red,blue) ;線性漸變
background：linear-gradient（direction，color-stop1，color-stop2，……）這里的direction默認(rèn)是從上往下
<!DOCTYPE html> <html><head><style>#grad1{/*標(biāo)準(zhǔn)的語法，放在最后*/background:linear-gradient(red,blue) ;width: 300px;height: 200px;}</style> </head> <body><div id="grad1"></div></body> </html>指定線性漸變的方向（左右，對角線）
左右:
#grad2{background:-webkit-linear-gradient(left,red,blue);background:-o-linear-gradient(right,red,blue);background:-moz-linear-gradient(right,red,blue);background:linear-gradient(to right,red,blue);} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(to right,red,blue) ;width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>對角線:
#grad3{background:-webkit-linear-gradient(left top,red,blue);background:-o-linear-gradient(bottom right,red,blue);background:-moz-linear-gradient(bottom right,red,blue);background:linear-gradient(to bottom right,red,blue);} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(to bottom right,red,blue) ;width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>指定線性漸變的方向（指定角度）
標(biāo)準(zhǔn)語法圖：
多個(gè)顏色過渡節(jié)點(diǎn)的線性漸變
#grad5{height: 200px;background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);background:-o-linear-gradient(right,red,orange,yellow,green,blue,indigo,violet);background:-moz-linear-gradient(right,red,orange,yellow,green,blue,indigo,violet);background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>精確控制顏色過渡位置
#grad6{width: 200px; height: 200px;background:-webkit-linear-gradient(90deg,#f0f 0px,#0ff 50px,#fff 100px);background:-o-linear-gradient(0deg,#f0f 0px,#0ff 50px,#fff 100px);background:-moz-linear-gradient(90deg,#f0f 0px,#0ff 50px,#fff 100px);background:linear-gradient(0deg,#f0f 0px,#0ff 50px,#fff 100px);} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(0deg,#f0f 0px,#0ff 50px,#fff 100px);width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>帶透明度顏色過渡的線性漸變
#grad6{width: 200px; height: 200px;background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));background:-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));background:-moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));} <!DOCTYPE html> <html><head><style>#grad1{background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>重復(fù)線性漸變（repeating-linear-gradient）
舉例：
background:repeating-linear-gradient(black,gray 10%,white 15%);黑色漸變到灰色從高度的0%至10%，灰色漸變到白色從高度的10%至15%,然后重復(fù)這一漸變
徑向漸變
徑向漸變：
background:radial-gradient(shape [size] at position,start-color,………………,last-color);顏色節(jié)點(diǎn)均勻分布的徑向漸變
#grad7{width: 200px; height: 200px;background:-webkit-radial-gradient(red,yellow,green);background:-o-radial-gradient(red,yellow,green);background:-moz-radial-gradient(red,yellow,green);background:radial-gradient(red,yellow,green);} <!DOCTYPE html> <html><head><style>#grad1{background:radial-gradient(red,yellow,green);width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>顏色節(jié)點(diǎn)不均勻分布的徑向漸變
#grad1{background:radial-gradient(red 5%,yellow 15% ,green 60%);width: 200px;height: 200px; <!DOCTYPE html> <html><head><style>#grad1{background:radial-gradient(red 5%,yellow 15% ,green 60%);width: 200px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>重復(fù)徑向漸變
重復(fù)徑向漸變用于創(chuàng)建重復(fù)的徑向漸變圖像：
background:repeating-radial-gradient(black,white 10%,gray 15%); <!DOCTYPE html> <html><head><style>#grad1{background:repeating-radial-gradient(black,white 10%,gray 15%);width: 600px;height: 150px;}</style> </head> <body> <div id="grad1"></div> </body> </html> <!DOCTYPE html> <html><head><style>#grad1{background:repeating-radial-gradient(red ,yellow 10% ,green 15%);width: 300px;height: 200px;}</style> </head> <body> <div id="grad1"></div> </body> </html>CSS3字體與文本屬性
字體簡介
使用@font-face加載特定的字符，@font-face語句是CSS中的一個(gè)功能模塊，是為了解決由于瀏覽者系統(tǒng)中沒有安裝字體導(dǎo)致不能顯示的問題，用于實(shí)現(xiàn)網(wǎng)頁字體多樣性
@font-face{font-family:'FZCYS';src:local('FZYaSongA-B-GB');src: url('YourWebFontName.eot');}div{font-family:FZCYS;}font-family的作用是聲明字體變量；src屬性定義字體的下載地址，local表示本機(jī)地址，url表示網(wǎng)址，當(dāng)網(wǎng)頁加載時(shí)會自動從服務(wù)器上下載字體文件再顯示出來
文本陰影
文本陰影
text-shadow:h-shadow v-shadow blur colorh-shadow水平陰影，v-shadow垂直陰影，它們?yōu)楸靥铐?xiàng)，允許為負(fù)值；blur為選填項(xiàng)，表示模糊的距離；color為選填項(xiàng)，表示陰影顏色
<!DOCTYPE html> <html><head><style>h1{text-shadow: 2px 2px 8px #333;}</style> </head> <body> <h1>text-shadow with blur effect</h1> </body> </html>文本溢出處理
text-overflow指定應(yīng)向用戶如何顯示溢出內(nèi)容
text-overflow:clip|ellipsis|stringclip:裁剪 ellipsis：省略號
<!DOCTYPE html> <html><head><style>#div1{width: 200px;background-color:#87CEEB;overflow: hidden;white-space: nowrap;/*文本不自動換行*/text-overflow: ellipsis;}#div2{width: 200px;background-color:bisque;overflow: hidden;white-space: nowrap;/*文本不自動換行*/text-overflow: clip;}</style> </head> <body> <div id="div1">This is some long text text-overflow</div><br> <div id="div2">This is some long text text-overflow</div></body> </html>注意：
text-overflow和overflow必須結(jié)合起來使用
CSS3 2D/3D變換
平移變換
translate（x，y）方法，從當(dāng)前元素位置沿X軸和Y軸移動相應(yīng)的位移量
transform:translateX(x) transform:translateX(y) transform:translate(100px,30px);-ms-transform:translate(100px,30px);/*IE 9*/-webkit-transform:translate(100px,30px);/*Safari and Chrome*/ <!DOCTYPE html> <html><head><style>#div1{width: 150px;height: 75px;border:1px dashed silver;}#div2{width: 150px;height: 75px;background-color:#eee;transform:translate(100px,30px);}</style> </head> <body> <div id="div1">原始div</div> <div id="div2">平移后的div</div> </body> </html> <!DOCTYPE html> <html><head><style>#div1{width: 150px;height: 75px;border:1px dashed silver;}#div2{width: 150px;height: 75px;background-color:#eee;transform:translate(100px,30px);}</style> </head> <body> <div id="div1">原始div <div id="div2">平移后的div</div> </div></body> </html>
注意：
div需要嵌套
旋轉(zhuǎn)變換
rotate（angle）將元素對象相對中心原點(diǎn)進(jìn)行旋轉(zhuǎn)，度數(shù)為正值為順時(shí)針旋轉(zhuǎn)，負(fù)值為逆時(shí)針旋轉(zhuǎn)
-ms-transform:rotate(45deg);/*IE 9*/-webkit-transform:rotate(45deg);/*Safari and Chrome*/transform:rotate(45deg);/*標(biāo)準(zhǔn)語法*/ <!DOCTYPE html> <html><head><style>#div1{margin: 50px;width: 150px;height: 75px;border:1px dashed silver;}#div2{width: 150px;height: 75px;background-color:#eee;transform:rotate(45deg);/*標(biāo)準(zhǔn)語法*/}</style> </head> <body> <div id="div1">原始div <div id="div2">旋轉(zhuǎn)后的div</div></div></body> </html>
默認(rèn)是圍繞元素的中心店旋轉(zhuǎn)，也可以使用 tranform-origin屬性設(shè)置旋轉(zhuǎn)中心點(diǎn)，例如tranform-origin：0 0，使元素的旋轉(zhuǎn)中心為左上角
縮放變換
scale(x,y)，scaleX(x)，scaleY(y)方法，將元素根據(jù)中心原點(diǎn)進(jìn)行縮放，參數(shù)可以是正數(shù)，負(fù)數(shù)或小數(shù)，默認(rèn)值為1，取正數(shù)表示方法相應(yīng)的倍數(shù)，取小于1的小數(shù)值表示縮小相應(yīng)的倍數(shù)，取負(fù)數(shù)值不會縮小元素，而是翻轉(zhuǎn)元素。
-ms-transform:scale(2,1.5);/*IE 9*/-webkit-transform: scale(2,1.5);/*Safari*/transform:scale(2,1.5);/*標(biāo)準(zhǔn)語法*/ <!DOCTYPE html> <html><head><style>#div1{width: 150px;height: 75px;border:1px dashed silver;}#div2{margin: 100px;width: 100px;height: 75px;background-color:#eee;transform:scale(2,1.5);/*標(biāo)準(zhǔn)語法*/}</style> </head> <body> <div id="div1">原始div <div id="div2">縮放后的div</div></div></body> </html>
默認(rèn)是按照中心原點(diǎn)來進(jìn)行縮放（和旋轉(zhuǎn)一樣）
改變縮放的默認(rèn)點(diǎn)：
transform-origin: 0 0; <!DOCTYPE html> <html><head><style>#div1{margin: 100px;width: 150px;height: 75px;border:1px dashed silver;}#div2{width: 100px;height: 75px;background-color:#eee;transform-origin: 0 0;transform:scale(2,1.5);/*標(biāo)準(zhǔn)語法*/}</style> </head> <body> <div id="div1">原始div <div id="div2">縮放后的div</div></div></body> </html>傾斜變換
skew(angle[,angle])（第一個(gè)是x方向傾斜的角度，第二個(gè)是y方向傾斜的角度）實(shí)現(xiàn)元素對象的傾斜顯示。參數(shù)值表示元素在X軸和Y軸方向上傾斜的角度，如果第二個(gè)參數(shù)為空，則默認(rèn)為0；參數(shù)取正值，表示元素沿水平或垂直方向，按順時(shí)針傾斜，否則如果取負(fù)值，表示元素按逆時(shí)針方向傾斜
<!DOCTYPE html> <html><head><style>#div1{margin: 100px;width: 200px;height: 100px;border:1px dashed silver;}#div2{width: 200px;height: 100px;background-color:#eee;transform:skewX(30deg);/*標(biāo)準(zhǔn)語法*/}</style> </head> <body> <div id="div1">原始div<div id="div2">傾斜后的div</div> </div></body> </html> transform:skewX(0deg);/*標(biāo)準(zhǔn)語法*/存在傾斜偏差錯(cuò)位的原因呢，完全是因?yàn)樽值拇嬖?#xff1a;
<!DOCTYPE html> <html><head><style>#div1{margin: 100px;width: 200px;height: 100px;border:1px dashed silver;}#div2{width: 200px;height: 100px;background-color:#eee;transform:skewX(30deg);/*標(biāo)準(zhǔn)語法*/}</style> </head> <body> <div id="div1"><div id="div2"></div> </div></body> </html> transform:skewX(0deg);/*標(biāo)準(zhǔn)語法*/透視變換（開啟3D）
perspective屬性：定義元素舉例視點(diǎn)（人眼）的距離，當(dāng)元素設(shè)置該屬性，其子元素會獲得透視效果，而不是元素本身
黑色實(shí)心點(diǎn)是觀察點(diǎn)，即視點(diǎn)，視點(diǎn)到投影平面的距離稱為視距。
translate3d(x,y,z)，translateZ(z)實(shí)現(xiàn)元素在三位空間的平移變換
<!DOCTYPE html> <html><head><style>#div1{width: 500px;height: 300px;border:1px solid black;perspective: 600px;}#div2{margin: 100px 0 0 100px;width: 200px;height: 100px;background-image:url(02.jpg);background-size: cover;transform:translateZ(0px);}</style> </head> <body> <div id="div1"><div id="div2"></div> </div></body> </html>
按出F12后，然后按鍵盤↑或↓對translateZ(0px)進(jìn)行數(shù)據(jù)內(nèi)容的增減
然后就可以對透視變換的一種很直觀的展現(xiàn)。
近一步觀察
transform:rotateY(0deg) translateZ(0px);
分別對rotateY和translateZ進(jìn)行數(shù)據(jù)內(nèi)容的改變，這樣會對透視變換有更加深刻的體會
變換應(yīng)用案例
<!DOCTYPE html> <html><head><style>div{width: 294px;padding:10px 10px 20px 10px ;border:1px solid #BFBFBF;background-color:white ;box-shadow: 2px 2px 3px #aaa;}div.rotate_left{float: left;transform: rotate(7deg);}div.rotate_right{float: left;transform: rotate(-8deg);}</style> </head> <body> <div class="rotate_left"><img src="01.jpg" width="284" height="213" ><p>二刺螈</p> </div> <div class="rotate_right"><img src="02.jpg" width="284" height="213" ><p>二次元</p> </div> </body> </html>CSS3過渡與動畫效果
過渡
過渡transition是元素從一種樣式主鍵改變位另一種的效果
transition: width 2s; -webkit-transition:width 2s; transition:property duration timing-function delay| linear | 動畫從頭到尾的速度是相同的 |
| ease | 默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢 |
| ease-in | 動畫以低速開始 |
| ease-out | 動畫以低速結(jié)束 |
| ease-in-out | 動畫以低速開始和結(jié)束 |
| cubic-bezier(n,n,n,n) | 在cubic-bezier函數(shù)中自己的值。可能的值是從0到1的數(shù)值 |
動畫效果
動畫和過渡一樣，是使元素從一種樣式變化為另一種樣式的效果。
CSS3中使用@keyframes規(guī)則創(chuàng)建動畫
圖片過濾效果
filter屬性為元素添加可視效果（例如：模糊和飽和度）
<!DOCTYPE html> <html><head><style>img{width: 20%;height: auto;float: left;}.blur{filter: blur(4px);}.brightness{filter: brightness(150%);}.contrast{filter: contrast(150%);}.grayscale{filter: grayscale(100%);}.huerotate{filter: hue-rotate(180deg);}.invert{filter: invert(100%);}.opacity{filter: opacity(90%);}.saturate{filter: saturate(5);}.sepia{filter: sepia(100%);}.shadow{filter: drop-shadow(5px 5px 5px gray);}</style> </head> <body> <img src="02.jpg"> <img class="blur" src="02.jpg"> <img class="brightness" src="02.jpg"> <img class="contrast" src="02.jpg"> <img class="grayscale" src="02.jpg"> <img class="huerotate" src="02.jpg"> <img class="invert" src="02.jpg"> <img class="opacity" src="02.jpg"> <img class="saturate" src="02.jpg"> <img class="sepia" src="02.jpg"> <img class="shadow" src="02.jpg"> </body> </html>
CSS3應(yīng)用案例
水平導(dǎo)航條
<!DOCTYPE html> <html><head><style>ul{list-style-type:none;margin: 0;padding: 0;overflow: hidden;}a:link,a:visited{display: block;font-weight: bold;color: #FFFFFF;background-color: #98bf21;width:120px;text-align: center;padding:4px;text-decoration: none;text-transform: uppercase;}a:hover,a:active{background-color:#7A991A;}li.fl{float: left;}</style> </head> <body> <p>垂直導(dǎo)航條</p> <ul><li><a href="#">Home</a></li><li><a href="#">News</a></li><li><a href="#">Contact</a></li><li><a href="#">About</a></li> </ul> <p>水平導(dǎo)航條</p> <ul><li class="fl"><a href="#">Home</a></li><li class="fl"><a href="#">News</a></li><li class="fl"><a href="#">Contact</a></li><li class="fl"><a href="#">About</a></li> </body> </html>下拉菜單
<!DOCTYPE html> <html><head><style>ul{list-style-type:none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li{float: left;}li a, .dropbtn{display: inline-block;/*即具有行內(nèi)元素的特點(diǎn)，又具有塊級元素可調(diào)節(jié)*/color: white;text-align: center;padding:14px 16px;text-decoration:none;}li a.active{background-color: #98bf21;}li a:hover,.dropdown:hover .dropbtn{background-color: #111;}.dropdown{display: inline-block;}.dropdown-content{display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}.dropdown-content a{color: red;padding: 12px 16px;text-decoration:none;display: block;}.dropdown-content a:hover{background-color: #333;}.dropdown:hover .dropdown-content{display: block;}</style> </head> <body> <ul><li><a class="active" href="#">主頁</a></li><li><a href="#">新聞</a></li><div class="dropdown"><a href="#" class="dropbtn">下拉菜單</a><div class="dropdown-content"><a href="#">鏈接1</a><a href="#">鏈接2</a><a href="#">鏈接3</a></div></div></ul> </body> </html>
響應(yīng)式圖片與媒體查詢
響應(yīng)式圖片
媒體查詢
- 媒體查詢@media可用于檢測viewport（視窗）的寬度與高度，設(shè)備的寬度與高度，朝向（智能手機(jī)橫屏，豎屏），分辨率等
- 媒體查詢由多種媒體組成，可以包含一個(gè)或多個(gè)表達(dá)式，表達(dá)式根據(jù)條件是否成立返回true或false
基本語法：
@media not|only mediatype and(expressions){CSS代碼……;}例子：
@media screen and(min-width:480px){body{background-color:lightgreen;}}在屏幕可是窗口尺寸大于480像素的設(shè)備上修改背景顏色
<!DOCTYPE html> <html><head><style>div.img{border: 1px solid #ccc;}div.img:hover{border:1px solid #777}div.img img{width: 100%;height:auto;}div.desc{padding: 15px;text-align: center;}* {box-sizing: border-box;}.responsive{padding:0 6px;float: left;width: 24.9%;}@media screen and (max-width:700px) {.responsive{width: 49.9%;margin: 6px 0;}}@media screen and (max-width:500px) {.responsive{width: 100%;}}</style> </head> <body> <div class="responsive"><div class="img"><img src="02.jpg"><div class="desc">二刺螈</div></div> </div><div class="responsive"><div class="img"><img src="01.jpg"><div class="desc">二次元</div></div> </div><div class="responsive"><div class="img"><img src="03.jpg"><div class="desc">二刺猿</div></div> </div><div class="responsive"><div class="img"><img src="04.jpg"><div class="desc">二刺螈</div></div> </div> </body> </html>
注意：
這里所用到的圖片需要同樣大小，否則沒用。。。。
關(guān)鍵幀同樣大小，動畫
<!DOCTYPE html> <html><head><style>@keyframes run{from {left:0px;}to {left: -2400px;}}.wra{position: relative;width: 200px;height: 100px;overflow: hidden;}.box{position:absolute;left: 0;top:0 ;width:2400px;height:100px;background-image: url(horse.png);animation:run 1s steps(12, end) infinite;}</style> </head> <body> <div class="wra"><div class="box"></div> </div> </body> </html>
注意：
animation:run 1s steps(12, end) infinite;這里是steps而不是step
steps（）是一個(gè)timing function，允許將動畫或者過渡分割成段，而不是從一種狀態(tài)持續(xù)到另一種狀態(tài)
steps（<number_of_steps>,<direction>）第一個(gè)參數(shù)是一個(gè)正值，指定動畫分割的段數(shù)。第二個(gè)參數(shù)可選，接收start和end兩個(gè)值，指定在每個(gè)間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化，默認(rèn)為end。start第一幀是動畫結(jié)束的時(shí)候狀態(tài)；end第一幀是動畫開始的時(shí)候狀態(tài)
旋轉(zhuǎn)照片墻
<!DOCTYPE html> <html><head><style>* {padding: 0;margin: 0;}@keyframes run{from{transform:rotateY(0deg);}to{transform: rotateY(360deg);}}:root,body{height: 100%;perspective: 1000px;}.wra{position:absolute;width:200px;height:100px;left: calc(50% - 100px);top: calc(50% - 50px);transform-style:preserve-3d;animation:run 30s linear infinite;}.img{position:absolute;width:200px;height:100px;}.img:nth-last-of-type(1){background-image: url(01.jpg);background-size: cover;transform: translateZ(350px);}.img:nth-last-of-type(2){background-image: url(02.jpg);background-size: cover;transform: rotateY(45deg) translateZ(350px);}.img:nth-last-of-type(3){background-image: url(03.jpg);background-size: cover;transform: rotateY(90deg) translateZ(350px);}.img:nth-last-of-type(4){background-image: url(04.jpg);background-size: cover;transform:rotateY(135deg) translateZ(350px);}.img:nth-last-of-type(5){background-image: url(05.jpg);background-size: cover;transform:rotateY(180deg) translateZ(350px);}.img:nth-last-of-type(6){background-image: url(06.jpg);background-size: cover;transform:rotateY(225deg) translateZ(350px);}.img:nth-last-of-type(7){background-image: url(07.jpg);background-size: cover;transform:rotateY(270deg) translateZ(350px);}.img:nth-last-of-type(8){background-image: url(08.jpg);background-size: cover;transform:rotateY(315deg) translateZ(350px);}</style> </head> <body> <div class="wra"><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div> </div> </body> </html>
注意
left: calc(50% - 100px); top: calc(50% - 50px);這里是居中圖片，- 號左右都需要有空格，否則位置無效
總結(jié)
以上是生活随笔為你收集整理的CSS层叠样式表进阶的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： matlab入门操作
- 下一篇： JavaScript与DOM编程