Omtrekstraal?

Is er hoe dan ook afgeronde hoekenop de omtrekvan een div element, vergelijkbaar met border-radius?


Antwoord 1, autoriteit 100%

Oude vraag nu, maar dit kan relevant zijn voor iemand met een soortgelijk probleem. Ik had een invoerveld met een afgeronde borderen wilde de kleur van de focusomtrek wijzigen. Ik kon de afschuwelijke vierkante omtrek van de invoerbesturing niet temmen.

Dus in plaats daarvan gebruikte ik box-shadow. Ik gaf eigenlijk de voorkeur aan het gladde uiterlijk van de schaduw, maar de schaduw kan worden verhard om een ​​ronde omtrek te simuleren:

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline: none;
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}
/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}
<input class="text1"> 
<br>
<br>
<input type=text class="text2">

Antwoord 2, autoriteit 15%

Ik doe dit meestal met het :after pseudo-element:

het hangt natuurlijk af van het gebruik, deze methode biedt controle over individuele randen, in plaats van de harde schaduwmethode te gebruiken.

u kunt ook -1px-offsets instellen en opnieuw een lineair verloop op de achtergrond (geen rand) gebruiken voor een ander effect.

body {
  margin: 20px;
}
a {
  background: #999;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  position: relative;
  border: 2px solid #000;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  border: 2px solid #ccc;
}
<a href="#">Button</a>

Antwoord 3, autoriteit 7%

Vergelijkbaar met Lea Hayes hierboven, maar hier is hoe ik het deed:

div {
  background: #999;
  height: 100px;
  width: 200px;
  border: #999 solid 1px;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0px 0px 0px 1px #fff inset;
}
<div></div>

Antwoord 4, autoriteit 4%

Gebruik deze:
box-shadow: 0px 0px 0px 1px red;


Antwoord 5, autoriteit 3%

Ik wilde een goede focustoegankelijkheid voor vervolgkeuzemenu’s in een Bootstrap-navigatiebalk en was hier best blij mee:

    a.dropdown-toggle:focus {
         display: inline-block;
         box-shadow: 0 0 0 2px #88b8ff;
         border-radius: 2px;
     }
<a href="https://stackoverflow.com" class="dropdown-toggle">Visit Stackoverflow</a>

Antwoord 6, autoriteit 3%

We kunnen onze wensen snel zien door outline-style: autoin te stellen. Het staat op de radar van WebKits: http://trac.webkit.org/changeset/198062/webkit

Tot ziens in 2030.


Antwoord 7, autoriteit 2%

Je zoekt zoiets als dit, denk ik.

div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #CCC;
    height: 100px;
    width: 160px;
}

Bewerken

Er is een Firefox-only -moz-outline-radiuscorrect, maar dat werkt niet op IE/Chrome/Safari/Opera/etc. Het lijkt er dus op dat de meest cross-browser-compatibele manier*om een ​​gebogen lijn rond een rand te krijgen, is om een ​​wrapper div te gebruiken:

div.inner {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid black;
  background-color: #CCC;
  height: 100px;
  width: 160px;
}
div.outer {
  display: inline-block;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid red;
}
<div class="outer">
  <div class="inner"></div>
</div>

Antwoord 8

Ik heb hier zojuist een geweldige oplossing voor gevonden en na alle reacties tot nu toe te hebben bekeken, heb ik het nog niet gezien. Dus, dit is wat ik deed:

Ik heb een CSS-regel voor de klasse gemaakt en een pseudo-klasse van :focus voor die regel gebruikt. Ik heb outline: noneingesteld om die standaard lichtblauwe ‘outline’ die Chrome standaard gebruikt te verwijderen. Vervolgens heb ik in diezelfde :focuspseudo-klasse, waar die omtrek niet meer bestaat, mijn radius- en randeigenschappen toegevoegd. Dit leidt tot het volgende

outline: none;
border-radius: 5px;
border: 2px solid maroon;

