如何用CSS为无内容的div/span实现三边边框效果？

你遇到的问题大概率是两个常见误区导致的：

1. 行内元素无法设置宽高 #

span默认是inline类型元素，这类元素不支持自定义宽高，即便你设置了width和height也不会生效，最终元素高度仅由内容（这里无内容）决定，导致左右边框没有垂直空间显示，只能看到上边框的水平条。

解决办法：给span设置display: inline-block或者display: block，让它支持宽高设置。

2. 边框未指定样式 #

CSS边框需要同时指定宽度、样式、颜色才会正常显示（颜色可继承，但样式默认是none）。如果你只写了border-left-width: 2px这类代码，没有设置border-left-style: solid，边框会因为样式为none而不显示。

正确实现示例 #

对于div（默认block级）：

<div class="triple-border"></div>

.triple-border {
  width: 100px;
  height: 50px;
  /* 分别设置左、上、右边框 */
  border-left: 2px solid #333;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  /* 不设置下边框，默认就是none */
}

对于span：

<span class="triple-border-span"></span>

.triple-border-span {
  display: inline-block; /* 关键：转为行内块级 */
  width: 100px;
  height: 50px;
  border-left: 2px solid #333;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

额外优化：简写方式 #

可以用边框简写一次性指定三边，更简洁：

/* 上、左、右边框，下边框无 */
border: 2px solid #333;
border-bottom: none;

内容的提问来源于stack exchange，提问作者Sean