一、线性渐变
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景的线性渐变和径向渐变</title>
</head>
<style>
.box{
width:500px;
height:200px;
/* 线性渐变:background:linear-gradient(to 方向,颜色 color-stop,...) */
background:linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
}
</style>
<body>
<div class="box"></div>
</body>
</html>
显示结果如下：
二、径向渐变
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景的径向渐变</title>
</head>
<style>
.box{
width:300px;
height:200px;
background:radial-gradient(circle 100px,red 40%,green 100%);
}
</style>
<body>
<div class="box"></div>
</body>
</html>
显示效果如下：
注意：css中的渐变设置繁琐，功能有限，一般实现渐变都是用图片代替的，这里只做了解即可。
|
窥视卡
雷达卡
发表于 2023-1-31 21:47:29
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 07:09:54
