Come creo un bordo trasparente con i CSS?

Ho uno listile come segue:

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

Quando passo il mouse sopra il libordo appare senza fare lo lispostamento di intorno. È possibile avere un "bordo" non visibile?

Puoi usare "trasparente" come colore. In alcune versioni di IE, appare nero, ma non l'ho testato dai giorni di IE6.

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

Molti di voi devono essere atterrati qui per trovare una soluzione per il bordo opaco invece di uno trasparente. In quel caso puoi usare rgba, dove asta per alpha.

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

dimostrazione

Qui puoi modificare opacityil borderda0-1

Se vuoi semplicemente un bordo trasparente completo, la cosa migliore da usare è transparent, comeborder: 1px solid transparent;

Puoi rimuovere il bordo e aumentare l'imbottitura:

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

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

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

hey questa è la migliore soluzione che abbia mai provato .. questo è CSS3

usa la proprietà seguente al tuo div o ovunque tu voglia mettere un bordo trasparente

per esempio

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

questo funzionerà ..

Sì, puoi usare border: 1px solid transparent

Un'altra soluzione è usare outlineal passaggio del mouse (e impostare il bordo su 0) che non influisce sul flusso del documento:

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

NB. È possibile impostare il contorno solo come proprietà di marcatura e non per i singoli lati. È pensato solo per essere usato per il debug ma funziona bene.

Dato che hai detto in un commento che più opzioni hai, meglio è, eccone un'altra.

In CSS3, ci sono due diversi cosiddetti "box model". Uno aggiunge il bordo e il riempimento alla larghezza di un elemento di blocco, mentre l'altro no. Puoi usare quest'ultimo specificando

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

Quindi, nei browser moderni, l'elemento avrà sempre la stessa larghezza. Ad esempio, se si applica un bordo al passaggio del mouse, la larghezza del bordo non si aggiungerà alla larghezza complessiva dell'elemento; il bordo verrà aggiunto "all'interno" dell'elemento, per così dire. Tuttavia, se ricordo bene, è necessario specificare widthesplicitamente perché funzioni. Che probabilmente non è un'opzione per te in questo caso particolare, ma puoi tenerlo a mente per situazioni future.

Questa voce di blog ha un modo per emulare border-color: transparentin IE6. L'esempio seguente include la correzione "hasLayout" visualizzata nei commenti del post di blog:

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

Assicurati che l' border-colorusato nella correzione di IE6 non sia usato da nessuna parte .testDivnell'elemento. Ho cambiato l'esempio da pinka #FEFEFEperché sembra ancora meno probabile che venga utilizzato.

La soluzione più semplice è usare rgbacome colore: border-color: rgba(0,0,0,0);questo è il colore del bordo completamente trasparente.

Usa proprietà trasparente

border-color : transparent;