默认情况下,输入元素的样式为border:2px inset.但是,只要背景为白色,边框就会显示为细灰线(带#eee颜色).但如果我改变背景甚至最轻微(例如#feffff),边界突然变为你对2px插入的期望.造成这种奇怪行为的原因是什么?
这是一个例子(http://jsfiddle.net/ttb2fc1d/):
CSS
.border-test { display: inline-block; vertical-align: top; width: 50px; height: 50px; border: 2px inset; margin: 8px; } .gray { background-color: #feffff; }
HTML
<div class="border-test"></div> <input class="border-test"></input> <input class="border-test gray"></input>
这导致第一个和第三个框具有插入边框,而第二个框具有细线边框: