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>

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

  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>
展开阅读全文
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值