Wie kann ich diesen gezackten Rand korrigieren, den ich bekomme, wenn ich einen CSS-Rahmen an einen Kippschalter anwende?

Ich habe diesen Kippschalter, den ich in meine Website bringen möchte.Wie kann ich diesen gezackten Rand korrigieren, den ich bekomme, wenn ich einen CSS-Rahmen an einen Kippschalter anwende?

https://jsfiddle.net/njxfnfoa/

<div class="switch-container"> 
    <label class="switch"> 
     <input type="checkbox"> 
     <div class="slider round"></div> 
    </label> 
</div>

Und die CSS ist lang, also werde ich nur, dass halten in der JSFiddle.

Wie Sie jedoch sehen können, sieht es ziemlich gezackt aus. Das PDF-Design, an dem ich arbeite, sieht so aus.

Wie kann ich diese glatte Grenze besser replizieren?

Quelle

2017-06-09 Geesh_SO

Hängt vom Bildschirm/Computer ab, ich bin auf einem MacBook Pro und es sieht super glatt aus. – Zac

Sieht nicht so schlecht mit einer grauen Grenze - https://jsfiddle.net/njxfnfoa/3/ – Pete

Verwendung border: 1px solid rgba(211,211,211, .8); so haben Sie die Kontrolle über die Border Opazität (0.8 hier)

.switch-container{ 
 
    position:relative; 
 
} 
 

 
.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 65px; 
 
    height: 34px; 
 
} 
 

 
/* Hide default HTML checkbox */ 
 
.switch input { 
 
    display: none; 
 
} 
 

 
/* The slider */ 
 
.slider { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: white; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
    border: 1px solid rgba(211,211,211, .8); 
 
} 
 

 
.slider:before { 
 
    position: absolute; 
 
    content: ""; 
 
    height: 32px; 
 
    width: 32px; 
 
    left: 0px; 
 
    background-color: #73c82b; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 

 
input:checked + .slider { 
 
    background-color: white; 
 
} 
 

 
input:focus + .slider { 
 
    box-shadow: 0 0 1px white; 
 
} 
 

 
input:checked + .slider:before { 
 
    -webkit-transform: translateX(31px); 
 
    -ms-transform: translateX(31px); 
 
    transform: translateX(31px); 
 
} 
 

 
/* Rounded sliders */ 
 
.slider.round { 
 
    border-radius: 34px; 
 
} 
 

 
.slider.round:before { 
 
    border-radius: 50%; 
 
}

<div class="switch-container"> 
 
          <label class="switch"> 
 
           <input type="checkbox"> 
 
           <div class="slider round"></div> 
 
          </label> 
 
         </div>

Quelle

2017-06-09 15:45:00

Wunderbar, danke. Ich werde die Antwort akzeptieren, wenn es mir erlaubt. –

@Geesh_SO cool, ich habe ein wenig aktualisiert, hoffe es hilft = D –

Sie nur die Feinabstimmung müssen die CSS in

.slider:before

ein wenig: js fiddle

Quelle

2017-06-09 15:44:46

Wie kann ich diesen gezackten Rand korrigieren, den ich bekomme, wenn ich einen CSS-Rahmen an einen Kippschalter anwende?

Antwort

Verwandte Themen