.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>

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

.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>

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

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

.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;
}