如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
前言：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>
運行效果
藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
