亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

5分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)

  發(fā)布時(shí)間：2016-08-15 11:43:33   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇5分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

做：

二、先是建立兩個(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ù)就是漸變,一樣就是分界線(xiàn)。

六、所有代碼：  

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>    
  2. <html>    
  3.     <head>    
  4.         <meta charset="UTF-8">    
  5.         <title>CSS3</title>    
  6.         <style type="text/css">    
  7.             div{    
  8.                 font-size: 30px;    
  9.                 width: 300px;    
  10.                 height: 100px;    
  11.                 background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );    
  12.                 /*漸變*/    
  13.                 color: blue;    
  14.                 -webkit-box-reflect:below 10px ;    
  15.                 /*倒影*/    
  16.                 text-shadow: 5px 5px 10px red;    
  17.                 /*陰影*/    
  18.             }    
  19.             span{    
  20.                 background: aqua;    
  21.             }    
  22.                  
  23. </style>    
  24.     </head>    
  25.     <body>    
  26.         <div>    
  27.             <p>我會(huì)翻跟斗！！哈哈哈</p>    
  28.         </div>    
  29.         <span>    
  30.             倒影不能把握的位置給占了！倒影不能把握的位置給占了！    
  31.             倒影不能把握的位置給占了！倒影不能把握的位置給占了！    
  32.         </span>    
  33.     </body>    
  34. </html>  

以上這篇5分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論