Question

您可以通过以下链接访问以下代码：jsfiddle.net/2NPxV

我的css代码：

.custom_content { 
display: block; 
width:200px;
height: 30px; 
margin: 5px 0; 
padding: 0 0;   
border: 1px solid #000000;  }  

.left-border-red
{
border-left: 5px solid red;
}

我的HTML代码：

<div class="container">
<div class="row custom_content left-border-red">
My content  
</div>  
</div>

结果：请放大图像以查看矩形上的左上和左下斜坡区域。 http://rasih.net/se/main.png

问题1：左上角有坡度。我想解决它。

问题2：左下角有斜度。我想解决它。

总结：如何修复输出的左上角和左下角？我想同时保持外部黑色边框和内部红色边框。但是我不希望任何角落有任何坡度。

Answer 1

在这里，看看这个小提琴：http://jsfiddle.net/DX7w8/1/

我做的唯一更改是使用border-left属性而不是使用box-shadow属性，这只会调整广场的特定段，我使用padding-left属性并操纵位置使其出现有一个红色左边框，填充左侧。

我还将{{1}}增加到6px，以使文字看起来不与边框重叠。

这是优越的，因为我假设你不希望在红色边框前显示黑色左边的线条。这是避免这种情况的最好方法。

希望这有帮助。

Answer 2

而不是border-left，您可以使用:before或:after伪元素和样式来查看您想要的内容

.left-border-red:before {
  content:'';
  border-left: 5px solid red;
  height: 100%;
  width: 0;
  display: block;
  float:left;
}

http://jsfiddle.net/valentin/2NPxV/1/

如何用css修复html边界角落？

2 个答案: