CSS ile nasıl şeffaf bir kenarlık yaparım?

liAşağıdaki gibi bir tarzım var :

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

liSınırın üzerine geldiğimde, lietrafında kaydırma yapmadan belirir . Görünmeyen bir 'sınır'a sahip olmak mümkün mü?

Renk olarak "şeffaf" kullanabilirsiniz. IE'nin bazı sürümlerinde bu siyah olarak çıkıyor, ancak IE6 günlerinden beri test etmedim.

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

Çoğunuz, şeffaf bir sınır yerine opak bir sınır için bir çözüm bulmak için buraya iniyor olmalısınız. Bu durumda rgba, nerede aduruyor kullanabilirsiniz alpha.

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

Demo

Burada, değiştirebilir opacityarasında bordergelen0-1

Sadece tam şeffaf sınır istiyorsanız, kullanımına en iyi şey transparentgibi,border: 1px solid transparent;

Kenarlığı kaldırabilir ve dolguyu artırabilirsiniz:

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 bu şimdiye kadar yaşadığım en iyi çözüm .. bu CSS3

aşağıdaki özelliği div'inizde veya sınır şeffaflığını koymak istediğiniz herhangi bir yerde kullanın

Örneğin

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

bu çalışacak..

Evet, kullanabilirsin border: 1px solid transparent

Başka bir çözüm outlinede belge akışını etkilemeyen fareyle üzerine gelindiğinde kullanmak (ve sınırı 0 olarak ayarlamaktır):

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

NB. Anahattı, tek tek taraflar için değil, yalnızca paylaşılan el özelliği olarak ayarlayabilirsiniz. Yalnızca hata ayıklama için kullanılması amaçlanmıştır, ancak güzel bir şekilde çalışır.

Bir yorumda ne kadar çok seçeneğiniz varsa o kadar iyi olduğunu söylediğinizden, işte bir tane daha.

CSS3'te iki farklı sözde "kutu modeli" vardır. Biri bir blok elemanının genişliğine sınır ve dolguyu eklerken, diğeri eklemez. İkincisini belirterek kullanabilirsiniz

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

Ardından, modern tarayıcılarda öğe her zaman aynı genişliğe sahip olacaktır. Yani, fareyle üzerine gelindiğinde bir sınır uygularsanız, sınırın genişliği öğenin toplam genişliğine eklenmez; sınır, tabiri caizse öğenin "içine" eklenecektir. Ancak, doğru hatırlıyorsam, widthbunun işe yaraması için açıkça belirtmelisiniz . Muhtemelen bu özel durumda sizin için bir seçenek değildir, ancak gelecekteki durumlar için aklınızda bulundurabilirsiniz.

Bu blog girişininborder-color: transparent IE6'da taklit etmenin bir yolu var . Aşağıdaki örnek, blog girişi yorumlarında ortaya çıkan "hasLayout" düzeltmesini içerir:

/* 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 düzeltmesinde kullanılan .testDivöğenin herhangi bir yerinde kullanılmadığından emin olun . Örneği yerine olarak pinkdeğiştirdim #FEFEFEçünkü kullanılması daha da az olası görünüyor.

Bunun en kolay çözümü rgbarenk olarak kullanmaktır : border-color: rgba(0,0,0,0);Bu tamamen şeffaf bordür rengidir.

Şeffaf özelliği kullanın

border-color : transparent;