Question

我不知道如何在CSS中制作圆点（看图像）

</br> . </br> . </br> ....

Answer 1

这既不是Bootstrap的情况，也不是CSS甚至HTML的情况。你需要的是SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 42" width="6px" height="42px">
  <circle cx="3" cy="3" r="3" fill="white" fill-opacity="1.0"/>
  <circle cx="3" cy="15" r="3" fill="white" fill-opacity="0.8333"/>
  <circle cx="3" cy="27" r="3" fill="white" fill-opacity="0.6667"/>
  <circle cx="3" cy="39" r="3" fill="white" fill-opacity="0.5"/>
</svg>

您可以通过<img>元素嵌入它，也可以直接粘贴它来代替<br>和点。

Answer 2

有很多方法可以实现这一点，但这些点看起来只是li项目符号，因此创建一个空li列表可能是最简单的方法。您可以使用opacity实现淡入淡出效果。

li:nth-child(1) {
  opacity:1;
}
li:nth-child(2) {
  opacity:.75;
}
li:nth-child(3) {
  opacity:.5;
}
li:nth-child(4) {
  opacity:.25;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 3

好吧，我还不确定你想要什么以及你的要求是什么，但看看这个是否有帮助：

＆＃13;

.container {
  width: 100%; 
  text-align: center;
}
 

.dot {
  font-size: 3em;
  line-height: .25em;
}

.dot.one { color: #000 }
.dot.two { color: #555 }
.dot.three { color: #999 }
.dot.four { color: #CCC }

＆＃13;

<div class="container">
<div class="dot one">.</div>
<div class="dot two">.</div>
<div class="dot three">.</div>
<div class="dot four">.</div>
</div>

＆＃13;

Answer 4

你的意思是这样的CSS吗？ https://jsfiddle.net/t9hmxz0z/

HTML（远非美丽，但它可以完成工作）

<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS

div {
  width: 8px;
  margin: 0px auto;
}

span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: gray;
  margin-bottom: 8px;
}

span:nth-child(1) {
  background-color: #888;
}

span:nth-child(2) {
  background-color: #666;
}

span:nth-child(3) {
  background-color: #444;
}

span:nth-child(4) {
  background-color: #222;
}

span {
  last-child: margin-bottom: 0px;
}

Answer 5

仅限HTML和CSS ...

有点＆＃34; hacky＆＃34;但我觉得我对这个有一些乐趣。

https://jsfiddle.net/etmargallo/vvn5zxn1/5/

HTML：

<div>
   <span></span>
</div>

CSS

body {
  background: black;
}

div {
  display: block;
  position: relative;
  width: 5px;
  height: 300px;
  border-left: 5px dotted white;
}

div > span {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -5px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAABkCAYAAABOx/oaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE3NUFEMDFBMERBRDExRTdCMzA1RTYyQ0YwNjYwNUQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE3NUFEMDFCMERBRDExRTdCMzA1RTYyQ0YwNjYwNUQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTc1QUQwMTgwREFEMTFFN0IzMDVFNjJDRjA2NjA1RDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTc1QUQwMTkwREFEMTFFN0IzMDVFNjJDRjA2NjA1RDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7MhZfpAAAASUlEQVR42mJhYGBgZkADLEDMhE2QkQYqmQbUTOIFmQefmcz0UkkL7XQzc/g5iW6CLCPY7yM5fdKtZBjYUnFgzRzYio+CqhwgwACJpAKLf74nxAAAAABJRU5ErkJggg==);
  background-size: cover;
}

在bootstrap和CSS的点

5 个答案: