線性漸變與徑向漸變與重複漸變
阿新 • • 發佈：2018-12-26
<style>
/*線性漸變*/
div{
width: 300px;
height: 300px;
/*新增漸變：漸變不是一個單一鉤，它產生的是影象，所以需要使用background*/
/*linear-gradient(方向，開始顏色 位置，顏色2 位置，顏色3 位置...);*/
/*方向：
to top:0deg
to right:90deg
to bottom:180deg --預設值
to left:270deg*/
/*background: linear-gradient(to right,red,blue)*/;
background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
}
/*徑向漸變*/
div{
width: 300px;
height: 200px;
/*新增徑向漸變：產生也是影象*/
/*background: radial-gradient(red,blue);*/
/*語法：radial-gradient(形狀 大小 座標,顏色1，顏色2...)：
形狀shape:
circle:產生正方形的漸變色
ellipse:適配當前的形狀,如果是正方形的容器，兩者效果一樣.如果寬高不一樣，預設效果切換到ellipse
at position:座標，預設在正中心。
可以賦值座標（參照元素的左上角），也可以賦值關鍵字(left center right top bottom)
大小size:
closest-side：最近邊；
farthest-side：最遠邊；
closest-corner：最近角；
farthest-corner：最遠角。預設是最遠的角farthest-corner*/
/*background: radial-gradient(circle,red,blue);*/
/*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
/*background: radial-gradient(at left top,red,blue);*/
/*設定顏色的位置*/
background: radial-gradient(red,red 50%,blue 50%,blue);
}
/*重複漸變*/
body{
background-color: #ccc;
}
div:first-of-type{
width: 300px;
height: 300px;
/*background: radial-gradient(
#fff 0%,#fff 10%,
#000 10%,#000 20%,
#fff 20%,#fff 30%,
#000 30%,#000 40%);*/
background: repeating-radial-gradient(circle closest-side at center center,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
}
div:last-of-type{
width: 200px;
height: 800px;
background: repeating-linear-gradient(45deg,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
}
</style>
</head>
<body>
<div></div>
<div></div>