Question

请看一下这个小提琴：http://jsfiddle.net/SkjHs/4/

<html>
<ul class="langBar">
  <li><a href="?lang=az&amp;page=main"> <img src="http://goo.gl/aIxpv"> </a></li>
  <li><a href="?lang=en&amp;page=main"> <img src="http://goo.gl/wIQob"> </a></li>
  <li><a href="?lang=ru&amp;page=main"> <img class="activeLang" src="http://goo.gl/If4lA"> </a></li>
</ul>
</html>

html {
background-color:#000;}
.langBar{
    display: block;
    overflow: hidden;
    float: left;
    width: 125px;
}

.langBar li{
    display: block;
    width: 32px;
    height: 40px;
    float: left;
    margin-left: 7px;
    padding: 0px;
}

.activeLang{
    -moz-border-radius: 20px;
    width: 32px;
    height: 32px;
    border-radius: 20px;
    border: 2px solid #482663;
}

.langBar li a{
    display: block;
    height: 100%;
    width: 100%;
}

我正试图在activeLang类图像周围实现一些漂亮的发光效果。第一个问题是，我在边框和图像本身之间进行填充。第二个不能得到发光效果。有什么建议吗？

Answer 1

首先，图像的填充是因为图像画布My Fiddle

画布裁剪的图像

enter image description here

将以下CSS添加到.activeLang，以便为您的图像添加效果......（当然，您可以根据自己的选择更改颜色）

box-shadow: 0 0 3px 3px #888;

从.activeLang

中删除

 width: 32px;
 height: 32px;

Answer 2

这种发光效果可以通过box-shadow：

来实现

/* pink glow effect */
box-shadow: 0 0 5px 5px #f3a;

有关发光效果的示例，请参阅http://jsfiddle.net/SkjHs/8/。

或者（我会设置它）一个不使用img - 标签的解决方案：

<ul class="langBar">
    <li><a href="?lang=az&amp;page=main" class="icon icon-az">[AZ]</a></li>
    <li><a href="?lang=en&amp;page=main" class="icon icon-en">[EN]</a></li>
    <li><a href="?lang=ru&amp;page=main" class="icon icon-ru active">[RU]</a></li>
</ul>


.langBar {
    overflow: hidden;
}

.langBar li{
    display: block;
    float: left;
    margin-left: 7px;
    padding: 0px;
}

.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 5px 0;
    overflow: hidden;
    text-indent: 110%;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

}

.icon:focus, .icon:active, .icon:hover,
.icon.active {
    -webkit-box-shadow: 0 0 5px 5px #f3a;
    -moz-box-shadow: 0 0 5px 5px #f3a;
    box-shadow: 0 0 5px 5px #f3a;
}

/* one may use a sprite and only set the background position here */
.icon-az {
    background-image: url(http://goo.gl/aIxpv);
}
.icon-en {
    background-image: url(http://goo.gl/wIQob);
}
.icon-ru {
    background-image: url(http://goo.gl/If4lA);
}

http://jsfiddle.net/SkjHs/10/

Answer 3

即使使用border-radius，边框也不会进入元素内部。每个图像文件边缘的少数像素会强制图像内容之外的边框。

我建议您修改图片以删除间距，甚至添加所需的所有效果。

Answer 4

作为精简问题的一个例子：

<ul class="langBar">
    <li><a id="az" href="?lang=az&amp;page=main"></a></li>
    <li><a id="en" href="?lang=en&amp;page=main"></a></li>
    <li><a id="ru" href="?lang=ru&amp;page=main" class="activeLang"></a></li>
</ul>

html {
background-color:#000;}
.langBar{
    display: block;
    overflow: hidden;
    float: left;
    width: 125px;
}

.langBar li {
    display: block;
    width: 32px;
    height: 32px;
    float: left;
    margin-left: 7px;
    padding: 0px;
}

.langBar li a {
    background: url(https://lh5.googleusercontent.com/orZ4dkDz2lBVJMB7D0Pb2fBHB8JPLcD8r2xqSYw-e3K7K2G427Ws_iqNbcYF1U2X36ju1y3eVy0) no-repeat 0 0;
    display:block;
    width:32px;
    height:32px;
}

.langBar li a#az {
    background-position:0 0;
}

.langBar li a#en {
    background-position:0 -32px;
}

.langBar li a#ru {
    background-position:0 -64px;
}

.langBar li a.activeLang, 
.langBar li a#az.activeLang, 
.langBar li a#en.activeLang, 
.langBar li a#ru.activeLang {
    background-position-x: -46px;
}

认为这有点冗长，这就是为什么我把它放在一个jsFiddle： http://jsfiddle.net/mori57/n3Q74/

希望这有帮助！

圆形png图像边框发光效果

4 个答案: