在硬币滑块周围设置边框

Question

我想在滑块周围放置一个白色边框，如下＆gt;＆gt; 。

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

硬币滑块链接＆gt;＆gt; Coin-slider official site

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是id的{​​{1}}，而不是div，而在您的CSS中，您指的是class。

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

Here是一个演示。

Answer 2

Coin-Slider的白色边框 可以通过添加样式来设置

border: 2px solid white;

到层叠样式表'coin-slider-style.css'为

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