css之线性渐变
第一种 线性渐变
1.头部到底部
至少两种颜色，多了不限
background-image: linear-gradient(颜色1，颜色2.....);
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#d1{
width:400px;
height:400px;
background-image: linear-gradient(pink,skyblue,gold);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
效果图如下
2.指定角度
background-image: linear-gradient(角度值，颜色1，颜色2.....);
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#d1{
width:400px;
height:400px;
background-image: linear-gradient(30deg,pink,skyblue,gold);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
效果图如下
3.指定方向
background-image: linear-gradient(to 方向，颜色1，颜色2.....);
注意：方向以to开头
代码如下·
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#d1{
width:400px;
height:400px;
background-image: linear-gradient(to right,pink,skyblue,gold);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
效果图如下
第二种 重复线性渐变
1.头部到底部
background-image: repeating-linear-gradient(颜色 百分比，颜色 百分比)
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#d1{
width:400px;
height:400px;
background-image: repeating-linear-gradient(pink 10%,gold 20%);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
效果图如下
2.指定角度
background-image: linear-gradient(角度值，颜色1 百分比，颜色2 百分比.....);
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#d1{
width:400px;
height:400px;
background-image: repeating-linear-gradient(30deg ,pink 10%,gold 20%);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
效果图如下
3.指定方向
background-image: linear-gradient(to 方向，颜色1 百分比，颜色2 百分比...)
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#d1{
width:400px;
height:400px;
background-image: repeating-linear-gradient(to top right ,pink 10%,gold 20%);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
效果如下：
注意：浏览器的兼容问题
每种内核都写一遍，那么不同浏览器在执行代码， 只会执行自己对应内核的代码，其它代码屏蔽
-moz- firefox
-webkit- chrome/safari -
-o- opera
-ms- IE
如果使用兼容性的写法，不加to 和background:
-moz-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
background: -o-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
background: -ms-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);