CSS3围绕另一个圆形创建带空间的圆形

Question

我需要创建类似图片中所示的东西。我已经创建了带圆圈的线，但是黄色圆圈周围应该有空隙的边框是我的问题。

我已经在 fiddle 中展示了我已经完成的步骤，但是黄色的那个是我的问题。欢迎任何建议！ jsfiddle

我的 HTML：

<section class="preview">
    <ul>
        <li class="first">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="current">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="last">
            <div>
            </div>
        </li>
    </ul>
</section>

我的CSS：

.preview ul li {
    list-style-type: none;
    position: relative;
    width: 1px;
    margin: 0 auto;
    padding-top: 35px;
    background: #fff;
}

.preview ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: inherit;
}

.preview ul li.last {
    padding-top: 0;
}

.preview ul li.current:after {
    background: #fff934;
    border: 2px solid #fff934;
    box-shadow: 1px 1px 0px 5px black;
}

- Steffen Kamper

Answer 1

有一种更简单的方法可以做到这一点，而不需要在

内部添加额外的

。您可以使用background-clip: content-box设置background——这样做的效果是将background限制在内容区域内，这意味着如果填充或边框非零，则您的background不会显示在内容外的填充或边框区域下面。然后您给您的元素一个非零的padding和border。您将同时拥有background和border，并且它们之间会有一个透明的空间，其大小由padding的大小确定。

ul {
  list-style: none;
  background: url(https://istack.dev59.com/SVlc8.webp);
}

li {
  margin: .25em;
  border: solid 2px transparent;
  padding: 3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor content-box;
  color: #fff;
}

.current { border-color: currentColor; }

<ul>
  <li></li>
  <li class='current'></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

（想要更详细的解释和类似的例子，可以查看我去年写的关于background-clip的这篇文章。）

- Ana

Answer 2

你可以使用box-shadow实现外圆，使用linear-gradient实现垂直线条。只需很少的代码即可实现布局。

ul {
  list-style: none;
  padding: 15px 30px;
  background: teal linear-gradient(to bottom, silver, silver) 36px 0 / 1px auto repeat-y;
}
li {
  background: white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 20px 0;
}
.current {
  background: gold;
  box-shadow: 0 0 0 4px teal, 0 0 0 5px gold;
}

<ul>
  <li></li>
  <li class="current"></li>
  <li></li>
  <li></li>
</ul>

- Stickers

Answer 3

你需要添加一个透明背景、黄色边框的圆形，用于当前类。

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #456990;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}
.preview ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  margin: 0 auto;
  padding-top: 35px;
  background: #fff;
}   

.preview ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: inherit;
}

.preview ul li.last {
  padding-top: 0;
}

.preview ul li.current:after { /* Code i edited */
  background: #fff934;
}
.preview ul li.current:before {  /* Code i added*/
  content: '';
    position: absolute;
    left: 50%;
    top: -4px;
    transform: translateX(-50%);
    width: 22px;
    height: 21px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #fff934;
}

<section class="preview">
    <ul>
        <li class="first">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="current">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="last">
            <div>
            </div>
        </li>
    </ul>
</section>

- Nandhu

---

太棒了 - 透明度是我缺失的东西。做得很好，回答也非常迅速，非常感谢！ - Steffen Kamper

Answer 4

另一种方法是使用 border-style: double 属性。

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  background: #456990;
  color: #fff;
  overflow-x: hidden;
  padding-bottom: 50px;
}
.preview ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  margin: 0 auto;
  padding-top: 35px;
  background: #fff;
}   

.preview ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: inherit;
}

.preview ul li.last {
  padding-top: 0;
}
/* edits made to this */
.preview ul li.current:after {
  background: #fff934;
  border: 5px double #456990;
  top: -4px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<section class="preview">
    <ul>
        <li class="first">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="current">
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li>
            <div>
            </div>
        </li>
        <li class="last">
            <div>
            </div>
        </li>
    </ul>
</section>
</body>
</html>

- Clyde Lobo