2

请看看这个小提琴：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类图像实现一些漂亮的发光效果。第一个问题是，我正在边框和图像本身之间进行填充。二是不能得到发光效果。有什么建议么？

4

4 回答 4

2

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

裁剪画布的图像

在此处输入图像描述

添加下面的 CSS 来.activeLang为您的图像添加类似发光的效果...（当然您可以根据自己的选择更改颜色）

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

并从中删除.activeLang

 width: 32px;
 height: 32px;
于 2012-10-15T16:02:31.993 回答
1

这种发光效果可以通过以下方式实现box-shadow：

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

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

或者（正如我设置的那样）不使用img-tags 的解决方案：

<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/

于 2012-10-15T16:02:00.477 回答
0

作为精灵使问题的工作更短的一个例子：

<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/

希望这可以帮助！

于 2012-10-15T16:24:14.607 回答
0

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

图片

我建议编辑您的图像以删除间距，甚至添加您想要的所有效果。

于 2012-10-15T16:03:12.727 回答