Question

我想设计我的圆点，使它们是一条平滑的线条（像这样：http://imgur.com/4a6asre）我如何得到这个？我需要附加点吗？

*我尝试改变按钮的宽度和高度，并添加border-radius：0，但这似乎不起作用......因为点由字体大小控制？

.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; l
ine-height: 20px; 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 id="container">

    <div class="one">

        <div class="main-gallery">

            <div class="gallery-cell"><img src="img/one/01.jpg"></div>
            <div class="gallery-cell"><img src="img/one/02.jpg"></div>
            <div class="gallery-cell"><img src="img/one/03.jpg"></div>
            <div class="gallery-cell"><img src="img/one/04.jpg"></div>
            <div class="gallery-cell"><img src="img/one/05.jpg"></div>
            <div class="gallery-cell"><img src="img/one/06.jpg"></div>
            <div class="gallery-cell"><img src="img/one/07.jpg"></div>
            <div class="gallery-cell"><img src="img/one/08.jpg"></div>
            <div class="gallery-cell"><img src="img/one/09.jpg"></div>
            <div class="gallery-cell"><img src="img/one/10.jpg"></div>
            <div class="gallery-cell"><img src="img/one/11.jpg"></div>
            <div class="gallery-cell"><img src="img/one/12.jpg"></div>
            <div class="gallery-cell"><img src="img/one/13.jpg"></div>
            <div class="gallery-cell"><img src="img/one/14.jpg"></div>
            <div class="gallery-cell"><img src="img/one/15.jpg"></div>
            <div class="gallery-cell"><img src="img/one/16.jpg"></div>
            <div class="gallery-cell"><img src="img/one/17.jpg"></div>
            <div class="gallery-cell"><img src="img/one/18.jpg"></div>
            <div class="gallery-cell"><img src="img/one/19.jpg"></div>
            <div class="gallery-cell"><img src="img/one/21.jpg"></div>
            <div class="gallery-cell"><img src="img/one/22.jpg"></div>
            <div class="gallery-cell"><img src="img/one/23.jpg"></div>
            <div class="gallery-cell"><img src="img/one/24.jpg"></div>
            <div class="gallery-cell"><img src="img/one/25.jpg"></div>
            <div class="gallery-cell"><img src="img/one/26.jpg"></div>
            <div class="gallery-cell"><img src="img/one/27.jpg"></div>
            <div class="gallery-cell"><img src="img/one/28.jpg"></div>
            <div class="gallery-cell"><img src="img/one/29.jpg"></div>
            <div class="gallery-cell"><img src="img/one/30.jpg"></div>
            <div class="gallery-cell"><img src="img/one/31.jpg"></div>

        </div>

    </div>

我尝试添加边框半径并更改高度和宽度，但这似乎不起作用？

谢谢！

Answer 1

根据您的代码执行此操作的最简单方法是 - 更改content:＆＃39; dot＆＃39;到＆＃39; square / block＆＃39;如下所示：

.slick-dots li button:before {
    content: "\2588\2588\2588\2588\2588";
}

完整演示 - http://jsfiddle.net/0fpztffr/5/

~~找到更多形状 - http://www.nice-entity.com/shapes-symbols~~ （链接不相关 - 更多？ - ）

如何将光点附加到光滑的旋转木马上？

1 个答案: