<!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>
div{
width: 50px;
height: 50px;
}
/* 多种颜色 */
div:nth-child(1){
background:linear-gradient(to right, red , orange, yellow , green ,blue , purple)
}
div:nth-child(2){
background: radial-gradient(red , yellow , green);
}
div:nth-child(3){
background: radial-gradient(red 5%, yellow 15%, green 60%);
}
div:nth-child(4){
background: radial-gradient(circle , red , yellow ,green);
}
div:nth-child(5){
background: radial-gradient(closest-side at 60% 50% ,red , yellow , black);
}
div:nth-child(6){
background: radial-gradient(farthest-side at 60% 55% , red , yellow , black);
}
div:nth-child(7){
background: radial-gradient(red , yellow 10%, green 15%);
}
/* 角度问题 */
div:nth-child(8){
/* background: linear-gradient(#fff ,#333); */
/* background: linear-gradient(90deg, #fff ,#333); */
background: linear-gradient(45deg, #fff ,#f00 50%,#090);
}
/* 透明度 */
div:nth-child(9){
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
/* 重复性渐变 */
div:nth-child(10){
background: linear-gradient(red , yellow 10% , green 20%);
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
HTML背景颜色的渐变与多种颜色的混合
最新推荐文章于 2024-06-02 16:45:07 发布