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

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>

效果如下:

效果已经实现, 代码思路: 制作一个圆+绝对定位

后续补充

...

3.问题/补充

TBD

4.参考

后续补充

...

这里写图片描述

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

猜你喜欢