缩略图周围的灯箱 2 边框

Question

嘿伙计们，我现在正在尝试 2 个使用灯箱，一切都工作正常。然而，我正在尝试 2 弄清楚的是我如何获得一个像他们在示例中获得的边框 http://lokeshdhakar.com/projects/lightbox2/以更改颜色的边框。对此的任何帮助都会很棒。

.html：

<div class = "image1">
<a href="images/image1.jpg" rel="lightbox[group]"><img src="images/image1t.jpg" /></a>
</div>

Answer 1

尝试以下代码

.image1 a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
display: block;
float: left;
line-height: 1em;
margin-right: 40px;
padding: 7px;
transition: all 0.2s ease-out 0s;
}
.image1 a:hover {
background-color: #8AD459;
}

Answer 2

在锚点上设置一个 css3 过渡属性，然后在 ：hover 属性上，效果将"动画化"。

.image1 a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

.image1 a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}