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

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

news 文章来源：https://blog.csdn.net/engchina/article/details/145405472 2025/5/6 20:13:12

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

socket实现HTTP请求，参考HttpURLConnection源码解析

背景 有台服务器&#xff0c;网卡绑定有2个ip地址&#xff0c;分别为&#xff1a; A&#xff1a;192.168.111.201 B&#xff1a;192.168.111.202 在这台服务器请求目标地址 C&#xff1a;192.168.111.203 时必须使用B作为源地址才能访问目标地址C&#xff0c;在这台服务器默认…...

编程日记 2025/2/1 16:16:10

访问CMOS RAM

实验内容、程序清单及运行结果 访问CMOS RAM&#xff08;课本实验14&#xff09; 代码如下&#xff1a; assume cs:code data segment time db yy/mm/dd hh:mm:ss$ ;int 21h 显示字符串&#xff0c;要求以$结尾 table db 9,8,7,4,2,0 ;各时间量的存放单元 data ends cod…...

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

解决AnyConnect开机自启动问题

文章目录 一、问题描述二、解决方案 (Windows)1.开启-设置2.点击“应用”3.点击“启动”&#xff0c;选择“关” 三、参考文章 一、问题描述 学校指定的VPN总是开机自启动&#xff0c;然而 设置-Preferences 中却没有取消开机自启的选项。 似乎开机自启是必然的&#xff0c;我…...

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

芯片AI深度实战：进阶篇之vim内verilog实时自定义检视

【痛点】 传统Verilog开发中，工程师不断"编码→仿真→查错"的循环。本文整合AST解析与Vim编辑器，在编码阶段即实现： ✔️ 自动标记逻辑问题 ✔️ AI+ 发现涉及多模块逻辑错误 ✔️ 强制代码风格 【解决方案】 1️⃣ 基于AST的精准模式匹配 - 深度集成…...

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

数据结构实战之线性表（一）

一.线性表的定义和特点 线性表的定义 线性表是一种数据结构&#xff0c;它包含了一系列具有相同特性的数据元素&#xff0c;数据元素之间存在着顺序关系。例如&#xff0c;26个英文字母的字符表 ( (A, B, C, ....., Z) ) 就是一个线性表&#xff0c;其中每个字母就是一个数据…...

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

jdk8项目升级到jdk17——岁月云实战

由于很早之前就升级springboot版本到2.7.9&#xff0c;以前做好了铺垫&#xff0c;相对升级要容易一些。 1 项目打包成exe 1.1 jpackage打包jar C:\Users\39305\Desktop\数量核对>jpackage ^ More? --type exe ^ More? --name zp-server ^ More? --input C:\Use…...

编程日记 2025/2/1 15:59:39

商品列表及商品详情展示

前言 本文将展示一段结合 HTML、CSS 和 JavaScript 的代码&#xff0c;实现了一个简单的商品展示页面及商品详情&#xff0c;涵盖数据获取、渲染、搜索及排序等功能。 效果展示 点击不同的商品会展示对应的商品详情。 代码部分 代码总体实现 <!DOCTYPE html> <htm…...

编程日记 2025/2/1 15:58:32

使用where子句筛选记录

默认情况下,SearchCursor将返回一个表或要素类的所有行.然而在很多情况下,常常需要某些条件来限制返回行数. 操作方法: 1.打开IDLE,加载先前编写的SearchCursor.py脚本 2.添加where子句,更新SearchCursor()函数,查找记录中有<>文本的<>字段 with arcpy.da.Searc…...

编程日记 2025/2/1 15:57:22

SQL Server查询计划操作符（7.3）——查询计划相关操作符（5）

7.3. 查询计划相关操作符 38）Flow Distinct：该操作符扫描其输入并对其去重。该操作符从其输入得到每行数据时即将其返回（除非其为重复数据行，此时，该数据行会被抛弃），而Distinct操作符在产生任何输出前将消费所有输入。该操作符为逻辑操作符。该操作符具体如图7.2-38中…...

编程日记 2025/2/1 15:56:19

C++中常用的十大排序方法之4——希尔排序

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C中常用的排序方法之4——希尔排序的相…...

编程日记 2025/2/1 15:55:17