CSS3圍繞另一個圈與空間圈

Question

我需要創建像你在圖片上看到的東西。 我已經創建了帶圓圈的線條，但我遇到了一個黃色的問題，它應該有一個邊框圓圈，中間有空格。

我已經創建與步驟我已經有一個小提琴，但黃色的是我的問題。歡迎任何建議！ 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; 
} 

Answer 1

您需要添加另一個圈子與透明背景，黃色邊框爲當前類

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 2

在li內部沒有額外的div，有一種更簡單的方法。您將background設置爲background-clip: content-box - 這會將您的background限制爲內容區域，這意味着如果這些內容非零，您的background將不會顯示在內容以外的padding或border區域的下方。然後，您給元素賦予非零值padding和border。您將同時顯示background和border，並顯示它們之間的透明空間，由padding的大小決定。

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

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

（對於更詳細的解釋和更多類似的例子，你可以檢查出this article about background-clip我去年寫）

Answer 3

另一種方法是使用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>

Answer 4

您可以使用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>