前端学习——CSS3

news2025/11/4 11:18:20

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

新增长度单位

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
        }
        .box2 {
            width: 50vw;
            height: 20vh;
            background-color: deeppink;
        }
        .box3 {
            width: 20vmax;
            height: 20vmin;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1">像素</div>
    <div class="box2">vw和vh</div>
    <div class="box3">vmax和vmin</div>
</body>
</html>

在这里插入图片描述

新增盒子模型

box-sizing

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            padding: 5px;
            border: 5px solid black;
            margin-bottom: 20px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: gray;
            padding: 5px;
            border: 5px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

resize

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: orange;
            resize: both;
            overflow: scroll;
        }
        .box2 {
            width: 800px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>
</html>

在这里插入图片描述

box-shadow

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: orange;
            margin: 0 auto;
            margin-top: 100px;
            font-size: 40px;
            /* 2个值：水平位置，垂直位置 */
            /* box-shadow: 10px 10px; */

             /* 3个值：水平位置，垂直位置，阴影颜色 */
             /* box-shadow: 10px 10px blue; */

              /* 3个值：水平位置，垂直位置，模糊程度 */
              /* box-shadow: 10px 10px 20px; */

              /* 4个值：水平位置，垂直位置，模糊程度，阴影颜色 */
              /* box-shadow: 10px 10px 20px blue; */

              /* 5个值：水平位置，垂直位置，模糊程度，阴影外延，阴影颜色 */
              /* box-shadow: 10px 10px 20px 0px blue; */

               /* 6个值：水平位置，垂直位置，模糊程度，阴影外延，阴影颜色，内阴影 */
              /* box-shadow: 10px 10px 20px 0px blue inset;  */
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
</body>
</html>

opacity

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            font-size: 40px;
            opacity: 0.5;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

新增背景相关属性

background-origin

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255,0,0,0.7);
            background-image: url("资料/图片/bg01.jpg");
            background-repeat: no-repeat;
            background-origin: content-box;
        }

    </style>
</head>

<body>
    <div class="box1">你好啊</div>
</body>

</html>

在这里插入图片描述

background-clip

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255,0,0,0.7);
            background-image: url("资料/图片/bg02.jpg");
            background-repeat: no-repeat;
            background-clip: padding-box;
        }

    </style>
</head>

<body>
    <div class="box1">你好啊</div>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
            font-size: 40px;
            padding: 50px;
            border: 50px dashed rgba(255,0,0,0.7);
            color: transparent;
            background-image: url("资料/图片/bg02.jpg");
            background-repeat: no-repeat;
            background-clip: padding-box;
            -webkit-background-clip: text;
        }

    </style>
</head>

<body>
    <div class="box1">你好啊</div>
</body>

</html>

在这里插入图片描述

background-size

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background-image: url('./资料/图片/bg03.jpg');
            /* background-size: 400px 400px; */
            /* background-size: 100% 100%; */
            /* background-size: contain; */
            background-size:auto;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

background复合属性

在这里插入图片描述

多背景图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            background: url('./资料/图片/bg-lt.png') no-repeat left top,
                        url('./资料/图片/bg-rt.png') no-repeat right top,
                        url('./资料/图片/bg-lb.png') no-repeat left bottom,
                        url('./资料/图片/bg-rb.png') no-repeat right bottom;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

在这里插入图片描述

新增边框相关属性

边框圆角

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 0 auto;
            /* border-radius: 200px; */
            /* border-radius: 50%; */

            /* border-top-left-radius: 100px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 10px; */

            /* border-top-left-radius: 100px 50px;
            border-top-right-radius: 50px 20px;
            border-bottom-left-radius: 20px 10px;
            border-bottom-right-radius: 10px 5px; */

            /* border-radius: 100px 50px 20px 10px / 50px 20px 10px 5px; */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框外轮廓

在这里插入图片描述

新增文本属性

文本阴影

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            font-size: 80px;
            text-align: center;
            color: white;
            /* text-shadow: 3px 3px 10px red; */

            text-shadow: 0px 0px 15px black;
        }
    </style>
</head>
<body>
    <h1>你好呀</h1>
</body>
</html>

在这里插入图片描述

文本换行

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
           width: 400px;
           height: 400px;
           border: 1px solid black;
           font-size: 20px;
           white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div>
        山回路转不见君山回路转不见君       
        雪上空留马行处山回路转不见君
        雪上空留马行处山回路转不见君
        雪上空留马行处
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
        山回路转不见君
        雪上空留马行处
    </div>
</body>
</html>

在这里插入图片描述

