div嵌套
利用border和boxshadow
径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<!--div 嵌套 -->
<div class="circle-outer content">
<div class="circle">
<div class="circle-inner"></div>
</div>
</div>
</div>
<div class="container">
<!--利用border和boxshadow-->
<div class="circle-shadow content"></div>
</div>
<div class="container">
<div class="circle-rrg content"></div>
</div>
<style>
.container {
float: left;
width: 45px;
height: 45px;
}
.content {
margin: auto;
}
/*方法1 利用div嵌套*/
.circle-outer {
position: relative;
height: 30px;
width: 30px;
background-color: rgba(2, 238, 255, 0.2);
border-radius: 50%;
}
.circle {
position: absolute;
left: 5px;
top: 5px;
height: 20px;
width: 20px;
background-color: rgba(2, 238, 255, 0.4);
border-radius: 50%;
}
.circle-inner {
position: absolute;
left: 5px;
top: 5px;
height: 10px;
width: 10px;
background-color: #02eeff;
border-radius: 50%;
}
/*方法2 利用border和boxshadow*/
.circle-shadow {
width: 10px;
height: 10px;
border-radius: 50%;
border: 5px solid rgba(2, 238, 255, 0.4);
background-color: rgba(2, 238, 255, 1);
box-shadow: 0 0 0 5px rgba(2, 238, 255, 0.2);
background-clip: padding-box;
}
/*方法3 径向渐变*/
.circle-rrg {
width: 30px;
height: 30px;
border-radius: 50%;
background: repeating-radial-gradient(rgba(2, 238, 255, 1) 0px 5px,rgba(2, 238, 255, 0.4) 5px 10px, rgba(2, 238, 255, 0.2) 10px 15px);
}
</style>
</body>
</html>
