如何使用 CSS 制作透明边框以使内容不会移动位置？

发布于 2024-08-26 00:27:54 字数 284 浏览 3 评论 0原文

我有一个 li 样式如下：

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

当我将鼠标悬停在 li 上时，会出现边框，但 li 会左右移动。是否可以在不导致元素移动的情况下出现边框？几乎就像有一个看不见的边框，然后悬停时让它出现？

原文

I have an li styled as follows:

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

When I hover over the li the border appears, but the li's shift around. Is it possible to have the border appear without causing the element to shift? Almost like having an invisible border, and then on hover make it appear?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月下凄凉 2024-09-02 00:27:54

您可以使用“透明”作为颜色。在某些版本的 IE 中，它显示为黑色，但自 IE6 以来我就没有测试过它。

border: 10px solid transparent;

链接< /a> 至 Researchkitchen.de 上的存档博客文章。

MDN 作为特殊关键字值。

You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.

border: 10px solid transparent;

Link to archived blog post on researchkitchen.de.

As a color, "transparent" is mentioned on MDN as a special keyword value.

回复收藏 0 原文

只想待在家 2024-09-02 00:27:54

你们中的许多人一定来到这里寻找一种部分透明边框而不是透明边框的解决方案。在这种情况下，您可以使用rgba，其中a代表alpha。

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

演示

在这里，您可以更改不透明度 border from 0-1

如果你只是想要一个完全透明的边框，最好使用 transparent，如 border： 1px实心透明；

Many of you must be landing here to find a solution for partially transparent border instead of a transparent one. In that case you can use rgba, where a stands for alpha.

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

Demo

Here, you can change the opacity of the border from 0-1

If you simply want a complete transparent border, the best thing to use is transparent, like border: 1px solid transparent;

回复收藏 0 原文

柒夜笙歌凉 2024-09-02 00:27:54

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

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

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

You could remove the border and increase the padding:

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

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

回复收藏 0 原文

oО清风挽发oО 2024-09-02 00:27:54

嘿，这是我经历过的最好的解决方案..这是CSS3，

在你的div或任何你想放置边框透明的地方使用以下属性

，例如

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

这会起作用..

hey this is the best solution I ever experienced.. this is CSS3

use following property to your div or anywhere you wanna put border trasparent

e.g.

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

this will work..

回复收藏 0 原文

月野兔 2024-09-02 00:27:54

是的，您可以使用 border: 1px Solid transparent

另一种解决方案是在悬停时使用 outline （并将边框设置为 0），这不会影响文档流：

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

NB 。您只能将轮廓设置为Sharthand 属性，而不能将其设置为单独的边。它仅用于调试，但效果很好。

Yep, you can use border: 1px solid transparent

Another solution is to use outline on hover (and set the border to 0) which doesn't affect the document flow:

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

NB. You can only set the outline as a sharthand property, not for individual sides. It's only meant to be used for debugging but it works nicely.

回复收藏 0 原文

倾城°AllureLove 2024-09-02 00:27:54

既然您在评论中说选择越多越好，那么这里是另一个。

在 CSS3 中，有两种不同的所谓“盒子模型”。一种将边框和填充添加到块元素的宽度，而另一种则不添加。您可以通过指定使用后者。

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

然后，在现代浏览器中，元素将始终具有相同的宽度。即，如果您在悬停时对其应用边框，则边框的宽度不会添加到元素的整体宽度中；可以这么说，边框将添加到元素“内部”。但是，如果我没记错的话，您必须显式指定 width 才能使其正常工作。在这种特殊情况下，这可能不适合您，但您可以在将来的情况下记住它。

Since you said in a comment that the more options you have, the better, here's another one.

In CSS3, there are two different so-called "box models". One adds the border and padding to the width of a block element, while the other does not. You can use the latter by specifying

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

Then, in modern browsers, the element will always have the same width. I.e., if you apply a border to it on hover, the width of the border will not add to the overall width of the element; the border will be added "inside" the element, so to speak. However, if I remember correctly, you must specify the width explicitly for this to work. Which is probably not an option for you in this particular case, but you can keep it in mind for future situations.

回复收藏 0 原文

叹梦 2024-09-02 00:27:54

此博客条目有一种方法可以在 IE6 中模拟 border-color:透明。以下示例包括博客条目评论中提出的“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，因为这似乎更不可能被使用。

This blog entry has a way to emulate border-color: transparent in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:

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

Make sure that the border-color used in the IE6 fix is not used anywhere in the .testDiv element. I changed the example from pink to #FEFEFE because that seems even less likely to be used.

回复收藏 0 原文