gpt4 book ai didi

html - 圆 Angular png图片边框发光效果

转载 作者:行者123 更新时间:2023-11-27 22:37:47 25 4
gpt4 key购买 nike

请看一下这个 fiddle :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 类图像实现一些不错的发光效果。第一个问题是,我在边框和图像本身之间填充。二是无法获得发光效果。有什么建议吗?

最佳答案

首先图像的填充是因为图像 Canvas My Fiddle

裁剪了 Canvas 的图像

enter image description here

将下面的 CSS 添加到 .activeLang 中,为您的图像添加发光效果...(当然,您可以根据自己的选择更改颜色)

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

并从 .activeLang 中删除

 width: 32px;
height: 32px;

关于html - 圆 Angular png图片边框发光效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12899317/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com