CSS3 新增背景属性 + 新增边框属性（如果想知道CSS3新增背景属性和新增边框属性的知识点，那么只看这一篇就够了！）

        前言：CSS3在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题，本篇文章主要讲解的为CSS3新增背景属性和新增边框属性。

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

先让我们看一下本篇文章的大致内容：

目录

1.CSS3 新增背景属性

        （1）background-origin

        （2）background-clip

        （3）background-size

        （4）backgorund 复合属性

        补充：多背景图

2.CSS3新增边框属性

        （1）边框圆角

        （2）边框外轮廓

1.CSS3 新增背景属性

        先让我们来看一下有哪些新增的属性：

接下来我们一一进行讲解：

        （1）background-origin

background-origin属性作用：用于设置背景图的原点。

常见属性值：

        1. padding-box ：从padding 区域开始显示背景图像。—— 默认值
        2. border-box ： 从border 区域开始显示背景图像。
        3. content-box ： 从content 区域开始显示背景图像。

我们从常见属性值中我们就可以发现，padding-box是background-origin的默认值，也就是说背景图片是从padding区域开始显示背景图像的（例如）：

html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./test.css">
</head><body><div class="outer"> </div>
</body></html>

CSS代码：

.outer {width: 300px;height: 300px;border: 30px dashed grey;padding: 30px;background-image: url(./image/fish.jpg);/* 用于设置背景大小的，下文会进行讲解，这里只看效果即可 */background-size: cover;
}

其中蓝色阴影区为内容区，我们会发现背景的默认起始位置为盒子的padding区，这也应证了padding-box是background-origin的默认值。

接下来我们分别将background-origin的值改为border-box和content-box看一下效果：

        border-box：

CSS代码：

.outer {width: 300px;height: 300px;border: 30px dashed grey;padding: 30px;background-image: url(./image/fish.jpg);background-origin: border-box;/* 用于设置背景大小的，下文会进行讲解，这里只看效果即可 */background-size: cover;
}

        content-box：

CSS代码：

.outer {width: 300px;height: 300px;border: 30px dashed grey;padding: 30px;background-image: url(./image/fish.jpg);background-origin: content-box;/* 用于设置背景大小的，下文会进行讲解，这里只看效果即可 */background-size: cover;
}

我们会看到其不一样的效果，这样我们就大致的了解了background-origin属性。

        

        （2）background-clip

background-clip属性的作用：用于设置背景图的向外裁剪的区域。

常见属性值：

        1. border-box ： 从border 区域开始向外裁剪背景。 —— 默认值
        2. padding-box ： 从padding 区域开始向外裁剪背景。
        3. content-box ： 从content 区域开始向外裁剪背景。

细心的读者在上文的例子中就可以发现，设置了背景后，如果背景图片过大，其背景是从border区域开始向外裁剪背景的（例如）：

html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./test.css">
</head><body><div class="outer"> </div>
</body></html>

CSS代码：

.outer {width: 300px;height: 300px;border: 30px dashed grey;padding: 30px;background-image: url(./image/fish.jpg);
}

和background-origin属性类似，我们可以设置其背景的裁剪边缘，是从border区域开始向外裁剪背景，还是从padding区域开始向外裁剪背景，还是从content区域开始向外裁剪背景。这里直接展示一下效果：

        padding-box：

        

        content-box：

这样我们就大致的了解了background-clip属性了。

        

        （3）background-size

background-size属性的作用：用于设置背景图的尺寸。（以下是其设置背景图的尺寸的四种方式）：

        方式一：用长度值指定背景图片大小，不允许负值。

background-size: 300px 200px;

        方式二：用百分比指定背景图片大小，不允许负值。

background-size: 100% 100%;

        方式三：contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内。

background-size: contain;

如图：（设置为contain）：

注意：这种方式设置背景图片大小可能会造成容器里部分区域没有背景图片。

         方式四：cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上。

background-size: cover;

如图：（设置为cover）：

注意：这种方式设置背景图片大小可能会造成容器里部分区域没有背景图片。

这样我们就大致的了解了background-size属性了。

        （4）backgorund 复合属性

和其他的复合属性一样，backgorund 复合属性就是将有关背景的一些属性放到一个属性里面来写。但是我们要注意其里面的复合属性的前后顺序。

前后顺序：

background: color url repeat position / size origin clip

