漸層 linear-gradient
linear-gradient
background-image: linear-gradient: (角度或方向, 開始色, 結束色);
css:
.gradientBox .simple{
width: 130px;
height: 130px;
background: #000;
background: linear-gradient(90deg, #C33, #FCC);
}
[角度]
| 名稱 | 設定 | 方向 |
|---|---|---|
| XXdeg | 設定度數，e.g. 90deg |
-- |
| to bottom | 上往下 | ↓ |
| to top | 下往上 | ↑ |
| to right | 左往右 | → |
| to left | 右往左 | ← |
| to bottom right | 左上往右下 | ↘ |
| to bottom left | 右上往左下 | ↙ |
| to top right | 左下往右上 | ↗ |
| to top left | 右下往左上 | ↖ |
/* Basic Sample1 : 45角漸層，藍到紅 */
background-image: linear-gradient( 45deg, blue , red );
/* Basic Sample3 - Rainbow : 至上 */
background-image: linear-gradient( to top,
red, orange, yellow, green, blue, indigo, violet
);
[顏色]
除了色碼以外，以空格隔開可以設定範圍的值
/* Basic Sample2 : 至右下，前面70% 填入紫色，後面30%(70% ~ 100%)填入黃色*/
background-image: linear-gradient( to bottom right,
purple 70%, yellow 100%
);
[重複] repeating-linear-gradient
可以重複執行
background: repeating-linear-gradient(to top,
red, red 10px,
#FFF 10px , #FFF 20px
);
[跨瀏覽器]
| 名稱 | 瀏覽器 |
|---|---|
| -moz-linear-gradient | firfox |
| -webkit-linear-gradient | chrome |
| linear-gradient | -- |
範例
[黑白紋]
<div class="gradientBox">
<div class="simple"></div>
</div>
<style>
.gradientBox div{
width: 130px;
height: 130px;
background: #000;
}
/*黑白紋*/
.gradientBox .simple{
background-image: repeating-linear-gradient(
#000, #000 10px,
#FFF 10px, #FFF 20px
);
}
</style>
[彩虹]
<div class="gradientBox">
<div class="simple"></div>
<div class="box_1"></div>
<div class="rainbow"></div>
</div>
<style>
.gradientBox div{
width: 130px;
height: 130px;
background: #000;
}
/*漸層彩虹*/
.gradientBox .box_1{
background: linear-gradient(
90deg,
#ff8b7b 0%,
#ffd087 20%,
#edff76 40%,
#edff76 60%,
#63deab 80%,
#6ad7ff 100%
);
}
/*條狀彩虹(無漸層)*/
.gradientBox .rainbow{
background: -moz-linear-gradient(left, #ff8b7b 0%, #ff8b7b 20%, #ffd087 20%, #ffd087 40%, #edff76 40%, #edff76 60%, #63deab 60%, #63deab 80%, #6ad7ff 80%, #6ad7ff 100%);
background: -webkit-linear-gradient(left, #ff8b7b 0%, #ff8b7b 20%, #ffd087 20%, #ffd087 40%, #edff76 40%, #edff76 60%, #63deab 60%, #63deab 80%, #6ad7ff 80%, #6ad7ff 100%);
background: linear-gradient(
90deg,
#ff8b7b 0%,
#ff8b7b 20%,
#ffd087 20%,
#ffd087 40%,
#edff76 40%,
#edff76 60%,
#63deab 60%,
#63deab 80%,
#6ad7ff 80%,
#6ad7ff 100%
);
}
</style>