Css 在一个DIV的边上

我想在div的右边加一个边框

我有：

问题是我不希望我的边界跑到div的顶部和底部。可能从顶部到底部是5px，从底部到顶部是5px。或者90%的高度。我该怎么做

---

谢谢

我可能是错的，但我不相信有任何方法能真正让这一切发生，而你可能会愿意接受。事实上，我想到了三种可能有效的“黑客”方法，但假设高度可变，这三种方法都不能让你达到想要的状态

假设高度固定，您可以创建一个2px宽、90%div高的所需颜色图像，然后将其设置为div的背景图像。类似于：

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

更新

根据Tyblitz在评论中所说的变化。这允许动态高度。我仍然倾向于使用：after选项，因为它可以使DOM更干净，但在不可能的情况下：

HTML:

---

请注意，要使其成为固定距离（例如，以像素为单位），只需将顶部和底部从百分比更改为所需的像素。请参见示例。

我可能是错的，但我不相信有任何方法可以真正实现这一点，而您可能会希望这样做。事实上，我想到了三种可能有效的“黑客”方法，但假设高度可变，这三种方法都不能让你达到想要的状态

假设高度固定，您可以创建一个2px宽、90%div高的所需颜色图像，然后将其设置为div的背景图像。类似于：

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

更新

根据Tyblitz在评论中所说的变化。这允许动态高度。我仍然倾向于使用：after选项，因为它可以使DOM更干净，但在不可能的情况下：

HTML:

---

请注意，要使其成为固定距离（例如，以像素为单位），只需将顶部和底部从百分比更改为所需的像素。请参阅以获取示例。

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

---

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

---

这张图片展示了border的工作原理

---

可以设置边距以缩小边框，也可以设置填充以延伸边框。目前，CSS中没有任何选项可以将边框作为目标，并使其变大或变小（显然不涉及宽度）。但是，您可以使用padding、margin、另一个div或伪元素来达到所需的效果

这张图片展示了border的工作原理

---

可以设置边距以缩小边框，也可以设置填充以延伸边框。目前，CSS中没有任何选项可以将边框作为目标，并使其变大或变小（显然不涉及宽度）。但是，您可以使用padding、margin、另一个div或伪元素来达到所需的效果

边界就是这样做的。也许你可以把你的div包起来，给它加上边框，让这个新的垂直居中？但这是一个混乱的解决方案@koningdavid Borders不延伸到元素边距。@渐进性错误，这就是我的点，操作的点在内部制作另一个div，将其向右浮动或绝对/相对定位，将其边框用作父div的边框；设置高度和边距。。这并不是更多的努力…这就是borders所做的。也许你可以把你的div包起来，给它加上边框，让这个新的垂直居中？但这是一个混乱的解决方案@koningdavid Borders不延伸到元素边距。@渐进性错误，这就是我的点，操作的点在内部制作另一个div，将其向右浮动或绝对/相对定位，将其边框用作父div的边框；设置高度和边距。。这并不需要太多的努力…只要你不需要IE8或以下的支持，就用cimmanon的答案。只要你不需要IE8或以下的支持，就用cimmanon的答案。

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

.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;
}

div {
  position: relative;
}

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