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

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

news 2025/9/15 11:54:50

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

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/9/9 10:11:34

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/8/11 21:47:18

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/30 14:13:39

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/8/4 15:55:44

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/9/13 17:42:11

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/9/2 18:41:56

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/9/2 17:48:08

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/9/14 5:50:36

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

编程新知 2025/6/10 21:19:52