首页  >  文章  >  web前端  >  如何使用 CSS 创建具有两个边框的圆形?

如何使用 CSS 创建具有两个边框的圆形?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-02 05:31:02862浏览

How to Create a Circle with Two Borders Using CSS?

如何创建具有两个边框的圆形

响应式地将 div 样式设计为具有两个边框的圆形可以使用 CSS 来完成。可以修改提供的原始圆形 div CSS 以创建所需的效果:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

这里, box-shadow 属性用于在圆形周围创建第二个边框。值 0 0 0 5px 定义阴影的偏移、模糊和扩散,而红色指定边框的颜色。

问题中提到的内部 div 方法可以通过在圆形div:

<code class="html"><div class="circle">
  <div class="inner"></div>
</div></code>

内部div可以使用背景颜色设置样式并使用flexbox垂直对齐:

<code class="css">div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}</code>

以上是如何使用 CSS 创建具有两个边框的圆形?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn