css - 在硬币滑块周围设置边框

Question

我想像这样在滑块周围放置一个白色边框 >> 。

我尝试使用.coin-slider img { border: 2px solid white;}，但它没有用。

硬币滑块链接 >>硬币滑块官方网站

HTML：

<div id='coin-slider'>

                     <img src='images/slideshow1x.png' />
                            <span>
                                Description for img01
                            </span>



                     <img src='images/slideshow2x.jpg' />
                            <span>
                                Description for img01
                            </span>



                     <img src='images/slideshow3x.jpg' />
                            <span>
                                Description for img01
                            </span>



                     <img src='images/slideshow4x.jpg' />
                            <span>
                                Description for img01
                            </span>

</div>

CSS：

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider img { border: 2px solid white;}
/*.coin-slider a{ text-decoration: none; outline: none; border: none; } */

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
/*.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }*/
.cs-active { background-color: #B8C4CF; color: #FFFFFF;}

.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }

.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

Answer 1

在您的 HTML 中，coin-slider是idof the div，而不是class，而在您的 CSS 中，您指的是.coin-slider任何地方。

在您的 HTML 中更改<div id='coin-slider'>为<div class='coin-slider'>，一切正常。

这是一个演示。

Answer 2

硬币滑块的白色边框可以通过添加样式来设置

border: 2px solid white;

到级联样式表“coin-slider-style.css”为

.coin-slider {overflow:hidden; zoom:1; position:relative; border:2px solid white;}