老色批在线播放视频网站免费-老色批影院-老色鬼福利 A级黄色片视在线播放_日韩欧美永久中文字幕视频_2

【css】背景顏色漸變，文字顏色漸變，邊框顏色漸變

2018-5-17    seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

前言：css3的出現(xiàn)使得我們可以通過前端技術(shù)，讓網(wǎng)頁內(nèi)容變得更豐富，更華麗。今天來玩玩好玩的顏色漸變。

一、背景顏色漸變。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
  4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
  5. }  
  6. </style>  
  7. <div class="content">淺色夏沫，夏末微涼</div>  
  8. </body>  

運行效果


二、文字顏色漸變。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
  4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
  5. -webkit-background-clip:text; -webkit-text-fill-color:transparent; }  
  6. </style>  
  7. <div class="content">淺色夏沫，夏末微涼</div>  
  8. </body>  

運行效果


三、邊框顏色漸變。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;   
  4. border:10px solid;  
  5. border-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%) 10; }  
  6. </style>  
  7. <div class="content">淺色夏沫，夏末微涼</div>  
  8. </body>   

運行效果

藍藍設計( www.longkoushi.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://www.longkoushi.net

存檔