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.mfbz.cn/a/638253.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

1分钟带你搞定Pandas DataFrame运算

1分钟带你搞定Pandas DataFrame运算

1. DataFrame之间的运算 在运算中自动对齐不同索引的数据 如果索引不对应&#xff0c;则补NaN DataFrame没有广播机制 导包 # 导包import numpy as npimport pandas as pd 创建 DataFrame df1 不同人员的各科目成绩&#xff0c;月考一 # 创建DataFrame二维数组df1 pd.Da…
阅读更多...
手把手教你搭建一个花店小程序商城

手把手教你搭建一个花店小程序商城

如果你是一位花店店主&#xff0c;想要为你的生意搭建一个精美的小程序商城&#xff0c;以下是你将遵循的五个步骤。 步骤1&#xff1a;登录乔拓云平台进入后台 首先&#xff0c;你需要登录乔拓云平台的后台管理页面。你可以在电脑或移动设备上的浏览器中输入乔拓云的官方网站…
阅读更多...
初始Java篇（JavaSE基础语法）—— 内部类

初始Java篇（JavaSE基础语法）—— 内部类

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaSE 目录 内部类的概念 内部类的种类 使用举例&#xff1a; 1. 静态内部类&#xff1a; 2. 实例内部类 3. 局部内部类 4. 匿名内部…
阅读更多...
深度学习-Softmax回归+损失函数+图像分类数据集

深度学习-Softmax回归+损失函数+图像分类数据集

目录 Softmax回归回归 VS 分类Kaggle上的分类问题 从回归到多类分类回归分类从回归到多类分类-均方损失从回归到多类分类-无校验比例从回归到多类分类-校验比例 Softmax和交叉熵损失总结损失函数均方损失绝对值损失函数鲁棒损失 图像分类数据集通过框架中内置函数将FashionMNIS…
阅读更多...
二叉树顺序结构及链式结构

二叉树顺序结构及链式结构

一.二叉树的顺序结构 1.定义&#xff1a;使用数组存储数据&#xff0c;一般使用数组只适合表示完全二叉树&#xff0c;此时不会有空间的浪费 注&#xff1a;二叉树的顺序存储在逻辑上是一颗二叉树&#xff0c;但是在物理上是一个数组&#xff0c;此时需要程序员自己想清楚调整…
阅读更多...
vue小记——小组件（1）

vue小记——小组件（1）

代码&#xff1a; <template><div><el-steps :active"active" finish-status"success" simple><el-step title"数据导入"><i class"fa fa-cloud-upload fa-icon-custom" slot"icon"></i…
阅读更多...
一文带你了解所有常用排序算法

一文带你了解所有常用排序算法

目录 快速排序 堆排序 桶排序 归并排序 拓扑排序 本文主要介绍那些我在刷题过程中常用到的排序算法: 快速排序,堆排序,桶排序,归并排序,拓扑排序 其余算法例如冒泡,插入这种效率特别低的算法就不介绍了,用的可能性极小 每一个算法都将采用例题加解释的方式进行介绍 快速…
阅读更多...
创意无限，设计所需——Affinity Designer for Mac/win强大登场

创意无限，设计所需——Affinity Designer for Mac/win强大登场

在当今数字设计领域&#xff0c;寻找一款功能强大、操作简便的矢量图设计软件并不容易。然而&#xff0c;Affinity Designer 凭借其出色的性能和令人惊艳的功能&#xff0c;在众多设计师中脱颖而出&#xff0c;成为了首选软件之一。今天&#xff0c;让我们一起来探索 Affinity …
阅读更多...
【深度学习】与【PyTorch实战】

【深度学习】与【PyTorch实战】

目录 一、深度学习基础 1.1 神经网络简介 1.2 激活函数 1.3 损失函数 1.4 优化算法 二、PyTorch基础 2.1 PyTorch简介 2.2 张量操作 2.3 构建神经网络 2.4训练模型 2.5 模型评估 三、PyTorch实战 3.1 数据加载与预处理 3.2 模型定义与训练 3.3 模型评估与调优 3…
阅读更多...
618购物节快递量激增，EasyCVR视频智能分析助力快递网点智能升级

618购物节快递量激增，EasyCVR视频智能分析助力快递网点智能升级