om een ​​kastanjebruine omtrek te hebben met een randradius die nu verschijnt wanneer het element door de gebruiker op het tabblad wordt geselecteerd.


Antwoord 9

Voor zover ik weet, wordt de Outline radiusalleen ondersteund door Firefox en Firefox voor Android.
(juli 2021)

-moz-outline-radius: 1em;

voer hier de afbeeldingsbeschrijving in


Antwoord 10

Firefox 88+: grensradius

Vanaf april 2021 kunt u een eenvoudige CSS voor Firefox gebruiken:

.actual {
  outline: solid red;
  border-radius: 10px;
}
.expected {
  border: solid red;
  border-radius: 10px;
}
In Firefox 88+,
<span class="actual">this outline</span>
should look like
<span class="expected">this border</span>

Antwoord 11

Als u een reliëflook wilt, kunt u zoiets als het volgende doen:

.embossed {
  background: #e5e5e5;
  height: 100px;
  width: 200px;
  border: #FFFFFF solid 1px;
  outline: #d0d0d0 solid 1px;
  margin: 15px;
}
.border-radius {
  border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
}
.outline-radius {
  -moz-outline-radius: 21px;
}
<div class="embossed"></div>
<div class="embossed border-radius"></div>
<div class="embossed border-radius outline-radius">-MOZ ONLY</div>

Antwoord 12

Zoals anderen al hebben gezegd, ondersteunt alleen Firefox dit. Hier is een work around die hetzelfde doet, en zelfs werkt met gestippelde contouren.

voorbeeld

.has-outline {
    display: inline-block;
    background: #51ab9f;
    border-radius: 10px;
    padding: 5px;
    position: relative;
}
.has-outline:after {
  border-radius: 10px;
  padding: 5px;
  border: 2px dashed #9dd5cf;
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
}
<div class="has-outline">
  I can haz outline
</div>

Antwoord 13

Nee. Randen zitten aan de buitenkant van het element en aan de binnenkant van het margegebied van het doosmodel. Contouren zitten aan de binnenkant van het element en het opvulgebied van het doosmodel negeert het. Het is niet bedoeld voor esthetiek. Het is gewoon om de ontwerper de contouren van de elementen te laten zien. In de vroege stadia van het ontwikkelen van een html-document kan een ontwikkelaar bijvoorbeeld snel moeten vaststellen of alle skelet-div’s op de juiste plaats zijn geplaatst. Later moeten ze misschien controleren of verschillende knoppen en vormen het juiste aantal pixels van elkaar verwijderd zijn.

Randen zijn esthetisch van aard. In tegenstelling tot contouren zijn ze eigenlijk apart van het doosmodel, wat betekent dat ze de tekst niet overlappen die is ingesteld op marge: 0; en elke kant van de rand kan individueel worden gestyled.

Als u een hoekradius probeert toe te passen op omtreklijnen, neem ik aan dat u deze gebruikt zoals de meeste mensen rand gebruiken. Dus als je het niet erg vindt dat ik het vraag, welke eigenschap van omtrek maakt het wenselijk over de grens?


Antwoord 14

Er is de oplossing als u alleen een omtrek zonder rand nodig heeft. Het is niet van mij. Ik heb if van Bootstrap css-bestand. Als u outline: 1px auto certain_coloropgeeft, krijgt u een dunne buitenste lijn rond de div van een bepaalde kleur. In dit geval maakt de opgegeven breedte niet uit, zelfs als u een breedte van 10 px opgeeft, zal het hoe dan ook een dunne lijn zijn. Het sleutelwoord in de genoemde regel is “auto”.
Als u een omtrek met afgeronde hoeken en een bepaalde breedte nodig heeft, kunt u een CSS-regel aan de rand toevoegen met de benodigde breedte en dezelfde kleur. Het maakt de omtrek dikker.


Antwoord 15

COMBINATIE VAN DOOS SCHADUW EN OVERZICHT.

Een kleine draai aan het antwoord van Lea Hayes
Ik heb

. gevonden

