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;
}回答 4
Stack Overflow用户
回答已采纳
发布于 2017-01-14 18:14:07
您需要为当前类添加另一个具有透明背景和黄色边框的圆
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>
Stack Overflow用户
发布于 2017-01-14 22:03:32
有一种更简单的方法可以做到这一点，而不需要在li中添加额外的div。使用background-clip: content-box设置background -这样做的目的是将background限制在内容区域，这意味着如果padding或border区域不为零，则background不会显示在内容区域之外。然后给元素一个非零的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
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
复制相关文章
相似问题
腾讯云开发者