注意：

        1. origin 和 clip 的值如果一样，如果只写一个值，则origin 和 clip 都设置；如果设置了两个值，前面的是origin ，后面的clip 。
        2. size 的值必须写在 position 值的后面，并且用 / 分开。

这样我们就大致的了解了backgorund 复合属性了。

        补充：多背景图

        我们要知道，在CSS3中允许元素设置多个背景图片，那么我们如何给一个元素设置多个背景图片呢？

我们直接使用案例来进行演示：

现在我们将刚才的背景图片改为多背景图：

div {width: 300px;height: 300px;padding: 10px;border: 10px dashed grey;background: url(./image/bg-lt.png) no-repeat,url(./image/bg-rt.png) no-repeat right top,url(./image/bg-lb.png) no-repeat left bottom,url(./image/bg-rb.png) no-repeat right bottom;
}

我们就会发现其背景图片是由四个图片组成的。

2.CSS3新增边框属性

对于CSS3新增边框属性来说，总共我们需要知道两个，分别是：边框圆角 和 边框外轮廓。

        （1）边框圆角

先让我们看一下边框圆角：

在 CSS3 中，使用border-radius属性可以将盒子变为圆角。例如：

同时设置四个角的圆角：

border-radius:30px;

html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./test.css">
</head><body><div></div>
</body></html>

CSS代码：

div {width: 300px;height: 300px;border-radius: 30px;background-color: aquamarine;
}

当然我们还可以分开设置每个角的圆角：

属性名作用
border-top-left-radius设置左上角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的x 半径、y 半径。
border-top-right-radius设置右上角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的x 半径、y 半径。
border-bottom-right-radius设置右下角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的x 半径、y 半径。
border-bottom-left-radius设置左下角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的x 半径、y 半径。

这里我们以border-top-left-radius为例子：

html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.18.css">
</head><body><div></div>
</body></html>

CSS代码：

div {width: 200px;height: 200px;background-color: aquamarine;/* 长轴长为30px，短轴长为10px */border-top-left-radius: 30px 10px;
}

当然，边框圆角还有复合属性：（但是基本不会使用！）

border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

这样我们就大致了解了CSS3新增边框属性了。

        （2）边框外轮廓

先让我们从效果上看一下什么是边框外轮廓（如图）：

其实边框外轮廓和border很相似，但是其是在margin区外的一层边框。

那了解了什么是边框外轮廓之后，让我们看一下其有哪些属性：

1. outline-width ：外轮廓的宽度。
2. outline-color ：外轮廓的颜色。
3. outline-style ：外轮廓的风格。其属性值有以下几个：
        （1）none ： 无轮廓
        （2）dotted ： 点状轮廓
        （3）dashed ： 虚线轮廓
        （4）solid ： 实线轮廓
        （5）double ： 双线轮廓
4. outline-offset 设置外轮廓与边框的距离，正负值都可以设置。

当然，边框外轮廓也有复合属性，例如：

outline:50px solid blue;

        我们会发现其属性值和border几乎一模一样，是的，没错，设置边框外轮廓就和设置border类似，只不过需要注意其位置就可以了。

这里我们只讲解一下outline-offset ：

        outline-offset 是用来设置外轮廓与边框的距离，正负值都可以设置。

我们直接使用代码来看一下：

html代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./2024.5.18.css">
</head><body><div></div>
</body></html>

CSS代码：

div {width: 200px;height: 200px;background-color: aquamarine;outline: 5px dashed green;
}

但是我们给CSS代码添加 outline-offset 属性之后：

div {width: 200px;height: 200px;background-color: aquamarine;outline: 5px dashed green;outline-offset: 9px;
}

这样我们就大致的了解了边框外轮廓属性了。

想了解更多HTML+CSS知识------------------->CSS_秋刀鱼不做梦的博客-CSDN博客

以上就是本篇文章的所有内容了~~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/14498.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

视觉SLAM十四讲：从理论到实践（Chapter5：相机与图像）

视觉SLAM十四讲：从理论到实践（Chapter5：相机与图像）

前言 学习笔记&#xff0c;仅供学习&#xff0c;不做商用&#xff0c;如有侵权&#xff0c;联系我删除即可 目标 理解针孔相机的模型、内参与径向畸变参数。理解一个空间点是如何投影到相机成像平面的。掌握OpenCV的图像存储与表达方式。学会基本的摄像头标定方法。 一、相…
阅读更多...
机器学习第四十周周报 WDN GGNN

