如何用CSS制作透明边框,使内容不会移位?[duplicate]

0md85ypi  于 2023-02-06  发布在  其他
关注(0)|答案(9)|浏览(104)
    • 此问题在此处已有答案**:

CSS hover border makes elements adjust slightly(14个答案)
5天前关闭。
我有一个li,样式如下:

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;
}

当我把鼠标悬停在li上时,边框出现了,但是li在移动。有没有可能让边框出现而不引起元素移动?就像有一个看不见的边框,然后悬停时让它出现一样?

u4vypkhs

u4vypkhs1#

你可以用“透明”作为颜色,在IE的一些版本中,它显示为黑色,但是自从IE6时代以来我就没有测试过它。
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

dly7yett

dly7yett2#

很多人一定是想找到一个解决不透明边框而不是透明边框的方法,在这种情况下,可以使用rgba,其中a代表alpha

.your_class {
    height: 100px;
    width: 100px;
    margin: 100px;
    border: 10px solid rgba(255,255,255,.5);
}

Demo
在这里,您可以将borderopacity0-1更改为
如果只是想要一个完全透明的边框,最好使用transparent,比如border: 1px solid transparent;

omjgkv6w

omjgkv6w3#

您可以删除边框并增加填充:

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}
<ul>
  <li>Hovering is great</li>
</ul>
5us2dqdw

5us2dqdw4#

嘿,这是我经历过的最好的解决方案。。这是CSS3
使用下面的属性到你的div或任何地方你想把边界透明
例如:

div_class { 
 border: 10px solid #999;
 background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}

这将工作..

jtw3ybtb

jtw3ybtb5#

是的,您可以使用border: 1px solid transparent
另一个解决方案是在悬停时使用outline(并将边框设置为0),这不会影响文档流:

li{
    display:inline-block;
    padding:5px;
    border:0;
}
li:hover{
    outline:1px solid #FC0;
}

注意:你只能将轮廓设置为一个sharhand属性,而不是单独的边。它只用于调试,但它工作得很好。

hs1rzwqc

hs1rzwqc6#

既然你在评论中说你有越多的选择越好,这里有另一个。
在CSS3中,有两种不同的所谓的“框模型”。一种添加边框和填充到块元素的宽度,而另一种不添加。您可以通过指定

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

然后,在现代浏览器中,元素将总是具有相同的宽度,即,如果你在悬停时应用一个边框,边框的宽度将不会添加到元素的总宽度中;可以说,边界将被添加到元素的“内部”。2然而,如果我没记错的话,你必须显式地指定width才能工作。3在这个特定的例子中,这可能不是你的选择,但是你可以在将来的情况下记住它。

piv4azn7

piv4azn77#

This blog entry可以在IE6中模拟border-color: transparent。下面的示例包括博客条目评论中提到的“hasLayout”修复:

/* transparent border */
.testDiv {
    width: 200px;
    height: 200px;
    border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
    zoom: 1;
    border-color: #FEFEFE;
    filter: chroma(color=#FEFEFE);
}

确保在IE6修复中使用的border-color没有在.testDiv元素中的任何地方使用。我将示例从pink更改为#FEFEFE,因为它似乎更不可能被使用。

ljo96ir5

ljo96ir58#

使用透明属性

border-color : transparent;
hwamh0ep

hwamh0ep9#

最简单的解决方案是使用rgba作为颜色:border-color: rgba(0,0,0,0);这是完全透明的边框颜色。

相关问题