CSS3环绕另一个带空格的圆
CSS3环绕另一个带空格的圆
提问于 2017-01-14 18:06:20
我需要创造一些东西，就像你在图片上看到的那样。我已经创建了带有圆圈的线条，但黄色的线条有问题，它应该有一个边框圆圈，中间有空格。
我已经用我已经有的步骤创建了一个小提琴，但是黄色的那个是我的问题。欢迎任何建议！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;
}Stack Overflow用户
发布于 2017-01-14 22:13:11
另一种方法是使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41648770
复制相关文章
相似问题
腾讯云开发者
