background + gradient 使用技巧
CSS畫圓點虛線
遇到這種虛線，我們首先想到用span畫一個個圓連成線，但是如果頁面是自適應的，就不知道要用幾個span了，那么我們是否有更好的方式來畫這個虛線呢？
比較好的方式就是用background來畫圓點虛線。
了解radial-gradient()函數API
CSS radial-gradient()創建一個圖片，由圓點向外輻射開由2個或多個顏色組成的漸變圖片，radial-gradient()函數返回的是<image>的一種，我們可以理解成圖片。
因為radial-gradient()返回的是類圖片數據，所以只能作為background-image的值，而不能是background-color的值。
語法: radial-gradient(shape size at position, start-color, ..., last-color);
-
shape：ellipse橢圓和circle圓，默認值ellipse -
size：-
farthest-corner(默認)，指定徑向漸變的半徑長度為從圓心到離圓心最遠的角 -
closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊 -
closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角 -
farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
-
-
position：定義漸變的位置，類似transform-origin，可選值有center（默認），top，bottom -
color-stop：有效顏色值和可選的位置值（百分比和有效長度值），如#fff 50%、red 10px，至少需要指定2個color-stop，表示開始顏色start-color-stop和結束顏色end-color-stop
實現圓點虛線
了解基本用法了之后我們分析下，圓點虛線背景如何生成。
.y-circle-line {
width: 100%;
height: 50px;
background-color: #2d2d2d;
background-image: radial-gradient(
circle closest-side at center, // 設置圓點在中心向外擴散的漸變圓
#fff 0, // 圓點開始顏色
#fff 20px, // 斷點位置及顏色
transparent 20px, // 擴散點開始顏色
transparent 100% // 擴散點結束顏色
);
background-size: 80px 100%;// 設置圖片大小 width 調大可以讓圓點間隔變大
background-repeat: repeat-x; // 沿着X軸重復平鋪圖片
}
事實上，我們可以簡化上的代碼，不顯示聲明默認值；
-
shape size at position都使用默認值 -
red 0起點0位置顏色省略不寫和第一個斷點位置顏色一樣。 -
blue 100%最后一個斷點位置默認100%，顏色和最后一個斷點位置一樣。 -
background-repeat默認值repeat
.y-circle-line-2 {
width: 100%;
height: 50px;
background-color: #000;
background-image: radial-gradient(
circle closest-side,
red 20px,
blue 20px
);
background-size: 50px 100%;
}
CSS畫鋸齒邊
如果設計圖有如上鋸齒邊，我們第一想到的是用背景圖片平鋪實現，那如果我們能用CSS實現就不用麻煩小姐姐切圖了。
需要了解的line-gradient()API
linear-gradient()函數用於創建2個或多個顏色的線性漸變圖片
因為linear-gradient()返回的是類圖片數據，所以只能作為background-image的值，而不能是background-color的值。
語法 linear-gradient(direction, color-stop1, color-stop2, ...);
-
direction：指定漸變的方向[top bottom] | [left right]，也可以是角度45deg -
color-stop：指定漸變的起止顏色和可選的位置，位置可以是百分比或有效的長度單位值如(10px，2em)
實現鋸齒虛線的三種方式
方式一：在正方形中畫2個等邊直角三角形，實現鋸齒的最小單元
-
優點：簡單，可以通過調整寬度，來調整鋸齒的鋒利程度 -
缺點：矩形有重疊部分
<div class="demo-container">
<div class="jagged-1 jagged-1--1"></div>
<div class="jagged-1 jagged-1--2"></div>
<div class="jagged-1 jagged-1--3"></div>
</div>
<style>
.demo-container {
background: #2d2d2d;
padding: 20px;
overflow: hidden;
}
.jagged-1 {
width: 30px;
height: 30px;
display: inline-block;
float: left;
margin: 0 10px;
background-image: linear-gradient(to top right, #fff, #fff 50%, transparent 50%, transparent), linear-gradient(to top left, #fff, #fff 50%, transparent 50%, transparent);
}
.jagged-1--1 {
width: 30px;
}
.jagged-1--2 {
width: 20px;
}
.jagged-1--3 {
width: 60px;
}
</style>
下面使用background-size來控制最小單元鋸齒的尺寸，沿X軸平鋪實現鋸齒效果。
<div class="demo-container">
<div class="line-jagged-1 line-jagged-1--1"></div>
<div class="line-jagged-1 line-jagged-1--2"></div>
<div class="line-jagged-1 line-jagged-1--3"></div>
</div>
<style>
.demo-container {
background: #2d2d2d;
padding: 20px;
}
.line-jagged-1 {
height: 30px;
width: 100%;
margin: 10px 0;
background-image: linear-gradient(to top right, #fff, #fff 50%, transparent 50%, transparent),
linear-gradient(to top left, #fff, #fff 50%, transparent 50%, transparent);
}
.line-jagged-1--1 {
background-size: 30px 100%;
}
.line-jagged-1--2 {
background-size: 10px 100%;
}
.line-jagged-1--3 {
background-size: 60px 100%;
}
</style>
方式三：矩形里畫2個相鄰直角三角形
長是寬2倍的長方形，注意必須是2個正方形長度
linear-gradient的角度是用極地坐標系，0°指向的北方，90°指向的東方。 了解更多參考MDN linear-gradient
如上圖所示先畫左邊第一個直角三角形，角度為45deg或to top right，斷點有三個0、33.33%、100%
<div class="demo-container">
<div class="jagged"></div>
</div>
<style>
.demo-container{
background: #2d2d2d;
padding: 20px;
width: 100%;
}
.jagged {
height: 30px;
width: 60px;
border: 1px solid yellow;
background-image: linear-gradient(45deg, #fff 0 33.33%, transparent 33.33% 100%);
}
</style>
同理我們畫出右側的直接三角形
<div class="demo-container">
<div class="jagged-2__right"></div>
</div>
<style>
.demo-container{
background: #2d2d2d;
padding: 20px;
}
.jagged-2__right {
height: 30px;
width: 60px;
border: 1px solid yellow;
background-image: linear-gradient(-45deg, #fff 0 33.33%, transparent 33.33% 100%);
}
</style>
現在我們使用background-size來控制最小單元圖片大小，進行背景平鋪實現鋸齒邊
<div class="demo-container">
<div class="jagged"></div>
</div>
<style>
.demo-container{
background: #2d2d2d;
padding: 20px;
}
.jagged {
height: 30px;
width: 100%;
background-image: linear-gradient(45deg, #fff 0 33.33%, transparent 33.33% 100%),
linear-gradient(-45deg, #fff 0 33.33%, transparent 33.33% 100%);
background-size: 60px 100%;
}
</style>