在元素内部为底部\左侧制作边框，在顶部\右侧没有边框答案

【问题标题】：Making borders for bottom\left on the inside of an element, none for top\rigth在元素内部为底部\左侧制作边框，在顶部\右侧没有边框
【发布时间】：2014-02-28 12:55:35
【问题描述】：

我需要创建一个内部有边框的 DIV。但是，我只需要 bottom 和 left 两侧的边框，如下所示：

 +++++++++
 +|      +
 +|      +
 +|      +
 +|______+
 +++++++++

+ : DIV's boundary
| : border

我在这里看到的一些不起作用的解决方案：

box-sizing，因为我需要清晰的右边界和上边界。
box-shadow，因为我需要它在 div 中。
border-left \ border-bottom，因为它不会在我的 DIV 内部。

我应该只为左侧和底部设置一个边框，然后设置一个适当的 BORDER_WIDTH 边距，还是有更好的方法？

谢谢。

附言需要纯 CSS 解决方案。

【问题讨论】：

box-shadow 有一个“inset”属性：css-tricks.com/snippets/css/css-box-shadow
请给我看看你的 HTML 结构。
这个jsfiddle.net/CdTKd/3为什么不符合你的要求？

标签： html css

【解决方案1】：

box-shadow 有一个“inset”属性：所以你可以使用这种风格

div {
  width: 100px;
  height: 100px;
  border: 1px #ccc solid;
  box-shadow: 10px -10px 0 0 #000 inset; /* use vendor prefixes if necessary */
}

当然可以根据需要调整阴影的偏移和/或颜色。
codepen 示例：http://codepen.io/anon/pen/LoFvj

截图

【讨论】：

【解决方案2】：

或者，使用 box-shadow 来创建外部边框

Codepen Demo

div {
  width: 200px;
  height: 200px;
  border: 4px red solid;
  border-top:none;
  border-right:none;
  box-shadow: 0px 0 0 1px grey;
}

【讨论】：

【解决方案3】：

您可以使用伪选择器来产生内边框的错觉。

Fiddle

.inner-border {
   border-left: 5px solid #000;
   border-bottom: 5px solid #000;
   border-right: 5px solid red;
   border-top: 5px solid red;
   position: relative;    
}

.inner-border:before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 5px solid red;
}

【讨论】：