简述

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

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

| 版权声明：一去、二三里，未经博主允许不得转载。

最终效果

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

CSS 之可收缩的底部边框_CSS

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

组合

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

效果

CSS 之可收缩的底部边框_CSS_02

源码

源码很简单，里面设置了​​<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>

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

  1. ​​<div>​​下边框上浮
  2. 去掉​​<div>​​背景色
  3. 设置​​<span>​​背景色为白色，覆盖边框超出文本部分。
  4. 分别对每一个​​<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>