Ik heb een liin de volgende stijl:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
Als ik de muisaanwijzer over de libeweeg, verschijnt de rand zonder de verschuiving van de lite maken. Is het mogelijk om een ‘grens’ te hebben die niet zichtbaar is?
Antwoord 1, autoriteit 100%
Je kunt ‘transparant’ als kleur gebruiken. In sommige versies van IE wordt dat zwart weergegeven, maar ik heb het sinds de IE6-dagen niet meer uitgeprobeerd.
http://www.researchkitchen.de/blog/archives/ css-bordercolor-transparent.php
Antwoord 2, autoriteit 48%
Velen van jullie moeten hier landen om een oplossing te vinden voor een ondoorzichtige rand in plaats van een transparante. In dat geval kun je rgbagebruiken, waarbij astaat voor alpha.
.your_class {
height: 100px;
width: 100px;
margin: 100px;
border: 10px solid rgba(255,255,255,.5);
}
Hier kunt u de opacityvan de borderwijzigen van 0-1
Als u gewoon een volledig transparante rand wilt, kunt u het beste transparentgebruiken, zoals border: 1px solid transparent;
Antwoord 3, autoriteit 31%
Je zou de rand kunnen verwijderen en de opvulling kunnen vergroten:
li {
display: inline-block;
padding: 6px;
border-width: 0px;
}
li:hover {
border: 1px solid #FC0;
padding: 5px;
}<ul>
<li>Hovering is great</li>
</ul>Antwoord 4, autoriteit 14%
hey, dit is de beste oplossing die ik ooit heb meegemaakt.. dit is CSS3
gebruik de volgende eigenschap voor uw div of waar u de grens transparant wilt maken
bijv.
div_class {
border: 10px solid #999;
background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}
dit zal werken..
Antwoord 5, autoriteit 4%
Ja, je kunt border: 1px solid transparent
Een andere oplossing is om outlinete gebruiken bij de muisaanwijzer (en de rand op 0 te zetten), wat geen invloed heeft op de documentstroom:
li{
display:inline-block;
padding:5px;
border:0;
}
li:hover{
outline:1px solid #FC0;
}
NB. U kunt de omtrek alleen instellen als een sharthand-eigenschap, niet voor afzonderlijke zijden. Het is alleen bedoeld om te worden gebruikt voor foutopsporing, maar het werkt goed.
Antwoord 6, autoriteit 3%
Omdat je in een opmerking zei dat hoe meer opties je hebt, hoe beter, hier nog een.
In CSS3 zijn er twee verschillende zogenaamde “boxmodellen”. De ene voegt de rand en opvulling toe aan de breedte van een blokelement, terwijl de andere dat niet doet. U kunt de laatste gebruiken door op te geven
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
In moderne browsers heeft het element dan altijd dezelfde breedte. D.w.z. als u er een rand op toepast tijdens het zweven, zal de breedte van de rand niet bijdragen aan de totale breedte van het element; de rand wordt als het ware “binnen” het element toegevoegd. Als ik het me echter goed herinner, moet je de widthexpliciet specificeren om dit te laten werken. Wat in dit specifieke geval waarschijnlijk geen optie voor je is, maar je kunt het in gedachten houden voor toekomstige situaties.
Antwoord 7, autoriteit 2%
Dit blogbericht heeft een manier om border-color: transparentin IE6 te emuleren. Het onderstaande voorbeeld bevat de “hasLayout”-oplossing die wordt genoemd in de opmerkingen bij het blogbericht:
/* transparent border */
.testDiv {
width: 200px;
height: 200px;
border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
zoom: 1;
border-color: #FEFEFE;
filter: chroma(color=#FEFEFE);
}
Zorg ervoor dat de border-colordie in de IE6-fix wordt gebruikt, nergens in het element .testDivwordt gebruikt. Ik heb het voorbeeld gewijzigd van pinkin #FEFEFEomdat het nog minder waarschijnlijk lijkt dat dit wordt gebruikt.
Antwoord 8
Gebruik transparante eigenschap
border-color : transparent;
Antwoord 9
De eenvoudigste oplossing hiervoor is om rgbaals kleur te gebruiken: border-color: rgba(0,0,0,0);Dat is een volledig transparante rand kleur.