CSS 101

1. Hello CSS
2. CSS语法
3. 选择器
4. 盒模型
5. 背景和边框
6. 文本方向和内容溢出
7. 值、单位和大小
8. 特殊元素
9. 布局
10. Flex 布局
11. Grid 布局
12. 定位布局
13. 响应式设计
14. 动画与过渡
15. 预处理器
16. 开发者工具
17. 代码规范
18. Uniswap页面
5. 背景和边框
背景和边框

这一讲，我们介绍 CSS 的两种常用属性：背景（background）和边框(border)，通过掌握这两个属性，构建出生动丰富的界面效果。

背景

背景颜色

background-color 属性用于定义元素的背景颜色，接受有效的色彩值。 背景色扩展到元素的内容（content）和内边距（padding）。 颜色值通常的定义方式如下：

  1. 十六进制，例如："#fff"
  2. RGB，如"rgb(255, 0, 0)"
  3. 颜色名称,如"black"

代码实例：

div {
  background-color: #fff;
  background-color: rgb(255, 0, 0);
  background-color: green;
}

背景图像

background-image 属性用于定义元素的背景图像，默认情况下图像是平铺重复显示，覆盖元素背景。

代码实例：(完整代码请查看html文件)

.bgi {
  background-image: url(./img/wtflogo.png);
}

背景平铺

background-repeat 属性用于控制图像的平铺行为。常用的属性值包含以下几个：

  • repeat：图像在水平方向与垂直方向重复(默认)
  • repeat-x：图像在水平方向重复
  • repeat-y：图像在垂直方向重复
  • no-repeat：图像仅平铺一次

代码实例：(完整代码请查看html文件)

.bgr1 {
  background-repeat: no-repeat;
}

.bgr2 {
  background-repeat: repeat-x;
}

.bgr3 {
  background-repeat: repeat-y;
}

.bgr4 {
  background-repeat: repeat;
}

背景大小

background-size ，它可以设置长度或百分比值，使背景的大小以适应被填充背景的元素尺寸，常用的属性值包含以下几个：

  • 指定长度或百分比值：按指定大小渲染
  • auto：以图像的比例缩放作为背景，图像可能会重复展示
  • cover：图像扩展至足够大，使其完全覆盖整个区域，同时保持其高宽比，图像可能会被裁剪
  • contain：图像尽可能地缩放并保持宽高比例以适应整个背景区域。缩放会导致背景可能出现部分空白，空白区域会显示由background-color 设置的背景颜色。

代码实例：(完整代码请查看html文件)

<head>
  <style>
    .bgs > div {
      width: 50em;
      height: 30em;
      border: 2px solid #000;
      background-image: url(https://static.wtf.academy/image/68d5e9d6ee60165d243a5001f56efedf.jpeg);
    }

    .bgs1 {
      background-size: auto;
    }

    .bgs2 {
      background-size: cover;
    }

    .bgs3 {
      background-size: contain;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="bgs">
      <div class="bgs1">wtf-css</div>
      <div class="bgs2">wtf-css</div>
      <div class="bgs3">wtf-css</div>
    </div>
  </div>
</body>

  1. 原始背景图片的完整展示

    img

  2. auto：以图像的比例缩放作为背景，图像会重复平铺展示

    1666367277743

  3. cover：图像拓展至覆盖整个区域，保持比例。图像可能无法完整展示，出现部分溢出的情况。

    img

  4. contain：图像尽可能地缩放并保持宽高比例，使高度或宽度完全适应整个背景区域。缩放会导致背景可能出现部分空白区域，此时容器的空白区域会显示由background-color 设置的背景颜色。

    img

背景定位

background-position 用于设置背景图像的起始位置。框的左上角是 (0,0)，框沿着水平 (x) 和垂直 (y) 轴定位。常见的设置方法如下：

  1. 可用任何长度单位，第二个位置(即Y轴方向)如果不声明，默认是50%(两个位置都不设置的话默认0% 0%)
  2. 位置关键字（left/right/top/bottom/center），可单双使用（第二个关键字如果不声明默认是center）
  3. 混合使用

代码实例：(完整代码请查看html文件)

background-position: top center;
  background-position: 20px 10%;
  background-position: top 20px;

背景附加

background-attachment属性用于设置背景图像是否固定或者随着页面的其余部分滚动。 常见的属性值如下：

  • scroll：背景图片随网页滚动而移动(默认)
  • fixed：背景图片不会随网页滚动而移动
  • local： 背景图片会随着元素内容的滚动而滚动。

代码实例：(完整代码请查看html文件)

.bga1 {
  background-attachment: scroll;
}

.bga2 {
  background-attachment: fixed;
}

.bga3 {
  background-attachment: local;
}

具体效果建议运行html文件，可以直观对比差异

背景简写

background属性可以实现简写，比单个子属性声明要简洁得多，可少写很多代码。而background子属性众多，到底如何安排子属性连写顺序也是一个难题。css2 推荐一条子属性连写顺序规则：

background: color image repeat attachment position/size

边框

border 可以为元素的所有四个边设置边框。也可以将border拆分为border-top, border-bottom, border-left, border-right，单独设置一条边。

border由width、style、color三个属性组成，其中width表示边框宽度，style表示边框样式（可以是实线、圆点、虚线等样式），color表示边框颜色。

具体语法如下：

.solid {
  border: 3px solid red;
  // 等价于
  border-width: 3px;
  border-style: solid;
  border-color: red;
}

.dotted {
  border: 3px dotted green;
}

.dashed {
  border: 3px dashed blue;
}

圆角

border-radius 属性用于设置方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。通常情况下

.radius {
  border: 3px solid blue;
  border-radius: 20px;
}

.top-right-radius {
  border: 3px solid blue;
  border-top-right-radius: 10px;
}

.circle {
  border: 3px solid blue;
  border-radius: 50%;
}

总结

这一讲我们介绍了背景和边框的常见属性和用法，理解并熟练运用这些属性，可以帮助你创建出更丰富、更有趣的网页设计。

PreviousNext