Jak utworzyć przezroczystą ramkę za pomocą CSS?

Mam listylizację następująco:

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

Kiedy najeżdżam kursorem na ligranicę, pojawia się bez liprzesuwania. Czy jest możliwe, aby „obramowanie” było niewidoczne?

Możesz użyć „przezroczystego” jako koloru. W niektórych wersjach IE pojawia się jako czarny, ale nie testowałem go od czasów IE6.

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

Wielu z was musi tu wylądować, aby znaleźć rozwiązanie dla nieprzezroczystej granicy zamiast przezroczystej. W takim przypadku możesz użyć rgba, gdzie aoznacza alpha.

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

Próbny

Tutaj można zmienić opacityz borderod0-1

Jeśli chcesz po prostu mieć całkowicie przezroczyste obramowanie, najlepiej użyć na transparentprzykładborder: 1px solid transparent;

Możesz usunąć obramowanie i zwiększyć dopełnienie:

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

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

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

hej, to najlepsze rozwiązanie, jakiego kiedykolwiek doświadczyłem .. to jest CSS3

użyj następującej własności do swojego div lub dowolnego miejsca, w którym chcesz umieścić border trasparent

na przykład

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

to zadziała ...

Tak, możesz użyć border: 1px solid transparent

Innym rozwiązaniem jest użycie outlinepo najechaniu (i ustawienie obramowania na 0), co nie wpływa na przepływ dokumentów:

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

NB. Kontur można ustawić tylko jako właściwość sharthand, a nie dla poszczególnych stron. Jest przeznaczony tylko do debugowania, ale działa dobrze.

Ponieważ powiedziałeś w komentarzu, że im więcej masz opcji, tym lepiej, oto kolejna.

W CSS3 istnieją dwa różne tak zwane „modele pudełkowe”. Jeden dodaje obramowanie i wypełnienie do szerokości elementu blokowego, a drugi nie. Możesz użyć tego ostatniego, określając

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

Wtedy w nowoczesnych przeglądarkach element będzie zawsze miał tę samą szerokość. To znaczy, jeśli zastosujesz do niego obramowanie po najechaniu kursorem, szerokość obramowania nie zwiększy całkowitej szerokości elementu; ramka zostanie dodana „wewnątrz” elementu, że tak powiem. Jeśli jednak dobrze pamiętam, musisz widthwyraźnie określić, aby to zadziałało. Co prawdopodobnie nie jest dla Ciebie opcją w tym konkretnym przypadku, ale możesz o tym pamiętać w przyszłych sytuacjach.

Ten wpis na blogu ma sposób na emulację border-color: transparentw IE6. Poniższy przykład zawiera poprawkę „hasLayout”, która pojawia się w komentarzach do wpisu na blogu:

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

Upewnij się, że border-colorzastosowana w poprawce IE6 nie jest używana w żadnym miejscu .testDivelementu. Zmieniłem przykład z pinkna, #FEFEFEponieważ wydaje się, że jest to jeszcze mniej prawdopodobne.

Najłatwiejszym rozwiązaniem jest użycie rgbajako koloru: border-color: rgba(0,0,0,0);jest to całkowicie przezroczysty kolor obramowania.

Użyj właściwości przezroczystej

border-color : transparent;