随着网络618购物节的到来&#xff0c;物流仓储与快递行业也迎来业务量暴增的情况。驿站网点和快递门店作为物流体系的重要组成部分&#xff0c;其安全性和运营效率日益受到关注。为了提升这些场所的安全防范能力和服务水平&#xff0c;实施视频智能监控方案显得尤为重要。 一、…
阅读更多...
领券拿外卖返利红包，最低0元吃外卖

领券拿外卖返利红包，最低0元吃外卖

小蚕荟是利用本地资源和自媒体优势构建的“本地生活服务”平台&#xff0c;总部位于杭州&#xff0c;旨在为用户提供热门的吃喝玩乐本地生活服务类产品。布局已覆盖杭州、南京、上海等一二线城市。 小蚕荟是一款专为用户吃外卖省钱的生活工具&#xff0c;单单可返利15元起&…
阅读更多...
【教学类-58-03】黑白三角拼图03（4*4宫格）总数算不出+随机抽取10张

【教学类-58-03】黑白三角拼图03（4*4宫格）总数算不出+随机抽取10张

背景需求&#xff1a; 【教学类-58-01】黑白三角拼图01&#xff08;2*2宫格&#xff09;256种-CSDN博客文章浏览阅读318次&#xff0c;点赞10次&#xff0c;收藏12次。【教学类-58-01】黑白三角拼图01&#xff08;2*2宫格&#xff09;256种https://blog.csdn.net/reasonsummer/…
阅读更多...
数组-求和为k的连续子数组

数组-求和为k的连续子数组

一、题目描述 二、题目思路 这里注意&#xff1a;题目要求时间、空间复杂度都为O(n)&#xff0c;所以不能直接通过双层循环来暴力解(时间复杂度为O&#xff08;n&#xff09;)&#xff0c;可以使用Map实现。 1. 遍历数组计算sum(i)&#xff0c;Map记录sum值第一次出现的位置&…
阅读更多...
STM32 MAP文件结合固件文件分析

STM32 MAP文件结合固件文件分析

文章目录 加载域的结束地址并不是固件的结束地址&#xff1f;ROM中执行域的描述RAM中执行域的描述问题分析 中断向量表在固件中的存储位置代码段在固件中的位置只读数据Regin$$Table RW Data段其中的内部机理 总结 MAP 文件分析可以参考之前的文章 程序代码在未运行时在存储器…
阅读更多...
LeetCode刷题之HOT100之多数元素

LeetCode刷题之HOT100之多数元素

2024/5/21 起床走到阳台&#xff0c;外面绵柔细雨&#xff0c;手探出去&#xff0c;似乎感受不到。刚到实验室&#xff0c;窗外声音放大&#xff0c;雨大了。昨天的两题任务中断了&#xff0c;由于下雨加晚上有课。这样似乎也好&#xff0c;不让我有一种被强迫的感觉&#xff0…
阅读更多...
SpringCloud Alibaba Nacos分类配置--多方案配置隔离

SpringCloud Alibaba Nacos分类配置--多方案配置隔离

文章目录 Nacos 分类配置(实现配置隔离)1.DataID 方案需求分析/图解配置实现测试 2.Group 方案需求分析/图解配置实现修改application.yml修改bootstrap.yml测试 3.Namespace 方案需求分析/图解配置实现修改application.yml修改bootstrap.yml测试 Namespace/Group/Data ID 关系…
阅读更多...
基于springboot+vue+Mysql的逍遥大药房管理系统

基于springboot+vue+Mysql的逍遥大药房管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…
阅读更多...
EfficientSAM分割对象后求其中图像中的高

EfficientSAM分割对象后求其中图像中的高

1 分割对象 EfficientSAM https://github.com/yformer/EfficientSAM 2 计算在图像中最高点即y值最小点 import os import cv2def read_images(folder_path):image_files [f for f in os.listdir(folder_path) iff.endswith(".jpg") or f.endswith(".png&quo…
阅读更多...
文心智能体-恋爱专家

文心智能体-恋爱专家

⭐简单说两句⭐ ✨ 正在努力的小叮当~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &a…
阅读更多...
邮件系统数据面临的安全问题及解决方法

邮件系统数据面临的安全问题及解决方法

随着电子邮件的普及&#xff0c;邮件系统已成为企业、学校、个人等用户之间进行信息交流的重要工具。然而&#xff0c;随着数据量的增加和用户对邮件系统的依赖&#xff0c;邮件系统数据安全问题也逐渐凸显。下面U-Mail技术张工就给大家讲解一下邮件系统数据面临的主要安全问题…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站