背景颜色渐变 background
background: -webkit-linear-gradient(起始方向,颜色1 ,颜色2,…)
background: -webkit-linear-gradient(left,pink,skyblue);
兼容问题 背景渐变必须要添加浏览器私有前缀-webkit
起始方向可以是 方位名词或者是度数 也可以省略 默认是top 从上往下渐变
<style>
div{
width: 800px;
height: 200px;
/* 兼容性问题 必须要加浏览器私有前缀 -webkit; */
/* background: -webkit-linear-gradient(left,pink,skyblue); */
/* background: -webkit-linear-gradient(50deg,pink,skyblue); */
/* 省略默认从上往下渐变 */
background: -webkit-linear-gradient(pink,skyblue);
}
</style>
</head>
<body>
<div></div>
省略默认从上往下渐变
background: -webkit-linear-gradient(pink,skyblue);
从左到右
background: -webkit-linear-gradient(left,pink,skyblue);
50度 显示效果
background: -webkit-linear-gradient(50deg,pink,skyblue);