Question

我需要创建你在图片上看到的东西。我已经用圆圈创建了这条线，但是我遇到了黄色的问题，它应该有一个边框圆圈，中间有空格。

我已经用我已经拥有的步骤创造了一个小提琴，但黄色的是我的问题。欢迎任何建议！ jsfiddle

我的HTML：

'a'(matched), Nan(unmatched), Nan(unmatched), 'd', Nan(unmatched)

我的CSS：

<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>

Answer 1

有一种更简单的方法可以在div内没有额外li的情况下执行此操作。您使用background设置了background-clip: content-box - 这样做会将您的background限制在内容区域，这意味着您的background不会显示在{{1}下面如果这些非零，则在内容之外的区域或padding区域。然后，您的元素将为非零border和padding。您将同时显示border和background，并且它们之间的透明空间由border的大小决定。

＆＃13;

padding

＆＃13;

ul {
  list-style: none;
  background: url(https://i.stack.imgur.com/SVlc8.jpg);
}

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; }

＆＃13;

（有关更详细的解释和更多类似的例子，你可以查看我去年写的this article about background-clip）

Answer 2

您需要为当前班级添加另一个带有黄色边框的透明背景的圆圈

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>

Answer 3

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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 4

您可以将alert()用于外圈，将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;
}

CSS3绕着另一个带有空格的圆圈

4 个答案: