英文:
Why top and left part of input element appear darker than other sides?
问题
这是您要翻译的内容：
"我正在为输入元素应用这个简单的 CSS，使其在所有边上都具有均匀的细边框，颜色为浅灰色。然而，我发现两侧似乎较暗？或者它是某种阴影属性吗？有什么办法可以使它在所有边上均匀？"
input {
border-width: thin;
border-color: lightgray;
box-shadow: none;
outline: none;
}
<input>
英文:
I am applying this simple css on an input element for it to have a uniform, thin border which is lightgray in color, on ALL sides. However, I find that two of the sides appear darker ? or it is a shadow property of some kind ? What can be done to make it uniform on all sides ?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
input {
border-width: thin;
border-color: lightgray;
box-shadow: none;
outline: none;
}
<!-- language: lang-html -->
<input>
<!-- end snippet -->
答案1
得分: 2
border-style属性在输入元素上的默认值通常为inset。您需要将其设置为solid。
实际上，通常有意义的做法是使用border缩写，并始终同时设置宽度、颜色和样式：
border: lightgray thin solid;
英文:
The default value for border-style on input elements is usually inset. You need to set it to solid.
Actually it usually makes sense to use the border shorthand and always set width, color and style at the same time:
border: lightgray thin solid;
答案2
得分: 1
由于输入字段的3D效果，看起来是这样的。
如果您想去掉这个3D效果，只需在您的输入CSS中添加 border-style: solid; 即可。
英文:
It looks like that because of the 3d effect of the input field.
If you want to remove that 3d effect, just add border-style: solid; to your input css.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
input {
border-width: thin;
border-color: lightgray;
box-shadow: none;
outline: 0;
border-style: solid;
}
<!-- language: lang-html -->
<input>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论