当前位置：首页 > article >正文

CSS 背景与边框：从基础到高级应用

article 2026/4/30 12:28:18

CSS 背景与边框：从基础到高级应用

- 1. CSS 背景样式
- - 1.1 背景颜色
  - - 示例代码：设置背景颜色
  - 1.2 背景图像
  - - 示例代码：设置背景图像
  - 1.3 控制背景平铺行为
  - - 示例代码：控制背景平铺
  - 1.4 调整背景图像大小
  - - 示例代码：调整背景图像大小
  - 1.5 背景图像定位
  - - 示例代码：背景图像定位
  - 1.6 渐变背景
  - - 示例代码：渐变背景
  - 1.7 多个背景图像
  - - 示例代码：多个背景图像
  - 1.8 背景附加
  - - 示例代码：背景附加
  - 1.9 使用 `background` 简写属性
  - - 示例代码：简写背景属性
- 2. CSS 边框样式
- - 2.1 基本边框
  - - 示例代码：基本边框
  - 2.2 单边边框
  - - 示例代码：单边边框
  - 2.3 圆角边框
  - - 示例代码：圆角边框
  - 2.4 不同圆角半径
  - - 示例代码：不同圆角半径
- 3. 总结
- - 完整示例代码

在网页设计中，背景和边框是样式设计的重要组成部分。CSS 提供了丰富的属性和方法来控制背景和边框的样式，从简单的颜色填充到复杂的渐变和圆角效果。本文将详细介绍如何使用 CSS 背景和边框属性，并通过示例代码帮助你掌握这些技巧。

1. CSS 背景样式

CSS 的 background 属性是一个简写属性，用于设置元素的背景样式。它可以同时设置背景颜色、背景图像、背景位置、背景大小等多个属性。

1.1 背景颜色

background-color 属性用于设置元素的背景颜色。它可以接受任何有效的颜色值。

示例代码：设置背景颜色

.box {background-color: #567895;padding: 20px;color: white;
}

在这个例子中，.box 元素的背景颜色被设置为 #567895。

1.2 背景图像

background-image 属性用于在元素的背景中显示图像。你可以使用 URL 指定图像路径。

示例代码：设置背景图像

.box {background-image: url('image.png');background-repeat: no-repeat;background-position: center;background-size: cover;
}

在这个例子中，.box 元素的背景图像被设置为 image.png，并且图像居中显示，不重复，且覆盖整个元素。

1.3 控制背景平铺行为

background-repeat 属性用于控制背景图像的平铺行为。常见的值包括 no-repeat、repeat-x、repeat-y 和 repeat。

示例代码：控制背景平铺

.box {background-image: url('star.png');background-repeat: no-repeat;
}

在这个例子中，背景图像 star.png 不会平铺，只显示一次。

1.4 调整背景图像大小

background-size 属性用于调整背景图像的大小。常见的值包括 cover、contain 和具体的长度或百分比值。

示例代码：调整背景图像大小

.box {background-image: url('balloons.jpg');background-size: cover;
}

在这个例子中，背景图像 balloons.jpg 会缩放以覆盖整个元素。

1.5 背景图像定位

background-position 属性用于控制背景图像在元素中的位置。你可以使用关键字（如 top、center）或具体的长度和百分比值。

示例代码：背景图像定位

.box {background-image: url('star.png');background-position: top right;
}

在这个例子中，背景图像 star.png 会定位在元素的右上角。

1.6 渐变背景

渐变背景可以使用 linear-gradient 或 radial-gradient 函数来创建。

示例代码：渐变背景

.box {background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96%);
}

在这个例子中，.box 元素的背景是一个线性渐变。

1.7 多个背景图像

你可以为元素设置多个背景图像，它们会按照指定的顺序叠加显示。

示例代码：多个背景图像

.box {background-image: url('star.png'), url('big-star.png');background-repeat: no-repeat, repeat;background-position: center, top right;
}

在这个例子中，.box 元素有两个背景图像，分别位于中心位置和右上角。

1.8 背景附加

background-attachment 属性用于控制背景图像的滚动行为。常见的值包括 scroll、fixed 和 local。

示例代码：背景附加

.box {background-image: url('image.png');background-attachment: fixed;
}

在这个例子中，背景图像 image.png 会固定在视口中，不会随页面滚动。

1.9 使用 `background` 简写属性

background 属性可以简写多个背景属性。

示例代码：简写背景属性

.box {background: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96%) center center / 400px 200px no-repeat, url('big-star.png') center no-repeat, rebeccapurple;
}

在这个例子中，.box 元素的背景包括一个线性渐变、一个图像和一个颜色。

2. CSS 边框样式

CSS 提供了多种方式来设置元素的边框样式，包括边框颜色、宽度、样式和圆角。

2.1 基本边框

border 属性用于设置元素的边框样式。

示例代码：基本边框

.box {border: 1px solid black;
}

在这个例子中，.box 元素的边框为 1px 宽的黑色实线。

2.2 单边边框

你可以为元素的某一边设置边框。

示例代码：单边边框

.box {border-top: 2px dotted rebeccapurple;
}

在这个例子中，.box 元素的上边框为 2px 宽的紫色虚线。

2.3 圆角边框

border-radius 属性用于设置元素的圆角。

示例代码：圆角边框

.box {border-radius: 10px;
}

在这个例子中，.box 元素的四个角都有 10px 的圆角。

2.4 不同圆角半径

你可以为每个角设置不同的圆角半径。

示例代码：不同圆角半径

.box {border-top-right-radius: 1em 10%;
}

在这个例子中，.box 元素的右上角圆角半径为 1em（水平）和 10%（垂直）。

3. 总结

本文详细介绍了如何使用 CSS 背景和边框属性来美化网页元素。通过示例代码，你可以更好地理解这些属性的用法。掌握这些技巧后，你可以创建出更加丰富和多样化的网页设计。

