!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap div:nth-child(1){
width: 300px;
height: 300px;
border: 1px solid red;
/*
径向渐变
background: radial-gradient(渐变的形状，颜色1 范围1，颜色2 范围2...);
渐变的形状: 椭圆 ellipse 默认值 圆 circle
圆心位置：
ackground: radial-gradient(渐变的形状 at 水平位置 垂直位置，颜色1 范围1，颜色2 范围2...);
取值：关键字 left right center
top bottom center
px
百分比
*/
background: radial-gradient(ellipse,black,white);
}
.wrap div:nth-child(2){
width: 300px;
height: 300px;
border: 1px solid red;
background: radial-gradient(circle,black,white);
}
.wrap div:nth-child(3){
width: 300px;
height: 300px;
border: 1px solid red;
background: radial-gradient(circle at right top,black,white);
}
.wrap div:nth-child(4){
width: 300px;
height: 300px;
border: 1px solid red;
background: radial-gradient(circle at 100% 50%,black,white);
}
</style>
</head>
<body>
<!-- 径向渐变，从一个点往四周渐变
-->
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap div:nth-child(1){
width: 300px;
height: 300px;
border: 1px solid red;
/*
径向渐变
background: radial-gradient(渐变的形状，颜色1 范围1，颜色2 范围2...);
渐变的形状: 椭圆 ellipse 默认值 圆 circle
圆心位置：
ackground: radial-gradient(渐变的形状 at 水平位置 垂直位置，颜色1 范围1，颜色2 范围2...);
取值：关键字 left right center
top bottom center
px
百分比
*/
background: radial-gradient(ellipse,black,white);
}
.wrap div:nth-child(2){
width: 300px;
height: 300px;
border: 1px solid red;
background: radial-gradient(circle,black,white);
}
.wrap div:nth-child(3){
width: 300px;
height: 300px;
border: 1px solid red;
background: radial-gradient(circle at right top,black,white);
}
.wrap div:nth-child(4){
width: 300px;
height: 300px;
border: 1px solid red;
background: radial-gradient(circle at 100% 50%,black,white);
}
</style>
</head>
<body>
<!-- 径向渐变，从一个点往四周渐变
-->
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
