blocks|key|1079986|text|你可以使用“透明”作为颜色。在IE的一些版本中，它是黑色的，但自从IE6时代以来，我就没有测试过它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079987|http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php|offset|length|1079988|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|23|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

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.

<a href="http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php" rel="noreferrer">http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php</a>

blocks|key|1295007|text|您可以删除边框并增加填充：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1295008|​|1295009|li+{
++display:+inline-block;
++padding:+6px;
++border-width:+0px;
}

li:hover+{
++border:+1px+solid+#FC0;
++padding:+5px;
}|code-block|syntax|javascript|1295010|<ul>
++<li>Hovering+is+great</li>
</ul>|1295011|1295012|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

You could remove the border and increase the padding:

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>li {
 display: inline-block;
 padding: 6px;
 border-width: 0px;
}

li:hover {
 border: 1px solid #FC0;
 padding: 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
 &lt;li&gt;Hovering is great&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>

blocks|key|1080175|text|嘿，这是我经历过的最好的解决方案..这是CSS3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1080176|将以下属性用于div或要透明放置边框的任何位置|1080177|例如：|1080178|div_class+{+
+border:+10px+solid+#999;
+background-clip:+padding-box;+/*+Firefox+4%2B,+Opera,+for+IE9%2B,+Chrome+*/
}|code-block|syntax|javascript|1080179|这将会起作用..|1080180|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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.

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

this will work..

blocks|key|1295065|text|是的，你可以使用border:+1px+solid+transparent|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1295066|另一种解决方案是在悬停时使用outline+(并将边框设置为0)，这不会影响文档流：|1295067|li{
++++display:inline-block;
++++padding:5px;
++++border:0;
}
li:hover{
++++outline:1px+solid+#FC0;
}|code-block|syntax|javascript|1295068|注意：您只能将轮廓设置为sharthand属性，而不能将其设置为单个边。它只用于调试，但它工作得很好。|1295069|entityMap^0|8|T|0|E|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

Yep, you can use <code>border: 1px solid transparent</code>

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

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

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.

blocks|key|1080095|text|既然你在评论中说过，你的选择越多越好，下面是另一个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1080096|在CSS3中，有两种不同的所谓“盒子模型”。一个向块元素的宽度添加边框和填充，而另一个则不添加。您可以使用后者，方法是指定|1080097|-webkit-box-sizing:+border-box;
-moz-box-sizing:+border-box;
-ms-box-sizing:+border-box;
box-sizing:+border-box;|code-block|syntax|javascript|1080098|然后，在现代浏览器中，元素将始终具有相同的宽度。也就是说，如果您在悬停时对其应用边框，边框的宽度将不会增加到元素的整体宽度；可以说，边框将添加到元素的“内部”。但是，如果我没记错的话，您必须显式指定width才能使其工作。在这种特殊情况下，这可能不是您的选择，但您可以在将来的情况下牢记这一点。|offset|length|style|CODE|1080099|entityMap^0|0|0|0|2R|5|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

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

<pre><code>-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
</code></pre>

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 <code>width</code> 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.

blocks|key|1295177|text|This+blog+entry有一种在IE6中模拟border-color:+transparent的方法。下面的示例包括博客条目评论中显示的"hasLayout“修复：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1295178|/*+transparent+border+*/
.testDiv+{
++++width:+200px;
++++height:+200px;
++++border:+solid+10px+transparent;
}
/*+IE6+fix+*/
*html+.testDiv+{
++++zoom:+1;
++++border-color:+#FEFEFE;
++++filter:+chroma(color=#FEFEFE);
}|code-block|syntax|javascript|1295179|确保在IE6修复中使用的border-color没有在.testDiv元素中的任何地方使用。我将示例从pink更改为#FEFEFE，因为它似乎更不可能被使用。|1295180|entityMap|0|LINK|mutability|MUTABLE|url|http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/^0|P|P|0|F|0|0|0|C|C|R|8|1F|4|1M|7|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<a href="http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/" rel="nofollow">This blog entry</a> has a way to emulate <code>border-color: transparent</code> in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:

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

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

blocks|key|1295262|text|使用透明属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1295263|border-color+:+transparent;|code-block|syntax|javascript|1295264|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use transparent property 

<pre><code>border-color : transparent;
</code></pre>

blocks|key|1080218|text|最简单的解决方案是使用rgba作为颜色：border-color:+rgba(0,0,0,0);，它是完全透明的边框颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1080219|entityMap^0|B|4|K|S|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

The easiest solution to this is to use <code>rgba</code> as the color: <code>border-color: rgba(0,0,0,0);</code> That is fully transparent border color.

I have an <code>li</code> styled as follows:

<pre><code>li{
 display:inline-block;
 padding:5px;
 border:1px solid none;
}
li:hover{
 border:1px solid #FC0;
}
</code></pre>

When I hover over the <code>li</code> the border appears without making the <code>li</code>'s shift around. Is it possible to have a 'border' that's not visible?

How do I make a transparent border with CSS?

我有一个样式如下的li：li{    display:inline-block;    padding:5px;    border:1px solid none;}li:hover{    border:1px solid #FC0;}当我将鼠标悬停在li上时，边框就会出现，而不会让li移动。有没有可能有一个看不见的“边框”？

问如何使用CSS创建透明边框？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS创建透明边框？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS创建透明边框？
EN