机器学习第四十周周报 WDN GGNN

文章目录 week40 WDN GGNN摘要Abstract一、文献阅读1. 题目2. abstract3. 网络架构3.1 问题提出3.2 GNN3.3 CSI GGNN 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.3.1 数据获取4.3.2 参数设置4.3.3 实验结果 5. 结论二、GGNN1. 代码解释2. 网络结构小结参考文献参考文…
阅读更多...
基础3 探索JAVA图形编程桌面：逻辑图形组件实现

基础3 探索JAVA图形编程桌面：逻辑图形组件实现

在一个宽敞明亮的培训教室里&#xff0c;阳光透过窗户柔和地洒在地上&#xff0c;教室里摆放着整齐的桌椅。卧龙站在讲台上&#xff0c;面带微笑&#xff0c;手里拿着激光笔&#xff0c;他的眼神中充满了热情和期待。他的声音清晰而洪亮&#xff0c;传遍了整个教室&#xff1a;…
阅读更多...
Hsql每日一题 | day02

Hsql每日一题 | day02

前言 就一直向前走吧&#xff0c;沿途的花终将绽放~ 题目&#xff1a;主播同时在线人数问题 如下为某直播平台主播开播及关播时间&#xff0c;根据该数据计算出平台最高峰同时在线的主播人数。 id stt edt 1001,2021-06-14 12:12:12,2021-06-14 18:1…
阅读更多...
【错误解决】使用HuggingFaceInstructEmbeddings时的一个错误

【错误解决】使用HuggingFaceInstructEmbeddings时的一个错误

起因&#xff1a;使用huggingface构建一个问答程序时出现的问题。 错误内容&#xff1a; 分析&#xff1a; 查看代码发现&#xff0c;HuggingFaceInstructEmbeddings和sentence-transformers模块版本不兼容导致。 可以明显看到方法参数不同。 解决&#xff1a; 安装sentenc…
阅读更多...
element-ui的Form 表单有些项的参数校验

element-ui的Form 表单有些项的参数校验

项目场景&#xff1a; 提示&#xff1a;项目相关背景&#xff1a; 项目场景&#xff1a;有时候自己的Form 表单中的某几项引入的一些项不好去校验 这样的咋去校验呢&#xff1f; 解决方案&#xff1a; 提示&#xff1a;问题的具体解决方案&#xff1a; 例如&#xff1a;写一…
阅读更多...
【pyspark速成专家】3_Spark之RDD编程1

【pyspark速成专家】3_Spark之RDD编程1

目录 ​编辑 一&#xff0c;创建RDD 二&#xff0c;常用Action操作 三&#xff0c;常用Transformation操作 一&#xff0c;创建RDD 创建RDD主要有两种方式&#xff0c;一个是textFile加载本地或者集群文件系统中的数据&#xff0c; 第二个是用parallelize方法将Driver中的…
阅读更多...
fortran77 初始化矩阵 打印矩阵 模版 备拷

fortran77 初始化矩阵 打印矩阵 模版 备拷

1&#xff0c;源码 SUBROUTINE INIT_MATRIX(A, m, n, lda)DOUBLE PRECISION A(*)CALL SRAND(2024)DO i1, mDO j1, nA(i lda*(j-1)) RAND() RAND() C WRITE(*, (F8.4)) A(i)END DOEND DOENDSUBROUTINE PRINT_MATRIX(A, m, n, lda)DOUBLE PREC…
阅读更多...
【Vue3】封装axios请求（cli和vite）

【Vue3】封装axios请求（cli和vite）

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 Vue 【Vue3】env环境变量的配置和使用&#xff08;区分cli和vite&#xff09; 文章目录 Vue前言一、常见用法二、vue3cli封装接口1..env配置2..dev(开…
阅读更多...
ADC协议详解

ADC协议详解

文章目录 简介工作流程原理图时序图 优点与缺点 简介 模数转换器&#xff08;ADC&#xff0c;Analog-to-Digital Converter&#xff09;是一种将模拟信号转换为数字信号的电子设备。模拟信号通常表示物理测量的连续变化&#xff0c;如声音、温度、压力等&#xff0c;而数字信号…
阅读更多...
codewars check_same_case 题解

codewars check_same_case 题解

