CSS（JQUERY）：图标周围的边框
[英]CSS (JQUERY): border around icon
问题描述
When large icons are used a border is visible around the icon area.
使用大图标时，图标区域周围会出现边框。
I have tried:
.ui-icon {
border: none;
}
That was not the solution. 那不是解决方案。 Any ideas or can you point me in the right direction? 有什么想法或您能指出我正确的方向吗？
<head>
<style type="text/css">
<!--
.ui-icon-green5{
background-image: url(green_05_64x64.png);
}
.ui-icon {
background-color: transparent;
width: 64px;
height: 64px;
border: none;
margin-top:150px;
margin-left:150px;
}
a{
line-height: 600px;
}
-->
</head>
<body>
<div id="content2" style="background-color:#000000;height:400px;width:400px;float:left;">
<a data-theme="a" id="start-button" data-iconpos="top" data-icon="green5"
data-role="button"
href="index.html"
data-corners="false">LIVINGROOM</a>
</div>
</body>
3 个解决方案
解决方案1
1 2012-08-08 21:35:43
try 尝试
.ui-icon {
border: 0 !important;
}
if that does not work, the border got to be on the png itself 如果这不起作用，则边框必须位于png本身上
解决方案2
0 2012-08-08 21:35:56
I am not entirely sure what causes this problem. 我不完全确定是什么导致了此问题。 I might be worth though to set the outline to none as well, instead of only the border. 我可能也值得将轮廓线设置为无框线，而不仅仅是边框。 Some browsers, like chrome, might use this to indicate the focus of an element (though i don't recall seeing it happen on a link, only on input fields). 某些浏览器（例如chrome）可能会使用它来指示元素的焦点（尽管我不记得看到它发生在链接上，仅发生在输入字段上）。 Another thing that might be worth checking is wheter this is not actully an artefact in your image. 可能值得检查的另一件事是，这实际上不是图像中的伪像。 It might be that you have a fade to white at the edges, are you may have sliced it incorrctly. 可能是您的边缘渐渐变为白色，或者您将其切得不正确。 Putting it over a black background in a Photoshop like programm should show this immediatly. 将其放在像programm这样的Photoshop中的黑色背景上应该立即显示出来。
Also i don't know what all this data attributes are for, suppose they have something to do with some jQuery plugin you use. 我也不知道所有这些数据属性是干什么的，假设它们与您使用的某些jQuery插件有关。 Anyway, I would set a class of ui-icon to your link to make sure the border: none (and outline: none ) definitly get applied, as from the current snippet i can't say they do. 无论如何，我会为您的链接设置一类ui-icon，以确保明确应用边框：none（和轮廓：none），因为从当前代码段中我无法说出它们是这样做的。
解决方案3
0 2012-08-09 06:54:15
-webkit-box-shadow: none; -webkit-box-shadow：无；
This solves the problem. 这样就解决了问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.