<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*
对于径向渐变，主要是3个参数控制。
一个是原点和大小。大小类似border-radius的感觉，原点使用at表示可以指定点的坐标，或使用left、right、top、bottom来表示。
其次是两个颜色和透明度、大小等。这里50px或百分比，
*/
/*
div {
width: 200px;
height: 100px;
background-color: pink;
background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);
}
*/
/* .test_demo {overflow-y: scroll; height: 120px; width: 120px; background:#CCCCCC;} */
/*
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
值 描述
shape 确定圆的类型:
ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变
size 定义渐变的大小，可能值：
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position 定义渐变的位置。可能值：
center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color 用于指定渐变的起止颜色。
*/
div {
width: 200px;
height: 100px;
background-color: pink;
background-image: radial-gradient(circle at 200px 50px, #fff 50px, #4169E1 50px);
position: relative;
float: left;
}
.circle {
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid red;
background-color: purple;
position: absolute;
float: left;
margin: 20px 160px;
}
</style>
</head>
<body>
<div></div>
<div class="circle">
<i></i>
</div>
</body>
</html>
03-03
3110
3110
09-16
5209
5209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
