css - 如何设置轮播点的样式？

如何设置轮播点的样式，使其变得像这样？

这就是我现在所拥有的。

这是我的样式。

.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 5px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }

HTML

<div class="row slick">
// a bunch of images
</div>

最佳答案

干得好。 :)

nav.carousel:hover {
  cursor: default;
}

/* Hide the radio button */
nav.carousel input[type=radio] {
  display: none;
}

/* All styling takes place on the label element */
nav.carousel label {
  display: inline-block;
  background: #ddd;
  overflow: hidden;
  text-indent: -999px;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  box-shadow: inset 0 1px 1px 0 #999;
}
nav.carousel label:hover {
  background: #bbb;
  cursor: pointer;
  box-shadow: inset 0 1px 1px 0 #777;
}
nav.carousel input:checked + label {
  background: linear-gradient(#00CFFF, #1584bc);
  box-shadow: inset 0 0 1px 1px #087DC0;
}

<nav class="carousel">
  <input id="carousel-item-1" type="radio" name="carousel-dots">
  <label for="carousel-item-1">Go to item 1</label>

  <input id="carousel-item-2" type="radio" name="carousel-dots" checked>
  <label for="carousel-item-2">Go to item 2</label>

  <input id="carousel-item-3" type="radio" name="carousel-dots">
  <label for="carousel-item-3">Go to item 3</label>

  <input id="carousel-item-4" type="radio" name="carousel-dots">
  <label for="carousel-item-4">Go to item 4</label>

  <input id="carousel-item-5" type="radio" name="carousel-dots">
  <label for="carousel-item-5">Go to item 5</label>

  <input id="carousel-item-6" type="radio" name="carousel-dots">
  <label for="carousel-item-6">Go to item 6</label>
</nav>

关于css - 如何设置轮播点的样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27449917/