【css】背景颜色渐变,文字颜色渐变,边框颜色渐变

2018-5-17    seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

前言:css3的出现使得我们可以通过前端技术,让网页内容变得更丰富,更华丽。今天来玩玩好玩的颜色渐变。

一、背景颜色渐变。

[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.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档