CSS一边使用边框，近端宽度不一样？

Question

您好我正在实施类似下面的截图...

这是我正在使用的

border-left: 5px solid #7AC0DA;

它给了我这个输出

边框不够清晰，正如您在此屏幕截图中看到的那样，边框的末端附近没有相同的宽度。我该如何纠正？

Answer 1

这是因为元素的边框已经为1px solid grey，而蓝色必须展开。

你最好的方法是不在input上使用边框样式，但是如下所示：

<强> HTML

<label class="highlight clearfix">
  <span>Field name:</span>
  <input />
</label>

<强> CSS

label span, label input { float: left }
label.highlight span { border-right: 5px solid blue }

Answer 2

边框显示斜角，因为顶部和底部有宽度。您可以使用伪元素:before

执行所需操作

http://jsfiddle.net/sEWqW/3/

<label><input /></label>

CSS

label {
    border: 1px solid #ccc;
    border-left:0;
    padding:.1em .3em;
    position:relative;
}
label:before {
    display:block;
    content:".";
    color:transparent;
    font-size:0;
    border-left:5px solid #f24495;
    height:100%;
    position:absolute;
    left:0;
    padding:1px 0;
    top:-1px;
    bottom:-1px;
}
label input{
    border:0;
}

Answer 3

我假设某处，边框顶部和底部有一个边框宽度。 我看到你只在左边边框左边设置一个边框。也许你应该先尝试设置border：0而不是在同一个选择器中，使用border-left。