Bagaimana cara membuat bingkai transparan dengan CSS?

Saya memiliki ligaya sebagai berikut:

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

Ketika saya mengarahkan kursor ke liperbatasan muncul tanpa membuat lipergeseran. Mungkinkah memiliki 'perbatasan' yang tidak terlihat?

Anda dapat menggunakan "transparan" sebagai warna. Di beberapa versi IE, itu muncul sebagai hitam, tetapi saya belum mengujinya sejak IE6 hari.

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

Banyak dari Anda harus mendarat di sini untuk menemukan solusi untuk batas buram, bukan yang transparan. Dalam hal ini Anda dapat menggunakan rgba, di mana asingkatan alpha.

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

Demo

Di sini, Anda dapat mengubah opacitydari borderdari0-1

Jika Anda hanya ingin bingkai transparan lengkap, hal terbaik untuk digunakan adalah transparent, likeborder: 1px solid transparent;

Anda dapat menghapus perbatasan dan menambah bantalan:

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 ini adalah solusi terbaik yang pernah saya alami .. ini CSS3

gunakan properti berikut ke div Anda atau di mana pun Anda ingin meletakkan border trasparent

misalnya

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

ini akan berhasil ..

Ya, Anda bisa menggunakan border: 1px solid transparent

Solusi lain adalah menggunakan outlinesaat mengarahkan kursor (dan menyetel batas ke 0) yang tidak memengaruhi aliran dokumen:

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

NB. Anda hanya dapat mengatur garis luar sebagai properti sharthand, bukan untuk masing-masing sisi. Ini hanya dimaksudkan untuk digunakan untuk debugging tetapi berfungsi dengan baik.

Karena Anda mengatakan dalam komentar bahwa semakin banyak opsi yang Anda miliki, semakin baik, inilah satu lagi.

Di CSS3, ada dua yang disebut "model kotak". Satu menambahkan border dan padding ke lebar elemen blok, sedangkan yang lainnya tidak. Anda dapat menggunakan yang terakhir dengan menentukan

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

Kemudian, di browser modern, elemen akan selalu memiliki lebar yang sama. Yaitu, jika Anda menerapkan perbatasan padanya saat melayang, lebar perbatasan tidak akan menambah lebar keseluruhan elemen; perbatasan akan ditambahkan "di dalam" elemen, jadi untuk berbicara. Namun, jika saya ingat dengan benar, Anda harus menentukan widthsecara eksplisit agar ini berfungsi. Yang mungkin bukan pilihan untuk Anda dalam kasus khusus ini, tetapi Anda dapat mengingatnya untuk situasi mendatang.

Entri blog ini memiliki cara untuk ditiru border-color: transparentdi IE6. Contoh di bawah ini mencakup perbaikan "hasLayout" yang muncul di komentar entri 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);
}

Pastikan bahwa border-colordigunakan dalam perbaikan IE6 tidak digunakan di mana pun dalam .testDivelemen. Saya mengubah contoh dari pinkmenjadi #FEFEFEkarena tampaknya lebih kecil kemungkinannya untuk digunakan.

Solusi termudah untuk ini adalah dengan menggunakan rgbasebagai warna: border-color: rgba(0,0,0,0);Itu adalah warna perbatasan transparan sepenuhnya.

Gunakan properti transparan

border-color : transparent;