您好,登錄后才能下訂單哦!
這篇文章主要介紹css3如何實(shí)現(xiàn)陰影、倒影、漸變效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
一、效果
做:
二、先是建立兩個(gè)文本不做處理運(yùn)行如圖
三、給第一個(gè)div字體加上陰影
text-shadow: 5px 5px 10px red;
text-shadow: 5px 5px 5px red,5px -5px 10px yellow;
box-shadow:用法與text-shadow類(lèi)似,只不過(guò)它是對(duì)盒子,比如DIV
text-shadow:[顏色(Color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)],[顏色(color) x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur)]...前兩個(gè)值可以是負(fù)數(shù),第三個(gè)不能使負(fù)數(shù),可以是0(無(wú)效果)
四、給第一個(gè)div加上倒影
-webkit-box-reflect:below 10px ;
方向 (above上 below下 左右left right) 間距。
注意:倒影不占文檔流的空間,層級(jí)高于文檔流倒影是針對(duì)標(biāo)簽(寬高)進(jìn)行的
五、加上漸變
background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );
第一個(gè)百分?jǐn)?shù)是從0%到這個(gè)百分?jǐn)?shù)全是這種顏色,最后一個(gè)百分比是從這個(gè)百分?jǐn)?shù)到100%全是這種顏色,中間如果不同百分?jǐn)?shù)就是漸變,一樣就是分界線。
六、所有代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3</title> <style type="text/css"> div{ font-size: 30px; width: 300px; height: 100px; background-image: -webkit-linear-gradient(left, red 0%, yellow 50% ); /*漸變*/ color: blue; -webkit-box-reflect:below 10px ; /*倒影*/ text-shadow: 5px 5px 10px red; /*陰影*/ } span{ background: aqua; } </style> </head> <body> <div> <p>我會(huì)翻跟斗!!哈哈哈</p> </div> <span> 倒影不能把握的位置給占了!倒影不能把握的位置給占了! 倒影不能把握的位置給占了!倒影不能把握的位置給占了! </span> </body> </html>
以上是“css3如何實(shí)現(xiàn)陰影、倒影、漸變效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。