CSSで透明な境界線を作成するにはどうすればよいですか？

私はli次のようなスタイルを持っています：

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

li境界線をホバーすると、li'をシフトせずに境界線が表示されます。見えない「ボーダー」を持つことは可能ですか？

色は「透明」が使えます。IEのいくつかのバージョンでは、それは黒く見えますが、IE6の日以来、私はそれをテストしていません。

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

透明な境界線ではなく不透明な境界線の解決策を見つけるには、多くの人がここに着陸している必要があります。あなたが使用することができ、その場合にはrgba、aの略ですalpha。

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

デモ

ここでは、変更できるopacityのをborderから0-1

あなたは、単に完全な透明国境をしたい場合は、使用する最善のことはあるtransparentように、border: 1px solid transparent;

ボーダーを削除してパディングを増やすことができます：

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

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

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

ねえ、これは私が今まで経験した中で最高のソリューションです。これはCSS3です

divまたは次のプロパティを使用して、境界線を透明にします

例えば

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

これは動作します。

うん、あなたは使うことができます border: 1px solid transparent

別の解決策はoutline、ドキュメントフローに影響を与えないホバーで使用することです（ボーダーを0に設定します）。

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

NB。輪郭は、個別の側面ではなく、シャードハンドプロパティとしてのみ設定できます。デバッグに使用することのみを目的としていますが、うまく機能します。

コメントであなたが持っているオプションは多いほど良いと言ったので、ここにもう一つあります。

CSS3には、2つの異なる「ボックスモデル」があります。1つはブロック要素の幅にボーダーとパディングを追加し、もう1つは追加しません。後者を指定することで使用できます

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

次に、最新のブラウザでは、要素は常に同じ幅になります。つまり、ホバー時にボーダーを適用すると、ボーダーの幅は要素の全体の幅に追加されません。境界線は、いわば要素の「内側」に追加されます。ただし、私が正しく覚えている場合width、これを機能させるには明示的に指定する必要があります。この特定のケースでは、これはおそらくオプションではありませんが、将来の状況に備えてそれを覚えておくことができます。

このブログエントリには、border-color: transparentIE6でエミュレートする方法があります。以下の例には、ブログエントリのコメントに含まれる「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);
}

border-colorIE6フィックスで使用されているが、.testDivエレメント内のどこでも使用されていないことを確認してください。私からの例を変更pinkする#FEFEFEことも少なく使用される可能性が高いようなので。

これに対する最も簡単な解決策はrgba、色として使用することです。border-color: rgba(0,0,0,0);これは完全に透明な境界線の色です。

透明なプロパティを使用する

border-color : transparent;