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

news2024/11/22 22:53:51

        前言：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.coloradmin.cn/o/1688865.html

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

相关文章

关于廉洁的短视频：四川京之华锦信息技术公司

关于廉洁的短视频：四川京之华锦信息技术公司

关于廉洁的短视频&#xff1a;传递清廉之风 在信息爆炸的时代&#xff0c;短视频以其短小精悍、直观生动的特点&#xff0c;成为了人们获取信息、传播价值观念的重要渠道。四川京之华锦信息技术公司在众多主题中&#xff0c;关于廉洁的短视频尤为引人注目&#xff0c;它们以独…
阅读更多...
怿星科技携DDS自动化测试方案亮相是德科技年度技术盛会

怿星科技携DDS自动化测试方案亮相是德科技年度技术盛会

阅读更多...
B站自动回复插件_无需千粉，轻松适配引流拉新资源分享

B站自动回复插件_无需千粉，轻松适配引流拉新资源分享

项目介绍 B站关键词自动回复插件&#xff0c;无需千粉&#xff0c; 很适合做流量做引流做私欲的朋友&#xff0c; 前期没有千粉是无法开启官方自动回复的&#xff0c; 适当的情况下可以用这个插件顶一下&#xff0c; 三联好评领取资源的打法真的超级涨粉&#xff0c; 感谢插件…
阅读更多...
第十二节 SpringBoot Starter 系列结束语

第十二节 SpringBoot Starter 系列结束语

感谢阅读&#xff0c;到这里&#xff0c;本系列课程就结束了。 一、为什么选择 SpringBoot Starter SpringBoot 近年来已经成为 Java 应用的必备框架&#xff1b; 而 SpringBoot starter 模式已经成为各大中间件集成到 SpringBoot 应用的首选方式&#xff0c;通过引入 xxx-st…
阅读更多...
【MATLAB源码-第215期】基于matlab的8PSK调制CMA均衡和RLS-CMA均衡对比仿真，对比星座图和ISI。

【MATLAB源码-第215期】基于matlab的8PSK调制CMA均衡和RLS-CMA均衡对比仿真，对比星座图和ISI。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 CMA算法&#xff08;恒模算法&#xff09; CMA&#xff08;Constant Modulus Algorithm&#xff0c;恒模算法&#xff09;是一种自适应盲均衡算法&#xff0c;主要用于消除信道对信号的码间干扰&#xff08;ISI&#xff09;…
阅读更多...
【软件测试】Selenium + Chrome UI自动化环境搭建

【软件测试】Selenium + Chrome UI自动化环境搭建

文章目录 自动化测试 Selenium Chrome 环境搭建1、下载Chrome 浏览器2、取消Chrome浏览器自动更新3、下载ChromeDriver4、测试环境是否搭建成功 自动化测试 Selenium Chrome 环境搭建 1、下载Chrome 浏览器 https://www.slimjet.com/chrome/google-chrome-old-version.php …
阅读更多...
FastGPT + OneAPI 构建知识库

FastGPT + OneAPI 构建知识库

云端text-embedding模型 这个在前面的文章FastGPT私有化部署OneAPI配置大模型中其实已经说过&#xff0c;大概就是部署完成OneAPI后&#xff0c;分别新建令牌和渠道&#xff0c;并完成FastGPT的配置。 新建渠道 选择模型的类型并配置对应的词向量模型即可&#xff0c;这里我…
阅读更多...
【探索数据结构】线性表之顺序表

【探索数据结构】线性表之顺序表

&#x1f389;&#x1f389;&#x1f389;欢迎莅临我的博客空间&#xff0c;我是池央&#xff0c;一个对C和数据结构怀有无限热忱的探索者。&#x1f64c; &#x1f338;&#x1f338;&#x1f338;这里是我分享C/C编程、数据结构应用的乐园✨ &#x1f388;&#x1f388;&…
阅读更多...
信息学奥赛初赛天天练-10-组合数学-排列组合-一次彻底搞懂分组分配问题

信息学奥赛初赛天天练-10-组合数学-排列组合-一次彻底搞懂分组分配问题

更多资源请关注纽扣编程微信公众号 平均分组 是指将所有的元素分成所有组元素个数相等或部分组元素个数相等&#xff0c;即m个不同的元素平均分成n个组&#xff0c;有多少种分组方法 由于是平均分组&#xff0c;分组选择元素时会出现重复&#xff0c;因此结果需要除以A(n,n…
阅读更多...
LeetCode1466重新规划路线

LeetCode1466重新规划路线

题目描述 n 座城市&#xff0c;从 0 到 n-1 编号&#xff0c;其间共有 n-1 条路线。因此&#xff0c;要想在两座不同城市之间旅行只有唯一一条路线可供选择&#xff08;路线网形成一颗树&#xff09;。去年&#xff0c;交通运输部决定重新规划路线&#xff0c;以改变交通拥堵的…
阅读更多...
【漏洞复现】智慧校园(安校易)管理系统 FileUpProductupdate.aspx 任意文件上传漏洞

