浏览器内核及私有前缀
在学习渐变前,我们应该了解什么是浏览器内核及私有前缀。
浏览器最关键的部分就是它的渲染引擎(Rendering Engine),也就是大家平常所说的的“内核”。
内核 | 私有前缀 | 说明 |
---|---|---|
Trident | -ms- | IE浏览器专属的CSS属性需添加-ms-前缀 |
Gecko | -moz- | 所有基于Gecko引擎的浏览器(如Firefox)专属的CSS属性需添加-moz-前缀 |
Webkit | -Webkit- | 所有基于Webkit引擎的浏览器(如Chrome、Safari)专属 |
Presto | -o- | Opera浏览器专属的CSS属性需添加-o-前缀 |
CSS3渐变
CSS3线性渐变
- 水平渐变:background: linear-gradient(direction, color-stop1, color-stop2, …);
说明:
direction:默认为to bottom,即从上向下的渐变。渐变方向:left right top bottom。
stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。
- 对角渐变: background: linear-gradient(to right bottom, red , blue);
说明: to right bottom、to right top、to left bottom、to left top
- 角度渐变:background: linear-gradient(10deg, red , blue);
说明: 角度是指水平线和渐变线之间的角度
CSS3径向渐变
background: radial-gradient(center, shape, size, start-color, …, last-color);
径向渐变不同于线性渐变,线性渐变是 从“一个方向”向“另一个方向” 的颜色渐变,而径向渐变是 从“一个点”向“四周” 的颜色渐变。
说明:
- center:渐变起点的位置,可以为百分比,默认是图形的正中心。
- shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。
- size:渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角。
- background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black);
使用渐变时,加上浏览器私有前缀
使用线性渐变linear-gradient或者径向渐变radial-gradient,没加浏览器私有前缀之前的写法称作标准写法,例如 “linear-gradient(to left,#f00,#0f0);” 或者 “radial-gradient(center,#f00,#0f0);”。加上私有前缀后,语法将与标准语法有一定的区别:
- 方向前不需要添加 to ,方向与标准(没添加前缀,并且方向前添加 to)相反;
- 如果要显示与标准的写法一样的效果,需要将方向调换,例如标准写法使用to left,则加前缀的使用right代替to left
- -webkit-linear-gradient(left,#f00,#0f0);
CSS3重复性渐变
-
重复性线性渐变 background: repeating-linear-gradient(red, yellow 10%, green 20%);
-
重复性径向渐变 background: repeating-radial-gradient(red, yellow 10%, green 20%);
线性渐变:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
margin: 30px auto;
}
.box1{
background: linear-gradient(to left,#f00,#0f0);
}
.box2{
background: -webkit-linear-gradient(right,#f00,#0f0);
}
.box3{
background: -webkit-linear-gradient(right,#f00 70%,#0f0 30%);
}
.box4{
background: -webkit-linear-gradient(left top,#f00,#0f0);
}
.box5{
background: -webkit-linear-gradient(30deg,#f00,#0f0);
}
.box6{
background: -webkit-linear-gradient(right,rgb(255,0,0), rgb(255,165,0), rgb(255,255,0), rgb(0,255,0), rgb(0,127,255), rgb(0,0,255), rgb(139,0,255));
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</body>
</html>
径向渐变:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 300px;
margin: 30px auto;
}
.box1{
background: -webkit-radial-gradient(closest-side, blue, green, yellow, black);
}
.box2{
background: -webkit-radial-gradient(farthest-side, blue, green, yellow, black);
}
.box3{
background: -webkit-radial-gradient(closest-corner, blue, green, yellow, black);
}
.box4{
background: -webkit-radial-gradient(farthest-corner, blue, green, yellow, black);
}
.box5{
background: -webkit-radial-gradient(ellipse, blue, green, yellow, black);
}
.box6{
background: -webkit-radial-gradient(circle, blue, green, yellow, black);
}
.box7{
background: -webkit-radial-gradient(30px 30px, circle, blue, green, yellow, black);
}
.box8{
background: -webkit-radial-gradient(10% 30%, circle, blue 5%, green 10%, yellow, black);
}
.box9{
background: -webkit-radial-gradient(circle, rgb(255,0,0), rgb(255,165,0), rgb(255,255,0), rgb(0,255,0), rgb(0,127,255), rgb(0,0,255), rgb(139,0,255));
}
</style>
</head>
<body>
<div class="box1">closest-side</div>
<div class="box2">farthest-side</div>
<div class="box3">closest-corner</div>
<div class="box4">farthest-corner</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</body>
</html>
重复性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
margin: 30px auto;
}
.box1{
background: -webkit-repeating-linear-gradient(red , yellow 10%, green 20%);
}
.box2{
background: -webkit-repeating-radial-gradient(red , yellow 10%, green 20%);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>