漸變
漸變分為線性漸變以及徑向漸變，下面來一一介紹
線性漸變
注意事項
- 默認寫法，不加前綴，要在方向前面加to，順序從右向左
- 兼容寫法，不能在方向前加to，順序是從左向右
- background: -webkit-linear-gradient(0deg ,blue 50px,green 60px,red 110px);代表藍綠過渡效果在50到80之間
- repeating代表是重復的
-
當設置度數時background: linear-gradient(0deg,blue,green,red); 默認從下上，background: -webkit-linear-gradient(0deg,blue,green,red);默認從左往右，當什么都不設置的話，加不加前綴都是從上往下
下面通過具體例子介紹線性漸變
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>線性漸變</title>
<style type="text/css">
.item{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
color: white;
text-align: center;
font-size: 50px;
line-height: 200px;
}
.item1{
background: linear-gradient(blue,green,red);
}
.item2{
background: -webkit-linear-gradient(blue,green,red);
}
.item3{
background: -webkit-linear-gradient(0deg ,blue 50px,green 80px,red 110px);
}
.item4{
background: -webkit-linear-gradient(top left,blue,green,red);
}
.item3{
background: -webkit-repeating-linear-gradient(0deg ,blue 70px,green 80px,red 90px);
}
</style>
</head>
<body>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</body>
</html>
運行結果：
B989251E-2815-4595-93D7-3436563FC97E.png
徑向漸變
注意事項
- 不能確定角度，圓的旋轉無意義100px代表半徑
- 可以指定方向，如top
- 在長方形內，徑向漸變是橢圓，可以添加circle屬性變成圓形
下面通過例子來介紹一下徑向漸變
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>徑向漸變</title>
<style type="text/css">
.item{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
color: white;
text-align: center;
font-size: 50px;
line-height: 200px;
}
.item5{
background: -webkit-radial-gradient( red 30px,orange 40px,yellow 50px,green 60px,cyan 70px,blue 80px,purple 90px)
}
.item6{
background: -webkit-radial-gradient(top, red 30px,orange 40px,yellow 50px)
}
.item7{
background: -webkit-repeating-radial-gradient( red 30px,orange 40px)
}
.item8{
width: 420px;
background: -webkit-repeating-radial-gradient(circle, red 30px,orange 40px)
}
.item9{
background: -webkit-radial-gradient(circle, red 70%,orange 71%)
}
</style>
</head>
<body>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</body>
</html>
運行結果
倒影
倒影主要也就一行代碼，很簡單的，例如一張圖片，讓其設置左邊的倒影，通過下面的代碼可以設置出來
-webkit-box-reflect:left 10px -webkit-linear-gradient(right,rgba(0,0,0,0),rgba(255,255,255,1));
結果如圖所涉：
遮罩
遮罩和倒影差不多都很簡單的
- 設置遮罩圖片：-webkit-mask-image:url("1.png") ;
- 設置遮罩圖片的大?。?webkit-mask-size:100%;
遮罩定位：-webkit-mask-position:10px 10px;
例圖：
除去圖片其他地方都是同名的，所有文字只顯示在圖片內，其他地方沒有。
今天的知識希望有所收獲。
