CSSで1pxの実線の境界線がぼやけて表示される

-1

私はCSSで1pxの白い実線の境界線を作成しようとしていますが、Chromeでは境界線がわずかにぼやけて変色しています。ここで CSSで1pxの実線の境界線がぼやけて表示される

私のCSSここで

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

}

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

出典

2017-06-26 Rick

あなたのHTMLを追加し、スタックスニペット作るので、私たちはあなたの質問から右ここでの問題を再現することができますか？そのためのエディタボタンがあります。 – domsson

また、私はあなたの 'border'ルールに気付きました - 省略形を使うときに' border-width'を実際に省略できますか？代わりに 'border：1px solid＃fff'を試してみてください。 – domsson

ページをズームしましたか？ –

ない非常に良い "答え" である：ここで

は、それがどのように見えると何それはのようになりますことは何です私は（A）生産物を再現可能にし、（B）それがフォント呼び出しに関連していることを発見することに成功しました。

このコードスニペットの複製はjsfiddleにあります。

おそらく、他の誰かが、これがなぜ起こっているのか、そして別のフォントを呼び出さない以外の回避策について、より多くの光を当てることができますか？

* { 
 
    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>

出典

2017-07-28 20:50:26

CSSで1pxの実線の境界線がぼやけて表示される

答えて

関連する問題