完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 背景与边框示例</title><style>.box {width: 500px;height: 300px;padding: 20px;margin: 20px;background-color: #567895;background-image: url('star.png'), url('big-star.png');background-repeat: no-repeat, repeat;background-position: center, top right;border: 5px solid #0b385f;border-radius: 10px;border-top-right-radius: 1em 10%;color: white;}</style>
</head>
<body><div class="box"><h2>背景与边框示例</h2><p>这是一个带有背景图像和圆角边框的盒子。</p></div>
</body>
</html>

在这里插入图片描述

通过本文的学习，你应该能够熟练使用 CSS 背景和边框属性来创建美观的网页设计

CSS 背景与边框：从基础到高级应用

CSS 背景与边框：从基础到高级应用 1. CSS 背景样式1.1 背景颜色示例代码：设置背景颜色 1.2 背景图像示例代码：设置背景图像 1.3 控制背景平铺行为示例代码：控制背景平铺 1.4 调整背景图像大小示例代码：调整背景图像大小…...

编程日记 2026/4/30 12:28:18

GnuTLS: 在 pull 函数中出错。无法建立 SSL 连接。

提示信息 [root@localhost ~]# wget https://download.docker.com/linux/static/stable/x86_64/docker-27.5.1.tgz --2025-02-06 12:45:34-- https://download.docker.com/linux/static/stable/x86_64/docker-27.5.1.tgz 正在解析主机 download.docker.com (download.docker.…...

编程日记 2025/4/10 10:01:34

ES6 const 使用总结

1. 声明不可变性 1.1 基本类型的不可变性 // 基本类型声明后不能修改 const name John; name Jane; // TypeError: Assignment to constant variableconst age 25; age 26; // TypeError: Assignment to constant variableconst isValid true; isValid false; // Ty…...

编程日记 2026/3/31 14:58:27

大学资产管理系统中的下载功能设计与实现

大学资产管理系统是高校信息化建设的重要组成部分，它负责记录和管理学校内所有固定资产的信息。随着信息技术的发展，下载功能成为提高资产管理效率的关键环节之一。系统架构的设计是实现下载功能的基础。一个良好的系统架构能够确保数据的高效传输和存储…...

编程日记 2026/4/30 19:34:45

【华为OD机试python】日志采集系统【 E卷 | 2023 Q1 |100分】

目录题目描述输入描述输出描述示例1 输入输出示例仅供调试，后台判题数据一般不包含示例说明示例2 输入输出示例仅供调试，后台判题数据一般不包含示例说明解题思路考点代码题目描述日志采集是运维系统的的核心组件。日志是按行生成，每行记做一条，由采…...

编程日记 2026/2/25 17:42:31

园区网设计与实战

想做一个自己学习的有关的csdn账号，努力奋斗......会更新我计算机网络实验课程的所有内容，还有其他的学习知识^_^，为自己巩固一下所学知识。我是一个萌新小白，有误地方请大家指正，谢谢^_^ 文章目录前言这个实验主…...

编程日记 2026/5/1 3:57:12

DeepSeek-R1 本地电脑部署 Windows系统【轻松简易】

本文分享在自己的本地电脑部署 DeepSeek，而且轻松简易，快速上手。这里借助Ollama工具，在Windows系统中进行大模型部署~ 1、安装Ollama 来到官网地址：Download Ollama on macOS 点击“Download for Windows”下载安装包&#x…...

编程日记 2026/5/1 4:46:34

git进阶--5---git reset 和 git revert 的区别与联系

git进阶–5—git reset 和 git revert 的区别与联系 1. 相同点都是对版本做出一些改变 2. 不同点 git reset 是进行版本回退，根据不同的参数，是定是否复原索引和工作区git revert 是撤销上一次的提交，不会改变过去的历史，安全…...

编程日记 2026/4/27 1:26:15

AI绘画：解锁商业设计新宇宙（6/10）

1.AI 绘画：商业领域的潜力新星近年来，AI 绘画技术以惊人的速度发展，从最初简单的图像生成，逐渐演变为能够创造出高度逼真、富有创意的艺术作品。随着深度学习算法的不断优化，AI 绘画工具如 Midjourney、Stable Diffu…...

编程日记 2026/4/30 6:47:29

单硬盘槽笔记本更换硬盘

背景本人的笔记本电脑只有一个硬盘槽，而且没有M.2的硬盘盒，只有一个移动硬盘旧硬盘：512G 新硬盘：1T 移动硬盘：512G 参考链接：https://www.bilibili.com/video/BV1iP41187SW/?spm_id_from333.1007.t…...

编程日记 2026/2/26 9:24:06

保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型

1. 安装Ollama 根据自己的系统下载Ollama，我的是Linux，所以我使用如下命令进行下载安装： curl -fsSL https://ollama.com/install.sh | sh2. 安装Open-WebUI 使用 Docker 的方式部署 open-webui ，使用gpu的话按照如下命令进行 …...

编程日记 2026/5/1 8:24:39

机器学习模型--线性回归、逻辑回归、分类

一、线性回归级别1：简单一元线性回归（手工实现） import numpy as np import matplotlib.pyplot as plt# 生成数据 X np.array([1, 2, 3, 4, 5]) y np.array([2, 4, 5, 4, 5])# 手动实现梯度下降 def gradient_descent(X, y, lr0.01, epo…...

编程日记 2026/2/23 20:46:40

使用scoop 下载速度慢怎么办

在国内使用 Scoop 下载速度慢是一个常见问题，主要是因为 Scoop 默认的软件源（bucket）和下载服务器通常位于国外。以下是一些提高下载速度的方法： 1. 更换 Scoop 镜像源（Bucket 镜像）： 原理&…...

编程日记 2026/2/19 2:26:32

Kafka 可靠性探究—副本刨析

Kafka 的多副本机制提升了数据容灾能力。副本通常分为数据副本与服务副本。数据副本是指在不同的节点上持久化同一份数据；服务副本指多个节点提供同样的服务，每个节点都有能力接收来自外部的请求并进行相应的处理。 1 副本刨析 1.1 相关概念 AR&…...

编程日记 2026/4/30 17:47:09

openwebui入门

1 简介 ‌Open WebUI‌（网址是openwebui.com）是一个高度可扩展、功能强大且用户友好的自托管Web用户界面，专为完全离线操作设计，编程语言是python。它支持对接Ollama和OpenAI兼容的API的大模型。‌ Open WebUI‌在架构上是一种中…...

编程日记 2026/5/1 8:15:24

Windows下怎么安装FFFmpeg呢？

在Windows下使用Open-webui报错，说Couldnt find ffmpeg or avconv,解决open-webui报错Couldn‘t find ffmpeg or avconv-CSDN博客于是尝试解决问题，那么Windows下怎么安装FFFmpeg呢？ 尝试了两种方法。第一种方法pip安装（失败&…...

编程日记 2026/4/30 19:20:24

无公网IP 外网访问 Jupyter Notebook

Jupyter Notebook 是一个开源的Web应用程序，允许用户创建和共享包含实时代码、方程式、可视化和叙述文本的文档。它支持超过40种编程语言。本文将详细的介绍如何用 Docker 在本地安装部署 Jupyter Notebook，并结合路由侠内网穿透实现外网访问本地部署的…...

编程日记 2026/4/26 11:56:56

C语言按位取反【~】详解，含原码反码补码的0基础讲解【原码反码补码严格意义上来说属于计算机组成原理的范畴，不过这也是学好编程初级阶段的必修课】

目录概述【适合0基础看的简要描述】： 上述加粗下划线的内容提取版： 从上述概述中提取的核心知识点，需背诵： 整数【包含整数，负整数和0】的原码反码补码相互转换的过程图示： 过程详细刨析：…...

编程日记 2026/4/30 18:47:44

基于 .NET 8.0 gRPC通讯架构设计讲解，客户端+服务端

目录 1.简要说明 2.服务端设计 2.1 服务端创建 2.2 服务端设计 2.3 服务端业务模块 3.客户端设计-控制台 4.客户端设计-Avalonia桌面程序 5.客户端设计-MAUI安卓端程序 1.简要说明 gRPC 一开始由 google 开发，是一款语言中立、平台中立、开源的远程过程调用…...

编程日记 2026/4/26 11:56:29

深入浅出 DeepSeek V2 高效的MoE语言模型

今天，我们来聊聊 DeepSeek V2 高效的 MoE 语言模型，带大家一起深入理解这篇论文的精髓，同时，告诉大家如何将这些概念应用到实际中。 🌟 什么是 MoE？——Mixture of Experts（专家混合模型&#x…...

编程日记 2026/2/26 9:58:02

玩转Gin框架：Golang使用Gin完成登录流程

文章目录背景基于Token认证机制简介常见的Token类型Token的生成和验证在项目工程里创建jwt.go文件根目录新建.env文件创建登录接口 /loginToken认证机制的优点背景登录流程，相信大家都很熟悉的。传统网站采用session后端验证登录状态，大致流程如下&…...

编程日记 2025/12/1 23:20:59

Java实习生面试题汇总

Java实习生面试题汇总简介本人是二本大三学生，下半年大四。暑假在上海这边找实习工作，面了几家公司，所问到的问题记录在下面。因为是在校生，没任何实习经历，一般找我面试的都是小公司，一般问的比较简…...

编程日记 2026/4/29 8:04:31

Java 如何覆盖第三方 jar 包中的类

目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理背景： 在我们日常的开发中，经常需要使用第三方的 jar 包，有时候我们会发现第三方的 jar 包中的某一个类有问题，或者我们需要定制化修改其中的逻辑&#xff0c…...

编程日记 2026/5/1 5:51:27

解密 Java Lambda 表达式中的 “effectively final“ 陷阱

文章目录 1. 引言 (Introduction)1.1. 核心问题1.2. 博客目标1.3. 目标读者1.4. 阅读收获 2. 重现错误 (Reproducing the Error)2.1. 代码示例 (LambdaErrorExampleCorrected.java)2.2. 逐步演示2.2.1. 没有错误的代码版本 (list 满足 effectively final)2.2.2. 导致错误的代码…...

编程日记 2026/2/14 14:56:41