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);
}

灯箱2边框缩略图

2 个答案: