css - DIV 一侧的边框

Question

我想要一个 div 右侧的边框。

我愿意：

<div class="span6" style="border-right: 2px solid #727272;">

事情是我希望我的边框不要跑到 div 的顶部和底部。可能距离顶部 5px，距离底部 5px。或 90% 的 div 高度。我该怎么做呢？

谢谢

Answer 1

您可以使用伪元素来保持边框。以下将使“边框”为父元素高度的 90%：

http://cssdeck.com/labs/kyrvt8hf

div {
  position: relative;
}

div:after {
  display: block;
  content: '';
  position: absolute;
  top: 5%;
  bottom: 5%;
  right: 0;
  border-right: 2px solid red;
}

Answer 2

我可能是错的，但我不相信有任何方法可以真正实现您可能想要使用的方法。事实上，我想到了三种可能可行的“hacky”方式，但假设高度可变，这三种方式都无法让您达到所需的状态。

假设高度是固定的，您可以创建一个 2px 宽 x 90% div 高度您想要的颜色的图像，然后将其设置为 div 的背景图像。就像是：

.span6 { background: #fff url(bgBorder.png) no-repeat right center; }

更新

基于 Tyblitz 在评论中所说的变化。这允许动态高度。我仍然倾向于使用 :after 选项，因为它可以让你的 DOM 更干净，但万一这是不可能的：

http://jsfiddle.net/designingsean/bsbgX/1/

HTML：

<div class="span6">The content div<div class="border"></div></div>

CSS：

.span6 {
  width:50%;
  height:400px;
  background-color:#ddd;
  position:relative;
  padding:10px;
}
.border {
  width:2px;
  background-color:#222;
  position:absolute;
  top:5%;
  bottom:5%;
  right:0;
}

请注意，要使其成为固定距离（例如，以像素为单位），只需将顶部和底部从百分比更改为所需的 px。有关示例，请参见http://jsfiddle.net/designingsean/bsbgX/2/。

Answer 3

这张图片展示了边框的工作方式

您可以设置边距以缩小边框或设置填充以扩展边框。目前，CSS 中没有选项可以针对边框并使其变大或变小（显然不是在谈论宽度）。但是，您可以使用填充、边距、另一个 div 或伪元素来达到所需的效果。