伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

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

2018-5-17    seo達(dá)人

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

前言：css3的出現(xiàn)使得我們可以通過(guò)前端技術(shù)，讓網(wǎng)頁(yè)內(nèi)容變得更豐富，更華麗。今天來(lá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>  

運(yùn)行效果


二、文字顏色漸變。

[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>  

運(yùn)行效果


三、邊框顏色漸變。

[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>   

運(yùn)行效果

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔

香河县| 连城县| 桓仁| 土默特左旗| 清原| 福建省| 临沂市| 屏东市| 浦北县| 台南县| 西吉县| 龙山县| 元谋县| 太和县| 兴安盟| 松桃| 万宁市| 金川县| 绵阳市| 晋江市| 板桥市| 晴隆县| 黄山市| 视频| 理塘县| 二连浩特市| 镇康县| 阿拉善右旗| 建阳市| 扶余县| 六枝特区| 东港市| 原阳县| 福贡县| 常宁市| 盐亭县| 霍城县| 太仓市| 东海县| 栾川县| 凌云县|