- 使用border
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
width: 200px;
height: 200px;
background: brown;
border: 50px solid greenyellow;
border-radius: 50%;
}
style>
head>
<body>
<div>div>
body>
html>
- 两个嵌套div
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.father{
width: 200px;
height: 200px;
background: greenyellow;
border-radius: 50%;
}
.son{
width: 100px;
height: 100px;
background: brown;
border-radius: 50%;
position: relative;
top: 50px;
left: 50px;
/* position: relative;
top: 50px;
left: 50px; */
}
style>
head>
<body>
<div class="father">
<div class="son">div>
div>
body>
html>
定位
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.father{
width: 200px;
height: 200px;
background: greenyellow;
border-radius: 50%;
position: absolute;
/* position: fixed;
float: left/right;
overflow: hidden;
display: inline-block; */
}
.son{
width: 100px;
height: 100px;
background: brown;
border-radius: 50%;
margin: 50px;
}
style>
head>
<body>
<div class="father">
<div class="son">div>
div>
body>
html>
触发父级bfc
- 使用伪元素，before／after
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
width: 200px;
height: 200px;
background-color: greenyellow;
border-radius: 50%;
}
div::before{
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 50px;
left: 50px;
/* position: absolute;
margin: 50px; */
}
style>
head>
<body>
<div>div>
body>
html>
- 使用border-shadow
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
width: 200px;
height: 200px;
background-color: greenyellow;
border-radius: 50%;
box-shadow: 0 0 0 50px brown inset;
}
style>
head>
<body>
<div>div>
body>
html>
- 使用radial-gradient
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
width: 200px;
height: 200px;
border-radius: 50%;
background: -webkit-radial-gradient( circle closest-side,greenyellow 50%,brown 50%);
}
style>
head>
<body>
<div>div>
body>
html>
径向渐变