圓角PNG圖像邊緣發光效果

請看看這個小提琴：http://jsfiddle.net/SkjHs/4/圓角PNG圖像邊緣發光效果

<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一流形象。第一個問題是，我正在邊框和圖像之間填充。其次無法獲得發光效果。有什麼建議麼？

來源

2012-10-15 heron

圖像周圍沒有填充物 - 但圖像內有一個透明區域。您必須重新制作這些圖像才能擺脫未使用的透明區域。 – feeela

@feeela我們可以使用插入陰影的東西 – heron

如果使用'inset'陰影，外線不會褪色到背景，但是是一個清晰的邊框，而圓的內部部分淡出（但隱藏在圖像後面）。 – feeela

這樣的發光效果可以通過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/

來源

2012-10-15 16:02:00 feeela

圖像的所有填充首先是因爲圖片畫布My Fiddle

圖像與畫布裁剪

enter image description here

下面的CSS添加到.activeLang像效果，你的形象輝光...（Ofcourse，你可以改變顏色根據您的選擇）

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

而且從.activeLang

width: 32px; 
height: 32px;

來源

2012-10-15 16:02:31

請將您的代碼添加到帖子中。 –

那麼-1呢？ –

我在編輯我的答案 –

即使刪除使用邊框半徑，邊框不會進入元素內部。每個圖像文件邊緣的幾個像素強制圖像內容之外的邊框。

我建議編輯圖像去除間隔，甚至可以添加所有你想要對側翻的影響。

來源

2012-10-15 16:03:12 KatieK

拼合爲使問題更短的工作的一個例子：

<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-15 16:24:14

同樣的技術也可以擴展到使用hover規範進行鼠標懸停，但這至少會得到你所說的效果而沒有嘗試使用邊界半徑進行猜測（並處理其舊版IE的不兼容性）。 –

圓角PNG圖像邊緣發光效果

回答

相關問題