如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
前言：css3的出现使得我们可以通过前端技术，让网页内容变得更丰富，更华丽。今天来玩玩好玩的颜色渐变。
一、背景颜色渐变。
-
<body>
-
<style>
-
.content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;
-
background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);
-
}
-
</style>
-
<div class="content">浅色夏沫，夏末微凉</div>
-
</body>
运行效果
二、文字颜色渐变。
-
<body>
-
<style>
-
.content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;
-
background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);
-
-webkit-background-clip:text; -webkit-text-fill-color:transparent; }
-
</style>
-
<div class="content">浅色夏沫，夏末微凉</div>
-
</body>
运行效果
三、边框颜色渐变。
-
<body>
-
<style>
-
.content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;
-
border:10px solid;
-
border-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%) 10; }
-
</style>
-
<div class="content">浅色夏沫，夏末微凉</div>
-
</body>
运行效果
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