input[type=text]:focus {
    box-shadow: 0 0 0 1pt red;
    outline-width: 1px;
    outline-color: red;
}

krijgt een heel mooie, schone afwerking. Geen sprongen in grootte die je krijgt bij het gebruik van border-radius


Antwoord 16

Ik maakte aangepaste keuzerondjes en de beste aanpasbare manier die ik heb gevonden is het gebruik van pseudo-elementen zoals deze: Codepen

/*CSS is compiled from SCSS*/
.product-colors {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
}
.product-colors label {
  position: relative;
  width: 2.1em;
  height: 2.1em;
  margin-right: 0.8em;
  cursor: pointer;
}
.product-colors label:before {
  opacity: 0;
  width: inherit;
  height: inherit;
  padding: 2px;
  border: 2px solid red;
  border-radius: 0.2em;
  content: "";
  position: absolute;
  z-index: 1;
  background: transparent;
  top: -4px;
  left: -4px;
}
.product-colors input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.product-colors input:checked + label:before, .product-colors input:focus + label:before {
  opacity: 1;
}
<div class="product-colors">
  <input type="radio" name="cs" id="cs1" value="black">
  <label for="cs1" style="background:black"></label>
  <input type="radio" name="cs" id="cs2" value="green">
  <label for="cs2" style="background:green"></label>
  <input type="radio" name="cs" id="cs3" value="blue">
  <label for="cs3" style="background:blue"></label>
  <input type="radio" name="cs" id="cs4" value="yellow">
  <label for="cs4" style="background:yellow"></label>
</div>

Antwoord 17

clip-path: circle(100px at center);

Hiermee wordt alleen een cirkel klikbaar, terwijl border-radius nog steeds een vierkant maakt, maar eruitziet als een cirkel.


Antwoord 18

Het simpele antwoord op de basisvraag is nee. De enige optie voor meerdere browsers is om een ​​hack te maken die doet wat je wilt. Deze aanpak brengt bepaalde potentiële problemen met zich mee als het gaat om het opmaken van reeds bestaande inhoud, maar het biedt meer aanpassing van de omtrek (offset, breedte, lijnstijl) dan veel van de andere oplossingen.

Beschouw op een basisniveau het volgende statische voorbeeld (voer het fragment uit voor demo):

.outline {
    border: 2px dotted transparent;
    border-radius: 5px;
    display: inline-block;
    padding: 2px;
    margin: -4px;
}
/* :focus-within does not work in Edge or IE */
.outline:focus-within, .outline.edge {
    border-color: blue;
}
br {
    margin-bottom: 0.75rem;
}
<h3>Javascript-Free Demo</h3>
<div class="outline edge"><input type="text" placeholder="I always have an outline"/></div><br><div class="outline"><input type="text" placeholder="I have an outline when focused"/></div> *<i>Doesn't work in Edge or IE</i><br><input type="text" placeholder="I have never have an outline" />
<p>Note that the outline does not increase the spacing between the outlined input and other elements around it. The margin (-4px) compensates for the space that the outlines padding (-2px) and width (2px) take up, a total of 4px.</p>

Antwoord 19

Probeer opvulling en een achtergrondkleur voor de rand te gebruiken en vervolgens een rand voor de omtrek:

.round_outline {
  padding: 8px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
}

Werkte in mijn geval.


Antwoord 20

Ik heb de omtrek gewoon transparant gemaakt.

input[type=text] {
  outline: rgba(0, 0, 0, 0);
  border-radius: 10px;
}
input[type=text]:focus {    
  border-color: #0079ff;
}

Antwoord 21

Ik hou van deze manier.

.circle:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 3px solid #fff;
   background-color: #ced4da;
   border-radius: 7px;
   display: inline-block;
   margin-bottom: -2px;
   margin-right: 7px;
   box-shadow: 0px 0px 0px 1px #ced4da;
}

Het zal een grijze cirkel maken met een witte rand eromheen en opnieuw 1px rond de rand!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes