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

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

news 2026/3/30 6:48:14

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 背景与边框&#xff1a;从基础到高级应用 1. CSS 背景样式1.1 背景颜色示例代码&#xff1a;设置背景颜色 1.2 背景图像示例代码&#xff1a;设置背景图像 1.3 控制背景平铺行为示例代码&#xff1a;控制背景平铺 1.4 调整背景图像大小示例代码&#xff1a;调整背景图像大小…...

编程日记 2025/2/1 17:26:02

国内外人工智能AI工具网站大全（一键收藏，应有尽有）

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 国内外人工智能AI工具网站大全&#xff08;一键收藏&#xff0c;应有尽有&#xff09; 摘要一、AI写作工具二、AI图像工具2.1、常用AI图像工具2.2、AI图片插画生成2.3、AI图片背景移…...

编程日记 2025/2/1 17:23:59

Java中初步使用websocket（springBoot版本）

一、什么是websocket WebSocket是一种在Web应用程序中实现实时双向通信的协议。它为浏览器和服务器之间提供了一种持久连接&#xff0c;在一个连接上可以双向传输数据。相比传统的HTTP协议&#xff0c;WebSocket具有更低的延迟和更高的效率。 WebSocket使用了类似于握手的方式来…...

编程日记 2025/2/1 17:16:50

2025年大年初一篇，C#调用GPU并行计算推荐

C#调用GPU库的主要目的是利用GPU的并行计算能力&#xff0c;加速计算密集型任务&#xff0c;提高程序性能&#xff0c;支持大规模数据处理&#xff0c;优化资源利用&#xff0c;满足特定应用场景的需求&#xff0c;并提升用户体验。在需要处理大量并行数据或进行复杂计算的场景…...

编程日记 2025/2/1 17:08:43

K8S ReplicaSet 控制器

一、理论介绍 今天我们来实验 ReplicaSet 控制器&#xff08;也叫工作负载&#xff09;。官网描述如下&#xff1a; 1、是什么&#xff1f; ReplicaSet 副本集&#xff0c; 维护一组稳定的副本 Pod 集合。 2、为什么需要&#xff1f; 解决 pod 被删除了&#xff0c;不能自我恢…...

编程日记 2025/2/1 17:03:37

FreeRTOS学习 --- 任务调度

开启任务调度器 作用&#xff1a;用于启动任务调度器&#xff0c;任务调度器启动后&#xff0c; FreeRTOS 便会开始进行任务调度 该函数内部实现&#xff0c;如下&#xff1a; 1、创建空闲任务&#xff08;优先级最低&#xff09; 2、如果使能软件定时器&#xff0c;则创建定…...

编程日记 2025/2/1 17:01:34

【小鱼闪闪】单片机开发工具——米思齐软件下载安装（图文）

浏览器打开网址 mixly.org, 在软件平台选择mixly离线版。 最新版本为3.0&#xff0c;会支持audinio&#xff0c; ESP32、ESP8266 &#xff0c; 可以选择下载安装器或者完整版。 这里选择下载安装器&#xff0c;下载后运行“一键更新.bat”&#xff0c;即可自动下载最新版本的M…...

编程日记 2025/2/1 16:56:30

MFC开发，给对话框添加垂直滚动条并解决鼠标滚动响应的问题

无论在使用QT或者MFC进行界面开发时&#xff0c;都会出现在一个对话框里面存在好多的选项&#xff0c;导致对话框变得非常长或者非常大&#xff0c;就会显现的不美观&#xff0c;在这种情况下通常是添加一个页面的滚动条来解决这个问题&#xff0c;下面我们就来介绍给MFC的对话…...

编程日记 2025/2/1 16:55:29

动态规划DP 最长上升子序列模型 导弹防御模型（题目分析+C++完整代码实现）

概览检索 动态规划DP 最长上升子序列模型 导弹防御系统 原题链接 AcWiing 187. 导弹防御系统 题目描述 为了对抗附近恶意国家的威胁&#xff0c;R国更新了他们的导弹防御系统。 一套防御系统的导弹拦截高度要么一直 严格单调 上升要么一直 严格单调 下降。 例如&#xff0…...

编程日记 2025/2/1 16:53:26

LevelDB 源码阅读：写入键值的工程实现和优化细节

读、写键值是 KV 数据库中最重要的两个操作&#xff0c;LevelDB 中提供了一个 Put 接口&#xff0c;用于写入键值对。使用方法很简单&#xff1a; leveldb::Status status leveldb::DB::Open(options, "./db", &db); status db->Put(leveldb::WriteOptions…...

编程日记 2025/2/1 16:51:23

药店药品销售管理系统的设计与实现

标题:药店药品销售管理系统的设计与实现 内容:1.摘要 摘要&#xff1a;本文介绍了药店药品销售管理系统的设计与实现。该系统旨在提高药店的运营效率和管理水平&#xff0c;通过信息化手段实现药品销售、库存管理、财务管理等功能。本文详细阐述了系统的需求分析、设计思路、技…...

编程日记 2025/2/1 16:47:18

人格分裂(交互问答)-小白想懂Elasticsearch

通过交互式追问了解一个中间件 ? 啥是Elasticsearch ! 分布式搜索和分析引擎 ? 为啥是分布式搜索&#xff0c;单体难道用不了吗 ? 实际上是说这个东西可以分布式部署 ! 单机可用但扩展性差&#xff0c;分布式通过分片、副本和负载均衡实现海量数据存储与高并发处理 ? 提…...

编程日记 2025/2/1 16:46:17

【论文投稿-第八届智能制造与自动化学术会议（IMA 2025）】HTML, CSS, JavaScript：三者的联系与区别

大会官网&#xff1a;www.icamima.org 目录 前言 一、HTML&#xff08;超文本标记语言&#xff09;&#xff1a;网页的骨架 HTML 的作用&#xff1a; 例子&#xff1a; 总结&#xff1a; 二、CSS&#xff08;层叠样式表&#xff09;&#xff1a;网页的外观设计 CSS 的…...

编程日记 2025/2/1 16:43:09

python | OpenCV小记（一）：cv2.imread(f) 读取图像操作（待更新）

python | OpenCV小记&#xff08;一&#xff09;&#xff1a;cv2.imread&#xff08;f&#xff09;读取图像操作 1. 为什么 [:, :, 0] 提取的是第一个通道&#xff08;B 通道&#xff09;&#xff1f;OpenCV 的通道存储格式索引操作 [:, :, 0] 的解释常见误解 1. 为什么 [:, :,…...

编程日记 2025/2/1 16:40:02

网络工程师 （9）文件管理

一、树形目录结构 &#xff08;一&#xff09;定义与构成 树形目录结构由一个根目录和若干层子文件夹&#xff08;或称为子目录&#xff09;组成&#xff0c;它像一棵倒置的树。这棵树的根称为根文件夹&#xff08;也叫根目录&#xff09;&#xff0c;从根向下&#xff0c;每一…...

编程日记 2025/2/1 16:38:00

Java中的线程池参数(详解)

public ThreadPoolExecutor(int corePoolSize,int maximumPoolSize,long keepAliveTime,TimeUnit unit,BlockingQueue<Runnable> workQueue,ThreadFactory threadFactory,RejectedExecutionHandler handler) {} 此构造方法的参数如下&#xff1a; int corePoolSize&…...

编程日记 2025/2/1 16:33:56

2 MapReduce

2 MapReduce 1. MapReduce 介绍1.1 MapReduce 设计构思 2. MapReduce 编程规范3. Mapper以及Reducer抽象类介绍1.Mapper抽象类的基本介绍2.Reducer抽象类基本介绍 4. WordCount示例编写5. MapReduce程序运行模式6. MapReduce的运行机制详解6.1 MapTask 工作机制6.2 ReduceTask …...

编程日记 2025/2/1 16:28:44

如何用函数去计算x年x月x日是(C#)

如何用函数去计算x年x月x日是? 由于现在人工智能的普及,我们往往会用计算机去算,或者去记录事情 1.计算某一年某一个月有多少天 2.计算某年某月某日是周几 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threadin…...

编程日记 2025/2/1 16:24:31

开发过程中如何减少属性注释?

一、注释冗余 举个例子&#xff0c;我们在开发项目中肯定会有状态字段&#xff0c;现在有个工单状态枚举 StatusEnum.java package cn.zxj.note;/*** author: Administrator* since: 2025/1/30 14:40* description:*/ public enum StatusEnum {TO_BE_SUBMITTED(1,"待提交…...

编程日记 2025/2/1 16:23:22

NX/UG二次开发—CAM—快速查找程序参数名称

使用UF_PARAM_XXX读取或设置参数时，会发现程序中有一个INT类型参数param_index，这个就是对应程序中的参数，比如读取程序余量，则param_index = UF_PARAM_STOCK_PART，读取程序的加工坐标系则param_index = UF_PARAM_MCS等等。 你需要读取什么参数，只要只能在uf_param_indic…...

编程日记 2025/2/1 16:18:13

Pixel Mind Decoder 效果惊艳展示：多语言文本情绪解码对比

Pixel Mind Decoder 效果惊艳展示&#xff1a;多语言文本情绪解码对比 1. 情绪解码技术的新突破 在数字沟通日益频繁的今天&#xff0c;准确理解文字背后的情绪成为AI领域的重要挑战。Pixel Mind Decoder作为新一代多语言情绪分析工具&#xff0c;通过深度学习模型实现了对文…...

编程新知 2026/3/30 6:36:52

FLUX.1-dev像素艺术模型效果对比：原生FLUX.1-dev vs Pixel Dream微调版差异

FLUX.1-dev像素艺术模型效果对比&#xff1a;原生FLUX.1-dev vs Pixel Dream微调版差异 1. 像素艺术生成技术概览 像素艺术作为一种独特的数字艺术形式&#xff0c;近年来在游戏开发、NFT创作和数字设计领域重新焕发活力。传统像素艺术创作需要艺术家手动绘制每个像素点&…...

编程新知 2026/3/30 6:24:51

小爱音箱改造AUX输入/输出全攻略：一个“几乎成功”的故事

前言很多朋友都想给小爱音箱增加AUX输入和输出功能&#xff0c;实现外接电视、电脑等音源&#xff0c;同时将音箱的声音输出到更大的外置音响系统。网上有很多改造教程&#xff0c;但普遍存在一个严重问题&#xff1a;只实现了单声道输入&#xff0c;浪费了硬件本身的立体声能力…...

编程新知 2026/3/30 6:18:50

不止于部署：用Docker和Helm在K8s上玩转JFrog Artifactory + Xray安全扫描全家桶

云原生时代的DevSecOps实践&#xff1a;基于Docker与Helm的JFrog全家桶深度集成指南 当微服务架构成为企业数字化转型的标配&#xff0c;如何高效管理海量制品并确保其安全性&#xff0c;已成为每个技术团队必须面对的挑战。传统单机部署模式在弹性扩展、灾备能力等方面的局限性…...

编程新知 2026/3/30 5:54:34

为什么92%的Java边缘项目因Classloader泄漏失败？揭秘3层隔离沙箱设计与实时热替换机制

第一章&#xff1a;Java边缘计算轻量级运行时开发概览边缘计算场景对运行时环境提出严苛要求&#xff1a;低内存占用&#xff08;通常 ≤ 64MB&#xff09;、毫秒级冷启动、有限依赖、原生支持资源约束设备&#xff08;如 ARM64 IoT 网关、工业 PLC&#xff09;。Java 生态传统…...

编程新知 2026/3/30 5:40:25

保姆级教程：在PVE上5分钟搞定一个Ubuntu LXC容器，并配置好Docker环境

5分钟极速部署&#xff1a;PVE上Ubuntu LXC容器与Docker环境全自动配置指南 刚接触家庭服务器的朋友往往被复杂的虚拟化环境劝退。今天分享的这套方案&#xff0c;能让你在PVE平台上用不到5分钟时间&#xff0c;快速获得一个开箱即用的Ubuntu容器&#xff0c;并预装好Docker环境…...

编程新知 2026/3/30 5:22:20

写作压力小了！2026最新AI论文写作工具测评与推荐

2026年真正好用的AI论文写作工具&#xff0c;核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测&#xff0c;千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队&#xff0c;覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 …...

编程新知 2026/3/30 5:16:16

__attribute__((unused))的妙用：如何优雅地处理未使用的变量与参数

1. 为什么我们需要__attribute__((unused)) 在C/C开发中&#xff0c;编译器警告就像一位严格的代码审查员&#xff0c;时刻提醒我们可能存在的问题。但有时候&#xff0c;我们确实需要定义一些暂时不使用的变量或参数&#xff0c;比如为了保持接口兼容性&#xff0c;或者在某些…...

编程新知 2026/3/30 4:33:46

终极Windows XP错误对话框组件：怀旧系统提示的优雅实现指南

终极Windows XP错误对话框组件&#xff1a;怀旧系统提示的优雅实现指南 【免费下载链接】winXP &#x1f3c1; Web based Windows XP desktop recreation. 项目地址: https://gitcode.com/gh_mirrors/wi/winXP 你是否怀念Windows XP那个经典的错误提示对话框&#xff1…...

编程新知 2026/3/30 4:25:28

FPGA时序优化实战：如何用Path Group提升关键路径性能（附PrimeTime配置）

FPGA时序优化实战&#xff1a;如何用Path Group提升关键路径性能&#xff08;附PrimeTime配置&#xff09; 在FPGA设计流程中&#xff0c;时序收敛往往是工程师面临的最大挑战之一。当设计规模达到数百万门级别时&#xff0c;传统的全局优化方法常常会导致关键路径被非关键路径…...

编程新知 2026/3/30 4:13:24