【漏洞复现】智慧校园(安校易)管理系统 FileUpProductupdate.aspx 任意文件上传漏洞

0x01 产品简介 "安校易"是银达云创公司基于多年教育市场信息化建设经验沉淀&#xff0c;经过充分的客户需求调研&#xff0c;并依据国家"十三五”"教育信息化建设规范而推出的综合互联网教育信息化解决方案。“安校易“以物联网技术为基础&#xff0c;以学…
阅读更多...
(Askchat.ai、360智脑、鱼聪明、天工AI、DeepSeek)

(Askchat.ai、360智脑、鱼聪明、天工AI、DeepSeek)

目录 1、Askchat.ai - 梦想为蓝图&#xff0c;ChatGPT为笔。 2、360智脑 — 以人为本&#xff0c;安全可信 3、鱼聪明AI - 做您强大的AI助手 (yucongming.com) 4、天工AI-搜索、对话、写作、文档分析、画画、做PPT的全能AI助手 (tiangong.cn) 5、DeepSeek | 深度求索 1、Askch…
阅读更多...
第九节 设计 Starter 不能忽视的细节

第九节 设计 Starter 不能忽视的细节

我们要定义一个生产可用的 Starter &#xff0c;还有几个细节&#xff0c;我们必须要关注。这些细节可以很好的帮助我们写出更优秀的 Starter 一、maven 包依赖 每一个 Starter&#xff0c;可以理解为一个 Jar&#xff0c;这个 Jar 包&#xff0c;如果被其他应用引用&#xf…
阅读更多...
FIFO-Diffusion，一个无需额外训练即可生成长视频的框架。通过确保每个帧引用足够多的先前帧来生成高质量、一致的长视频。

FIFO-Diffusion，一个无需额外训练即可生成长视频的框架。通过确保每个帧引用足够多的先前帧来生成高质量、一致的长视频。

简单来讲&#xff0c;FIFO-Diffusion先通过一些模型如VideoCraft2、zeroscope、Opem-Sora Plan等与FIFO-Diffusion的组合生成短视频&#xff0c;然后取结尾的帧&#xff08;也可以取多帧&#xff09;&#xff0c;再用这一帧的图片生成另一段短视频&#xff0c;然后拼接起来。FI…
阅读更多...
CentOS-7安装教程

CentOS-7安装教程

目录 安装 修改主机名 配置静态IP 镜像下载地址 https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/CentOS-7-x86_64-DVD-2009.iso VMware Workstation Pro下载 VMware Workstation Pro各版本下载&#xff08;2024.5.5之后&#xff09;(Windows与Linux安装包不限…
阅读更多...
MilvusPlus向量数据库增强操作库

MilvusPlus向量数据库增强操作库

项目简介 &#x1f525;&#x1f525;&#x1f525;MilvusPlus&#xff08;简称 MP&#xff09;是一个 Milvus 的操作工具&#xff0c;旨在简化与 Milvus 向量数据库的交互&#xff0c;为开发者提供类似 MyBatis-Plus 注解和方法调用风格的直观 API,提高效率而生。 特性 无侵入…
阅读更多...
【C++11】列表初始化，std::initializer_list和模版可变参数

【C++11】列表初始化，std::initializer_list和模版可变参数

一.列表初始化 一切对象都可以用大括号括起的列表来初始化。 //构造 Date d1(2024, 5, 24); Date d2{2024, 5, 24};//三个构造 new Date[3]{{2024, 5, 23}, {2024, 5, 24}, {2024, 5, 25}};//构造(隐式)拷贝构造 优化->一次构造 Date d3 {2024, 5, 24}; 二. std::initiali…
阅读更多...
基于STM32实现智能空气质量监测系统

基于STM32实现智能空气质量监测系统

目录 文章主题环境准备智能空气质量监测系统基础代码示例&#xff1a;实现智能空气质量监测系统 配置传感器并读取数据数据处理与显示数据存储与传输应用场景&#xff1a;室内环境监测与空气质量控制问题解决方案与优化收尾与总结 1. 文章主题 文章主题 本教程将详细介绍如何…
阅读更多...
AI视频智能分析技术：EasyCVR视频汇聚安防监控智能化方案

AI视频智能分析技术：EasyCVR视频汇聚安防监控智能化方案

1、视频智能分析技术原理 视频智能分析技术是一项基于计算机图像视觉分析技术的创新解决方案。它利用先进的算法&#xff0c;将视频场景中的背景和目标进行有效分离&#xff0c;从而实现对目标的精准分析和追踪。 该技术可以对监控摄像头拍摄到的视频进行分析和识别&#xff0…
阅读更多...
Ue目标身上放准星

Ue目标身上放准星

阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023