Question

我想更改border-left中的css属性，但它并没有像我预期的那样给我一个漂亮的矩形。

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

运行此代码时，您可以看到红色框没有完美的直线。

你们知道这个问题的解决方案吗？

谢谢！

Answer 1

增加左边距并使用插入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>

Answer 2

问题：边框是梯形的。你可以通过制作所有边框来看到这一点，比如40px厚。

＆＃13;

div {
  width:100px; height:100px;
  border:40px solid;
  border-color:black red;
}

＆＃13;

<div></div>

＆＃13;

（注意：右侧边框也是红色，以便更好地显示形状。）

一种可能的解决方案是以绝对定位的伪元素的形式在左边框的顶部绘制一个叠加层。

＆＃13;

div {
  width:100px; height:100px;
  border:40px solid;
  border-color:black red;
  position:relative;
}

div::before {
  display:block; content:'';
  position:absolute;
  top:-40px; left:-40px; width:0; height:calc(100px + 40px + 40px);
  border-left:inherit;
}

＆＃13;

<div></div>

＆＃13;

我相信会有更优雅的方法。如果是这样，我会upvote。

更改宽度时如何保持边框的一边？

2 个答案: