- 使用border
View Code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <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>Document</title> <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>
触发父级bfc<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <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>
- 使用伪元素，before／after
View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <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
View Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <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>Document</title> <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>
