用到了伪元素before和after
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- }
- html,body{
- height: 100%;
- overflow: hidden;
- }
-
- #test{
- width: 600px;
- height: 400px;
- border: 1px solid;
- border-radius:50%;
- text-align: center;
- font: 30px helvetica;
- line-height: 400px;
- position: relative;
- }
- #test:after{
- position: absolute;
- display: block;
- content: "";
- width: 80px;
- height: 80px;
- border: 1px solid;
- bottom: -20px;
- right: -20px;
- border-radius:50%;
- }
- #test:before{
- position: absolute;
- display: block;
- content: "";
- width: 50px;
- height: 50px;
- border: 1px solid;
- bottom: -100px;
- right: -100px;
- border-radius:50%;
- }
- </style>
- </head>
- <body>
- <div id="test">大家好，欢迎入坑前端</div>
- </body>
- </html>
-
-
湘公网安备 43102202000103号
