Question

我试图在CSS中使用简单的1px白色实心边框但是在Chrome中边框看起来有点模糊和褪色。

以下是它的外观和样子：

这是我的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>

Answer 1

不是很好的答案＆＃34;，但我确实设法（A）使产品可重复，并且（B）发现它与字体调用有关。

可以在jsfiddle找到此代码段的副本。

也许其他人可以更多地了解为什么会发生这种情况，以及除了不调用不同字体之外的任何变通方法？

＆＃13;

* {
   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 {
	border:3px double #000;
	border-radius:1em;
	padding:0.5em;
	background:#ccc;
}
div#loginForm > ul > li {
	padding:0 0.25em 0 0;
	margin:0.5em 1em;
	text-align:center;
	border:1px solid #000;
	background:#ccc;
}
div#loginForm > ul > li.act {
	background:#fff;
	border:1px solid #666;
}
div#loginForm > ul > li.act > label {
	color:#faa;
}

div#loginForm > ul > li > label {
	display:block;
	float:left;
	padding:0.125em 1em 0.125em 0.5em;
	margin:0.25em 0 0.25em 0.25em;
}
div#loginForm > ul > li input[type="text"],
div#loginForm > ul > li input[type="password"] {
	margin:0.5em 0.25em 0.25em 0;
	width:100%;
	padding:0.125em;
	background:inherit;
	color:#fff;
	letter-spacing:0.5px;
	box-sizing:border-box;
	border:0;
	text-align:right;
}
div#loginForm > ul > li input[type="submit"] {
	width:100%;
	margin:0;
	padding-top:1em;
	padding-bottom:1em;
	border:0;
	background:#1b242d;
	color:#fff;
}
div#loginForm > ul > li span {
	display:block;
	overflow:hidden;
}

＆＃13;

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

＆＃13;

CSS 1px实心边框在chrome中出现模糊

1 个答案: