详解：53 radial-gradient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 200px;
border:5px solid gray;
margin:30px auto;
}
.box1
{
background-image: radial-gradient(ellipse,yellow,red);
}
.box2
{
background-image: radial-gradient(circle,yellow,red);
}
.box3
{
background-image: radial-gradient(30px 30px,yellow,red);
}
.box4
{
background-image: radial-gradient(50px 100px at 0px 100px,yellow,red);
}
.box5
{
background-image: radial-gradient(50px 100px at 50% 50%,yellow,red);
}
.box6
{
background-image:radial-gradient(50% 50% at 50% 50%,yellow,red);
}
.box7
{
background-image: radial-gradient(150px 100px at 50% 50%,yellow,red);
}
.box8
{
background-image: radial-gradient(150px 100px at center,yellow,red);
}
.box9
{
background-image: radial-gradient(150px 100px at left,yellow,red);
}
.box10
{
background-image:radial-gradient(150px 100px at left top,yellow,red);
}
.box11
{
background-image:radial-gradient(circle closest-side at center,yellow,red);
}/*指定径向渐变的半径长度为从圆心到离圆心最近的边*/
.box12{
background-image:radial-gradient(circle farthest-side at center,red,yellow);/*指定径向渐变的半径长度为从圆心到离圆心最远的边*/
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="box8">box8</div>
<div class="box9">box9</div>
<div class="box10">box10</div>
<div class="box11">box11</div>
<div class="box12">box10</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/08/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
