標籤：ott doctype 20px html 括弧 sky line rgba bottom
<!DOCTYPE html>
<html>
<head>
<title>線性漸層</title>
<style type="text/css">
div{
width: 150px;
height: 150px;
margin-top: 20px;
}
/*漸層分線性漸層和放射狀漸層
線性漸層：linear-gradient();
1.漸層必須有兩種及以上顏色
2.css中漸層是作為元素的background-image出現的
3.線性漸層文法為(終點/方向,顏色1 漸層的位置1,顏色2 漸層的位置2,......)
4.終點/方向可以是to top/to left/to right/to bottom,to left top....
5.終點/方向還可以是角度 比如0deg to top*/
.first{
background-image: linear-gradient(to top,yellow,pink);
}
.second{
/*需要注意的是第一個和最後一個色標並沒有指定一個位置; 位置值0％和100%將分別自動的分配給第一個和最後一個色標 。中間的色標指定一個80%的位置, 把剩下的部分留給底部
*/
background-image: linear-gradient(to right bottom,green,pink 80%,black)
}
.third{
/*正值的角度是以順時針來的
負值的角度以逆時針來的
*/
background-image: linear-gradient(-20deg,skyblue,gold,purple);
}
.forth{
/*rgba()也可以作為顏色放在漸層裡使用*/
background-image: repeating-linear-gradient(to left,blue,rgba(100,0,0,.3),gold 10%);
width: 1000px;
}
.fifth{
/*transparent也可以作為顏色在漸層裡使用
漸層linear-gradient後面和括弧中間不能加空格*/
background-image: repeating-linear-gradient(to bottom,#ccc,transparent 7%,transparent 15%);
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="forth"></div>
<div class="fifth"></div>
</body>
</html>
css3線性漸層
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
