我想更改 css 中的 border-left 属性，但它并没有像我预期的那样给我一个漂亮的矩形。
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid black;
border-left: 100px solid red;
}
</style>
</head>
<body>
<p>Text field with only a left border:</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>运行这段代码，可以看到红框内没有完美的直线。
你们知道这个问题的解决方案吗？
谢谢!
最佳答案
增加左内边距并使用内嵌 box-shadow
input[type=text] {
width: 100%;
padding: 12px 20px;
padding-left: 120px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid black;
box-shadow: inset 100px 0 0 0 red;
}<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
</form>关于html - 更改宽度时如何保持边框的一侧为正方形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46931321/