CSS - 制作一个圆, 以及附着在容器边框 - 学习/实践

最新推荐文章于 2024-07-25 22:39:04 发布

宁小法

最新推荐文章于 2024-07-25 22:39:04 发布

阅读量665

点赞数

分类专栏： CSS 文章标签： css 圆圈浮在容器上方

本文链接：https://blog.csdn.net/william_n/article/details/109603962

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.应用场景

主要用于制作一个圆, 以及附着在容器边框, 样式布局实现.

2.学习/操作

1.代码如下:

HTML

CSS

.circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}

实践:

circle.html

<!DOCTYPE html>
<html>
<head>
   <title>css 绘制一个圆</title>
   <style type="text/css">
       .circle {
           border-radius: 50%;
           width: 4rem;
           height: 4rem;
           background: #333;
       }
   </style>
</head>
<body>
   <div class="circle"></div>
</body>
</html>

效果如下:

实现一个圆附着在容器边框:

circle-on-box.html

<!DOCTYPE html>
<html>
<head>
   <title>css 绘制一个圆</title>
   <style type="text/css">
       #rootApp {
           display: flex;
       }

       .app {
           width: 265px;
           height: 723px;
           border: 1px solid #D8DCE2;
           border-radius: 4px;
           border-radius: 4px;

position: relative;
}

       .circle {
           border: 3px solid #2765CF;
           border-radius: 50%;
           width: 60px;
           height: 60px;
           background: #fff;

           display: flex;
           justify-content: center;
           align-items: center;

font-size: 16px;
color: #2765CF;

           position: absolute;
           bottom: 33px;
           right: -34px;

           z-index: 1;
       }
   </style>
</head>
<body>
   <div id="rootApp">
       <div class="app">
           <div class="circle">FAQ</div>
       </div>
       <div class="app">
           <div class="circle">FAQ</div>
       </div>
       <div class="app">
           <div class="circle">FAQ</div>
       </div>
   </div>
</body>
</html>