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

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

news 2025/7/9 4:36:57

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

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/7/8 17:10:32

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/7/7 0:36:41

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/7/8 15:01:38

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/6/21 4:11:30

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/7/8 12:27:01

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/6/21 18:22:13

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/7/9 4:24:10

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/7/8 4:36:52

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/6/19 4:31:50

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/7/8 1:38:39