渐变以及倒影和遮罩
渐变
渐变分为线性渐变以及径向渐变，下面来一一介绍
线性渐变
注意事项
- 默认写法，不加前缀，要在方向前面加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>
运行结果
E23F62B2-839A-4EAE-BEA6-F84367C92F68.png
倒影
倒影主要也就一行代码，很简单的，例如一张图片，让其设置左边的倒影，通过下面的代码可以设置出来
-webkit-box-reflect:left 10px -webkit-linear-gradient(right,rgba(0,0,0,0),rgba(255,255,255,1));
结果如图所涉：
1A9A68CE-4D8D-43EF-B3AA-7E7D49410E44.png
遮罩
遮罩和倒影差不多都很简单的
- 设置遮罩图片：-webkit-mask-image:url("1.png") ;
- 设置遮罩图片的大小：-webkit-mask-size:100%;
遮罩定位：-webkit-mask-position:10px 10px;
例图：
40683029-0E80-498C-87DB-5D67A326BBDF.png
除去图片其他地方都是同名的，所有文字只显示在图片内，其他地方没有。
今天的知识希望有所收获。
