CSS 1px solider Rand erscheint unscharf in Chrom

-1

Ich versuche eine einfache 1px weiße Grenze in CSS zu machen, aber in Chrome erscheint der Rand leicht unscharf und verfärbt.CSS 1px solider Rand erscheint unscharf in Chrom

Hier ist, wie es aussieht und was sollte es aussehen:

Hier mein CSS ist

.button { 
    font-family: "BrooklynSamuels"; 
    font-size:30px; 
    color:#FFFFFF; 
    text-align:center;  
    border: solid #ffffff; 
    border-width: 1px 1px 1px 1px; 

}

Hier ist der HTML-

<body> 
    <div id="logo"></div> 

    <div class="center-message"> 
    <div class="message-header">Our store is currently closed</div> 
    <div class="message-content">But you can still pre-order for delivery</div> 
    <div class="button">PRE-ORDER NOW</div> 
    </div> 

</body>

Quelle

2017-06-26 Rick

Könnten Sie Ihre HTML einfügen und ein Stapel Snippet machen, damit wir das Problem reproduzieren hier aus Ihrer Frage? Es gibt einen Editor-Button dafür. – domsson

Außerdem habe ich gerade Ihre 'border'-Regel bemerkt - können wir die' border-width' wirklich weglassen, wenn wir die Kurzschrift verwenden? Versuchen Sie stattdessen 'border: 1px solid # fff'. – domsson

Haben Sie die Seite gezoomt? –

Nicht sehr gut "Antwort" , aber ich habe es geschafft, (A) das Produkt reproduzierbar zu machen und (B) festzustellen, dass es mit dem Font-Aufruf zusammenhängt.

Das Duplikat dieses Codeausschnitts kann unter jsfiddle gefunden werden.

Vielleicht kann jemand anderes mehr Licht auf warum dies geschieht, und jede Umgehungslösung anders als NOT rufen eine andere Schriftart?

* { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
    
 
    /* uncommenting this font declaration causes the 1px borders to go "fuzzy" */ 
 
    /*font-family:"Century Gothic";*/ 
 
} 
 
div#loginForm { 
 
\t border:3px double #000; 
 
\t border-radius:1em; 
 
\t padding:0.5em; 
 
\t background:#ccc; 
 
} 
 
div#loginForm > ul > li { 
 
\t padding:0 0.25em 0 0; 
 
\t margin:0.5em 1em; 
 
\t text-align:center; 
 
\t border:1px solid #000; 
 
\t background:#ccc; 
 
} 
 
div#loginForm > ul > li.act { 
 
\t background:#fff; 
 
\t border:1px solid #666; 
 
} 
 
div#loginForm > ul > li.act > label { 
 
\t color:#faa; 
 
} 
 

 
div#loginForm > ul > li > label { 
 
\t display:block; 
 
\t float:left; 
 
\t padding:0.125em 1em 0.125em 0.5em; 
 
\t margin:0.25em 0 0.25em 0.25em; 
 
} 
 
div#loginForm > ul > li input[type="text"], 
 
div#loginForm > ul > li input[type="password"] { 
 
\t margin:0.5em 0.25em 0.25em 0; 
 
\t width:100%; 
 
\t padding:0.125em; 
 
\t background:inherit; 
 
\t color:#fff; 
 
\t letter-spacing:0.5px; 
 
\t box-sizing:border-box; 
 
\t border:0; 
 
\t text-align:right; 
 
} 
 
div#loginForm > ul > li input[type="submit"] { 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding-top:1em; 
 
\t padding-bottom:1em; 
 
\t border:0; 
 
\t background:#1b242d; 
 
\t color:#fff; 
 
} 
 
div#loginForm > ul > li span { 
 
\t display:block; 
 
\t overflow:hidden; 
 
}

\t \t <div id="loginForm"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <label for="email">email</label> 
 
\t \t \t \t \t <span><input type="text" name="email" id="email" /></span> 
 
\t \t \t \t \t <div style="clear:both;"></div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <label for="password">password</label> 
 
\t \t \t \t \t <span><input type="password" name="password" id="password" /></span> 
 
\t \t \t \t \t <div style="clear:both;"></div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <input type="submit" value="go" /> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div>

Quelle

2017-07-28 20:50:26

CSS 1px solider Rand erscheint unscharf in Chrom

Antwort

Verwandte Themen