题目 编写一个函数来检查两个给定的字符是否大小写相同。 如果任何字符不是字母&#xff0c;则返回-1如果两个字符大小写相同&#xff0c;则返回1如果两个字符都是字母且大小写不同&#xff0c;则返回0 例子 a并g返回1A并C返回1b并G返回0B并g返回00并?返回-1题解 1 此题主…
阅读更多...
AI大模型与产品策略：产品经理的致胜之道

AI大模型与产品策略：产品经理的致胜之道

随着AI大模型的快速进化&#xff0c;其生态的构建&#xff0c;已经从C端过度到了B端。 作为产品经理&#xff0c;我们应该及时响应大趋势&#xff0c;在产品策略上融入AI大模型模块&#xff0c;深度挖掘AI大模型的应用价值&#xff0c;这才是作为PM在现阶段最有价值的地方。 …
阅读更多...
想学接口测试，不知道那个工具适合？

想学接口测试，不知道那个工具适合？

引言&#xff1a; 接口测试在软件开发中扮演着至关重要的角色&#xff0c;它可以帮助我们验证系统的功能、性能和安全性。而选择适合的工具是进行接口测试的重要一步。本文将从零开始&#xff0c;为你详细介绍如何选择合适的工具&#xff0c;并提供规范的指导。 一、了解接口…
阅读更多...
初识C语言——第二十八天

初识C语言——第二十八天

代码练习1&#xff1a; 用函数的方式实现9*9乘法表 void print_table(int n) {int i 0;int j 0;for (i 1; i< n; i){for (j 1; j< i; j){printf("%d*%d%-3d ", i, j, i * j);}printf("\n");}}int main() {int n 0;scanf("%d", &a…
阅读更多...
汉明码(海明码)的计算的规则

汉明码(海明码)的计算的规则

一.汉明码的由来 1.汉明码&#xff08;Hamming Code&#xff09;&#xff0c;是在电信领域的一种线性调试码&#xff0c;以发明者理查德卫斯里汉明的名字命名。汉明码在传输的消息流中插入验证码&#xff0c;当计算机存储或移动数据时&#xff0c;可能会产生数据位错误&#x…
阅读更多...
【VUE】 如何关闭ESlint的自动修复功能

【VUE】 如何关闭ESlint的自动修复功能

问题描述例如&#xff1a;原书写代码ESLint自动修复报错如下 方案一、在文件中添加屏蔽警告的代码html代码中JavaScript代码中 方案二、关闭ESLint的自动修复功能1、VSCode 扩展找到 ESLint 插件2、在设置中找到在 settings,json 中编辑3、将"autoFix": true改为&quo…
阅读更多...
4.双指针+递归

4.双指针+递归

一、双指针编程技巧 方法参数传递数组 将数组通过方法参数传递&#xff0c;方法操作的数组和main方法中的数组指向同一块内存区域&#xff0c;意味着方法操作数组&#xff0c;同时会引起main方法中数组的改变以引用的方式作为方法参数进行传递的 元素交换 定义临时变量temp&a…
阅读更多...
第十二节 SpringBoot Starter 系列结束语

第十二节 SpringBoot Starter 系列结束语

感谢阅读&#xff0c;到这里&#xff0c;本系列课程就结束了。 一、为什么选择 SpringBoot Starter SpringBoot 近年来已经成为 Java 应用的必备框架&#xff1b; 而 SpringBoot starter 模式已经成为各大中间件集成到 SpringBoot 应用的首选方式&#xff0c;通过引入 xxx-st…
阅读更多...
C++ | Leetcode C++题解之第101题对称二叉树

C++ | Leetcode C++题解之第101题对称二叉树

题目&#xff1a; 题解&#xff1a; class Solution { public:bool check(TreeNode *u, TreeNode *v) {queue <TreeNode*> q;q.push(u); q.push(v);while (!q.empty()) {u q.front(); q.pop();v q.front(); q.pop();if (!u && !v) continue;if ((!u || !v) ||…
阅读更多...
爬虫基础1

爬虫基础1

一、爬虫的基本概念 1.什么是爬虫&#xff1f; 请求网站并提取数据的自动化程序 2.爬虫的分类 2.1 通用爬虫&#xff08;大而全&#xff09; 功能强大&#xff0c;采集面广&#xff0c;通常用于搜索引擎&#xff1a;百度&#xff0c;360&#xff0c;谷歌 2.2 聚焦爬虫&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023