文本溢出

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
           width: 400px;
           height: 400px;
           border: 1px solid black;
           font-size: 20px;
           list-style: none;
           padding-left: 0;
        }
        li {
            margin-bottom: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <ul>
        <li>新闻 |东城区：禁毒宣传进万家，织密防毒“安全网”</li>
        <li>“选学校还是选专业重要？”新闻专业到底是不是如张雪峰所说的？
        </li>
        <li>小暑来啦</li>
    </ul>
</body>
</html>

在这里插入图片描述

文本修饰

在这里插入图片描述

在这里插入图片描述

文本描边

在这里插入图片描述

新增渐变

线性渐变

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

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

相关文章

JMeter元件

JMeter元件

【测试计划–线程组/Threads(Users)】 模拟大量用户负载的情况&#xff0c;线程组可以设置运行的线程数(多少线程就代表多少用户)&#xff1b; 【测试计划–线程组–取样器/sampler】 用来模拟用户操作&#xff0c;向服务器发出http请求、Webservice请求、java请求等&#xf…
阅读更多...
采用VMD按照某一坐标轴旋转坐标结构

采用VMD按照某一坐标轴旋转坐标结构

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更 多 \color{blue}{多} 多 精 \color{orange}{精} 精 彩 \color{green}{彩} 彩&#xff01; 主要专栏内容包括&#xff1a; †《LAMMPS小技巧》&#xff1a; ‾ \textbf…
阅读更多...
【设计模式】第七章：代理模式详解及应用案例

【设计模式】第七章：代理模式详解及应用案例

系列文章 【设计模式】七大设计原则 【设计模式】第一章&#xff1a;单例模式 【设计模式】第二章&#xff1a;工厂模式 【设计模式】第三章&#xff1a;建造者模式 【设计模式】第四章&#xff1a;原型模式 【设计模式】第五章&#xff1a;适配器模式 【设计模式】第六章&…
阅读更多...
二叉树 — 折纸问题

二叉树 — 折纸问题

题目&#xff1a; 一道Google真实出现过的面试题 将一段纸条放在桌上&#xff0c;然后从纸条下边向上方对折1次&#xff0c;压出折痕后展开&#xff0c;此时折痕是凹下去的&#xff08;称为凹折痕&#xff09;&#xff0c;即折痕凸起的方向指向纸条的背面。如果从纸条的下边向上…
阅读更多...
CodeForces..碰撞字符.[简单].[遍历求最大连续]

CodeForces..碰撞字符.[简单].[遍历求最大连续]

题目描述&#xff1a; 题目解读&#xff1a; 输入仅由<和>组成的字符串s&#xff0c;给定数组a&#xff0c;a满足 a[i] 和 a[i1] 之间的比较运算符为 s[i] 给出字符串a中不同字符的最小个数。 解题思路&#xff1a; 判断字符<和>的最大连续次数即可&#xff0c;…
阅读更多...
MySQL注入-SQLi-Less1笔记

MySQL注入-SQLi-Less1笔记

前置知识点&#xff1a; 1. SELECT 1,2,3 用于查询数据通道的方式 例如Less-1中,Secury数据库中的users表结构如下&#xff0c;可以看到有散列&#xff0c;当用户在页面输入id的时候&#xff0c;会查询到对应的散列数据也就是<id>/<username>/<password>&a…
阅读更多...
复健练习1—取模与快速幂

复健练习1—取模与快速幂

复建练习1—取模与快速幂 A&#xff0c;poj3070 没啥可说的&#xff0c;就是裸的矩阵快速幂 #include <algorithm> #include <iostream> #include <cstring> #include <cmath> #include <iomanip>using namespace std; typedef long long ll;…
阅读更多...
微服务: 03-rabbitmq在springboot中如何使用(下篇)

微服务: 03-rabbitmq在springboot中如何使用(下篇)

目录 前言: 上文传送 4.六大模式实际操作(续) 4.4 路由模式: ---> 4.4.1 消费者配置类 ---> 4.4.2 消费者代码 --->4.4.3 生产者代码 4.5 主题模式: (路由升级版) ---> 4.5.1 消费者配置类 ---> 4.5.2 消费者代码 ---> 4.5.3 生产者代码 ---&g…
阅读更多...
【大语言模型】15分钟快速掌握LangChain以及ChatGLM

【大语言模型】15分钟快速掌握LangChain以及ChatGLM

10分钟快速掌握LangChain LangChain简介LangChain中的核心概念1. Components and Chains2. Prompt Templates and Values3. Example Selectors4. Output Parsers5. Indexes and Retrievers6. Chat Message History7. Agents and Tookits LangChain的代码结构1. LangChain中提供…
阅读更多...
Ubuntu学习笔记（一）——目录与路径

Ubuntu学习笔记（一）——目录与路径

文章目录 前言一、相对路径与绝对路径1.绝对路径&#xff08;absolute&#xff09;2.相对路径&#xff08;relative&#xff09; 二、目录相关操作命令1.cd(change directory, 切换目录)2.pwd(print working directory, 显示目前所在的目录)3.mkdir(make directory, 建立新目录…
阅读更多...
Versioning data and models for rapid experimentation in machine learning

Versioning data and models for rapid experimentation in machine learning

翻译博客&#xff1a;https://medium.com/pytorch/how-to-iterate-faster-in-machine-learning-by-versioning-data-and-models-featuring-detectron2-4fd2f9338df5 在本文中&#xff0c;您将学习如何创建和使用版本化的数据集作为可重现的机器学习流程的一部分。为了说明这一…
阅读更多...
自定义MVC工作原理

自定义MVC工作原理

目录 一、MVC二、MVC的演变2.1 极易MVCController层——Servletview层——JSP缺点&#xff1a;Servlet过多、代码冗余 2.2 简易MVCController层——Servletview层——JSP缺点&#xff1a;在Servlet中if语句冗余 2.3普易MVCController层——Servletview层——JSP缺点&#xff1a…
阅读更多...
OBS播放NDI源

OBS播放NDI源

下载OBS Studio的NDI运行时和插件 https://github.com/obs-ndi/obs-ndi/releases 下载文章中的下面这两个文件，并直接双击安装。 或者从百度云下载也行： 链接：https://pan.baidu.com/s/1vNn1yMdCy6BZkKxKCq-kDw 提取码：cxxg 安装完成之后，打开OBS Studio 点击加号添…
阅读更多...
RabbitMQ系列（11）--RabbitMQ交换机（Exchange）简介

RabbitMQ系列（11）--RabbitMQ交换机（Exchange）简介

1、交换机概念 生产者生产的消息从不会直接发送到队列&#xff0c;生产者只能把消息发送到交换机&#xff08;Exchange&#xff09;&#xff0c;交换机接收来着生产者的消息&#xff0c;另一方面把消息推入队列&#xff0c;交换机必须知道如何处理收到的消息&#xff0c;是应该…
阅读更多...
【设计模式】第十五章：责任链模式详解及应用案例

【设计模式】第十五章：责任链模式详解及应用案例

系列文章 【设计模式】七大设计原则 【设计模式】第一章&#xff1a;单例模式 【设计模式】第二章&#xff1a;工厂模式 【设计模式】第三章&#xff1a;建造者模式 【设计模式】第四章&#xff1a;原型模式 【设计模式】第五章&#xff1a;适配器模式 【设计模式】第六章&…
阅读更多...
银河麒麟服务器v10 sp1 nginx开机自动启动

银河麒麟服务器v10 sp1 nginx开机自动启动

接上一篇&#xff1a;银河麒麟服务器v10 sp1 安装 nginx_csdn_aspnet的博客-CSDN博客 设置开机自启动 定义服务启动文件内容&#xff1a; [Unit] Descriptionnginx - high performance web server Afternetwork.target remote-fs.target nss-lookup.target [Service] Ty…
阅读更多...
menuconfig selected by 怎么处理

menuconfig selected by 怎么处理

比方说我想取消掉flex&#xff0c;但是被强制生成了&#xff1a; 输入搜索命令查了一下&#xff1a; 搜一下selected by [y] 中的 linux_pam: 取消掉 这样就不用编flex了。
阅读更多...
【HarmonyOS】元服务启动命令漫谈

【HarmonyOS】元服务启动命令漫谈

在日常开发中&#xff0c;我们可以通过DevEco Studio&#xff0c;直接Run我们的元服务工程&#xff0c;在测试机上拉起我们开发的元服务页面。但是我们自己打包HarmonyOS元服务hap在手机上安装后是没有桌面图标的。虽然我们可以在设置的服务管理中找到我们安装的元服务&#xf…
阅读更多...
Go语言操作MySql数据库

Go语言操作MySql数据库

go-sql-driver/mysql库是Go语言官方推荐的MySQL驱动库&#xff0c;可以很方便地实现对MySQL数据库的连接和操作。本文记录以下使用go-sql-driver/mysql数据库驱动来操作mysql数据库。 目录 1.安装驱动程序 2.导入驱动包 3.操作数据库 3.1 获取mysql版本 3.2 创建表 3.3 …
阅读更多...
详解JAVA Socket

详解JAVA Socket

目录 1.概述 2.使用 3.使用场景 3.1.web server中的网络通信 3.2.长连接 3.3.性能问题 1.概述 什么是网络通信&#xff1a; 就像打电话一样&#xff0c;两点间要通信&#xff0c;两点间就必须有连接&#xff0c;为了实现任意两个节点之间的通信&#xff0c;我们就必须采…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023