CSS之可收缩的底部边框

简述

<div>用来定义文档中的分区或节，<span>用来组合文档中的行内元素。我们可以通过<div>和 <span>将HTML元素组合起来。

下面我们来实现一个可收缩的底部边框。

简述
最终效果
组合
- 效果
- 源码
源码

最终效果

我们先看一下最终要实现的效果。

这里写图片描述

要实现这样一个效果，首先我们可以模块化，里面包含5个<div>，而每一个<div>里面包含一个<span>。

组合

为了更容易看出效果，我们先实现一个简单地组合，然后用颜色对每一个部位进行区分。

效果

这里写图片描述

源码

源码很简单，里面设置了<div>的背景色为橙色，底部边框5像素、蓝色，<div>中的<span>背景为绿色、文本色为白色。

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {
  line-height: 150%;
  background: orange;
  border-bottom: 5px solid blue;
}

div span {
  position: relative;
  background: green;
  padding: 0 5px;
  color: white;
  font-size: 16px;
  font-weight: bold;
}
</style>
</head>
<body>
  <div>
    <span>Photoshop</span>
  </div>
  <div>
    <span>Adobe Illustrator</span>
  </div>
  <div>
    <span>3D Max</span>
  </div>
  <div>
    <span>Maya</span>
  </div>
  <div>
    <span>Windows 8 Pro</span>
  </div>
</body>
</html>

为了实现我们的最终效果，我们需要做以下几点修改：

<div>下边框上浮
去掉<div>背景色
设置<span>背景色为白色，覆盖边框超出文本部分。
分别对每一个<div>下边框设置颜色

源码

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {
  line-height: 150%;
  border-bottom: 5px solid blue;
}
/* 设置底部边框色 */
.Photoshop{
  border-bottom-color: red;
}

.Adobe{
  border-bottom-color: green;
}

.Max{
  border-bottom-color: blue;
}

.Maya{
  border-bottom-color: orange;
}

.Windows8{
  border-bottom-color: yellow;
}

div span {
  position: relative;
  /* 下边框上浮 */
  bottom: -10px;
  /* 背景色白色，覆盖边框超出文本部分 */
  background: #fff;
  padding: 0 5px;
  color: #82439a;
  font-size: 16px;
  font-weight: bold;
}
</style>
</head>
<body>
  <div class = "Photoshop">
    <span>Photoshop</span>
  </div>
  <div class = "Adobe">
    <span>Adobe Illustrator</span>
  </div>
  <div class = "Max">
    <span>3D Max</span>
  </div>
  <div class = "Maya">
    <span>Maya</span>
  </div>
  <div class = "Windows8">
    <span>Windows 8 Pro</span>
  </div>
</body>
</html>