web-dev-qa-db-ja.com

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

次のようなスタイルのliがあります。

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

liにカーソルを合わせると、liのシフトを行わずに境界線が表示されます。目に見えない「境界線」を持つことは可能ですか？

csstransparencyborder-color
94
William Calleja

「透明」を色として使用できます。 IEの一部のバージョンでは、黒で表示されますが、IE6の時代からテストしていません。

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

104
Douglas

透明な境界線の代わりに不透明な境界線の解決策を見つけるために、ここに上陸する必要があります。その場合、rgbaを使用できます。ここで、aはalphaを表します。

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

デモ

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

完全に透明な境界線が必要な場合は、border: 1px solid transparent;などのtransparentを使用するのが最適です。

46
Mr. Alien

境界線を削除して、パディングを増やすことができます。

    li{
        display:inline-block;
        padding:6px;
        border-width:0px;
    }
    li:hover{
        border:1px solid #FC0;
        padding:5px;
    }
<ul>
  <li>Hovering is great</li>
</ul>
30
Matt Ellen

ちょっとこれは私が今まで経験した中で最高のソリューションです。これはCSS3です

あなたのdivまたはあなたがボーダーtrasparentを置きたい場所に次のプロパティを使用してください

例えば.

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

これは動作します。

11
Raau

はい、border: 1px solid transparentを使用できます

別の解決策は、ホバーでoutlineを使用する（および境界線を0に設定する）ことです。これは、ドキュメントフローに影響しません。

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

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

4
DisgruntledGoat

あなたが持っているオプションが多ければ多いほど良いとコメントで言ったので、ここに別のオプションがあります。

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

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

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

3
ЯegDwight

このブログエントリ には、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に変更しました。使用される可能性がさらに低いようです。

2
Sonny

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

0
Jake Wilson