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

红太狼 2022-12-20 05:35 5阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于制作一个圆, 以及附着在容器边框, 样式布局实现.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.代码如下: HTML &lt;div class="circle"&gt;&lt;/div&gt; &nbsp; CSS .circle { &nbsp; border-radius: 50%; &nbsp; width: 2rem; &nbsp; height: 2rem; &nbsp; background: #333; } &nbsp; 实践: circle.html &nbsp; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp;&nbsp; &nbsp;&lt;title&gt;css 绘制一个圆&lt;/title&gt; &nbsp;&nbsp; &nbsp;&lt;style type="text/css"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.circle { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border-radius: 50%; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 4rem; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 4rem; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background: #333; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&lt;/style&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp; &nbsp;&lt;div class="circle"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; &nbsp; 效果如下: <img alt="" height="195" src="https://img-blog.csdnimg.cn/20201110180541376.png" width="513"> &nbsp; &nbsp; 实现一个圆附着在容器边框: &nbsp; circle-on-box.html &nbsp; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp;&nbsp; &nbsp;&lt;title&gt;css 绘制一个圆&lt;/title&gt; &nbsp;&nbsp; &nbsp;&lt;style type="text/css"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#rootApp { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;display: flex; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.app { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 265px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 723px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border: 1px solid #D8DCE2; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border-radius: 4px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border-radius: 4px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;position: relative; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.circle { &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border: 3px solid #2765CF; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;border-radius: 50%; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 60px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 60px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background: #fff; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;display: flex; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;justify-content: center; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;align-items: center; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-size: 16px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: #2765CF; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;position: absolute; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bottom: 33px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;right: -34px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;z-index: 1; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&lt;/style&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp; &nbsp;&lt;div id="rootApp"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="app"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="circle"&gt;FAQ&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="app"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="circle"&gt;FAQ&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="app"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="circle"&gt;FAQ&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; &nbsp; 效果如下: <img alt="" height="895" src="https://img-blog.csdnimg.cn/20201110180717590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="940"> 效果已经实现, 代码思路: 制作一个圆+绝对定位 &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

后续补充

...

![这里写图片描述][aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTgwMTMxMTE0ODQ0Mjg2]

[aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTgwMTMxMTE0ODQ0Mjg2]: /images/20221120/9ab3a57df442412c93953f4dde412c95.png