CSS3新属性（学习笔记）
一、. 圆角
border-radius:;
可以取1-4个值（规则同margin）
可以取px和%
一般用像素，画圆的时候用百分比：border-radius:50%;
<!DOCTYPE html>
<html lang="en">
<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>.box{width: 800px;height: 200px;background-color: pink;/* 设置圆角 可以取值px和% *//* border-radius:10px 20px 30px 50px; *//* border-radius: 10%; */border-radius: 100px;}.box1{width: 200px;height: 200px;background-color: plum;/* border-radius: 100px ; */border-radius: 50% ;}</style>
</head>
<body><div class="box"></div><div class="box1"></div>
</body>
</html>
二、 盒阴影
box-shadow:水平方向偏移位置 垂直方向偏移位置 模糊度 阴影大小 颜色 位置;
水平方向偏移位置 必须 可取正负
垂直方向偏移位置 必须 可取正负
模糊度 可选 正值
阴影大小 可选 正负
颜色 可选
位置 可选 outset(外阴影，默认)|inset(内阴影)
例子：
box-shadow:0 15px 30px rgba(0,0,0,.1);（最常见）
box-shadow:0 0 30px #ccc inset;
<!DOCTYPE html>
<html lang="en">
<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>.box{width: 303px;height: 375px;background-color: red;margin: 50px;}.box:hover{/* 第一个值：水平方向偏移的位置，可以取正负第二个值：垂直方向偏移的位置，可以取正负第三个值：模糊度，取值越大，模糊越明显，不可以取负值第四个值：阴影的大小，可以取正负阴影的颜色：可选阴影的位置：可选，默认outset：外阴影 取值inset：内阴影*//* box-shadow: green 10px 10px 30px 10px inset; *//* box-shadow: 0 15px 30px gold; */box-shadow: 0 0 30px inset;}</style>
</head>
<body><div class="box"></div>
</body>
</html>
三、 背景渐变
3.1 线性渐变
background-image:linear-gradient(渐变的方向,颜色1,颜色2,...);
渐变的方向可以省略，默认从上往下渐变
可以取值to right，to left， top top，to right top，to left bottom
可以取值弧度(deg)
例子：background-image: linear-gradient(120deg,#ff3149,#ff64a6);
<!DOCTYPE html>
<html lang="en">
<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>.box{width: 800px;height: 500px;border: 2px solid #000;/* 背景渐变 *//* background-image: linear-gradient(to right top,red,orange,yellow,green,blue); */background: linear-gradient(-90deg,red,orange,yellow,green,blue);}.box1{width: 60px;height: 60px;background-image: linear-gradient(120deg,#ff3149,#ff64a6);border-radius: 50%;color: #fff;text-align: center;line-height: 60px;}</style>
</head>
<body><div class="box"></div><div class="box1">免息</div>
</body>
</html>
3.2 径向渐变 扇形渐变 射线渐变（基本用不上）
有浏览器兼容性问题
background-image:radial-gradient(中心点,形状(circle),颜色1,颜色2,...);
四、 选择器
4.1 基础选择器
全局选择器
元素选择器
类选择器
ID选择器
4.2 关系选择器
子代选择器
后代选择器
相邻兄弟选择器
通用兄弟选择器
4.3 伪类选择器
:link
:visited
:hover
:active
C3新增
:first-child 第一个子元素是...
:last-child
:nth-child()
:first-of-type 第一个...元素
:last-of-type
:nth-of-type()
:focus 获取焦点
4.4 伪对象选择器 伪元素选择器 (掌握)
1）在元素内部最前面插入内容(相当于第一个子元素)
::before{content:"";}:before或者::before都可以，推荐写::before
2）在元素内部最后面插入内容(相当于最后一个子元素)
::after{content:"";}3）应用
①插入文字(了解)
.box::before{content: "前面";}.box:after{content: "后面";}②插入图片(了解)
.box::before{content: url("./images/1.gif");}.box::after{content: url("./images/1.gif");}③自定义插入的内容(掌握)
.box::before{/* 自定义插入的内容content内容为空 *//* 默认插入的内容不是块级元素，设置宽高不生效 */display: block;content: "";width: 100px;height: 2px;background-color: red;}.box::after{display: block;content: "";width: 2px;height: 100px;background-color: green;}4.5 属性选择器(了解)
利用html的属性
[属性] 有此属性的所有元素
[属性=属性值] 此属性=属性值的所有元素
元素[属性=属性值] 此属性=属性值的指定元素
元素[属性^=值] html属性值以值开头
元素[属性$=值] html属性值以值结尾
元素[属性*=值] html属性值包含指定的值
（没学明白，不常用，算辽）
五、 转换 变型
5.1 作用
使元素在位置、形状、大小上发生改变
5.2 属性
transform:translate(0,0) rotate(0deg) scale(1) skew(0deg,0deg);
位移 旋转 缩放 倾斜
5.3 位移
transform:translate(x,y);
取值px、%(相对于元素自身的宽高)
取正值，元素往右下移动；取负值，元素往左上移动
当只取一个值，表示水平方向位移的距离
当取两个值，表示水平和垂直方向位移的距离
transform:translateX();transform:translateY();transform:translate3D(x,y,z);5.4 旋转 单位deg(弧度)
transform:rotate();
2D旋转只取一个值
当取正值，顺时针旋转
当取负值，逆时针旋转
5.5 缩放
取值为数值 默认为1，取值<1,缩小，取值>1:放大
transform:scale(x,y);
当只取一个值表示等比例缩放
当取两个值，表示水平和垂直方向缩放
transform:scaleX();transform:scaleY();transform:scale3D(x,y,z);5.6 倾斜 单位为deg(弧度)
transform:skew(x,y)
当只取一个值，表示水平方向倾斜的弧度
当取两个值，表示水平和垂直方向倾斜的弧度
transform:skewX();transform:skewY();六、过渡
6.1 作用
使元素从一种样式逐渐变为另外一种样式
6.2 属性
1）过渡的属性 可选
transition-property:属性1,属性2,...;
简写all(所有的)
可以过渡的属性：
①阴影 box-shadow
②转换 transform
③取值为数值 width、height、top、left、margin等
④取值为颜色 color、background-color、border-color等
2）过渡的持续时间 必须
transition-duration:;
默认值为0s
取值s|ms
3）过渡的速度变化类型 可选
transition-timing-function:;
ease：先加速后减速
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速
linear：匀速
4）过渡的延迟时间 可选
transition-delay:;
默认值0s
取值s|ms
可以取负值，表示把这段时间的效果跳过
5）简写 (掌握)
transition:all 持续时间 速度变化类型 延迟时间;
可选 必须 可选 可选
transition：1s;
6.3 注意
过渡的属性加在元素上
相关文章：
CSS3新属性（学习笔记）
一、. 圆角 border-radius:; 可以取1-4个值（规则同margin） 可以取px和% 一般用像素，画圆的时候用百分比：border-radius:50%; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&q…...
41-Vue-webpack基础
webpack基础 前言什么是webpackwebpack的基本使用指定webpack的entry和output 前言 本篇开始来学习下webpack的使用 什么是webpack webpack: 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览…...
数据仓库的分层理论
数据仓库的分层理论是为了更好地组织和管理数据，支持复杂的数据分析和决策支持。在这一理论中，数据仓库被分为多个层次，每个层次都有其特定的作用和设计原则。以下是每一层的详细介绍，以及以销售人员为例的Doris建表实例。 ODS层…...
MySQL 8.0-索引- 不可见索引（invisible indexes）
概述 MySQL 8.0引入了不可见索引(invisible index)，这个在实际工作用还是用的到的，我觉得可以了解下。 在介绍不可见索引之前，我先来看下invisible index是个什么或者定义。 我们依然使用拆开来看，然后再把拆出来的词放到MySQL…...
Uibot6.0 (RPA财务机器人师资培训第3天 ）财务招聘信息抓取机器人案例实战
训练网站：泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981(本博…...
Eureka和Nacos的关系
目录 它们的比较： 结论： Eureka和Nacos都是服务发现和注册中心，它们在微服务架构中扮演着关键角色，但它们是由不同的组织开发的，服务于类似但不完全相同的目的。以下是它们之间的关系： Eureka：…...
极简自建web视频会议，私有云，rtmp/rtsp/webrtc一键参会直播会议互动方案
随着视频互动深入工作日常，很多客户需要自建一个会议，监控的交互平台，目前外面不管是开源还是非开源的平台，都是极为复杂，一般linux安装库关联部署复杂，非技术人员根本没办法使用，不方便集成部署…...
5G智能网关助力工业铸造设备监测升级
随着物联网技术的迅猛发展和工业4.0浪潮的推进，传统工业正面临着严峻的转型升级压力。在这一背景下，铸造行业——这一典型的传统重工业领域，也必须积极探索借助5G、物联网、边缘计算等技术提升生产经营效率的新路径。 本文就基于佰马合作伙伴…...
奇舞周刊第523期：来自 rust 生态的强烈冲击？谈谈 Leptos 在语法设计上的精妙之处...
奇舞推荐 ■ ■ ■ 来自 rust 生态的强烈冲击？谈谈 Leptos 在语法设计上的精妙之处 过去很长一段时间，前端框架们都在往响应式的方向发展。同时又由于 React hooks 的深远影响，函数式 响应式成为了不少前端心中最理想的前端框架模样。Solid …...
《边缘计算：连接未来的智慧之桥》
随着物联网、5G等技术的快速发展，边缘计算作为一种新兴的计算模式，正逐渐引起人们的广泛关注。边缘计算通过将数据处理和存储功能放置在距离数据产生源头更近的位置，实现了更快速、更可靠的数据处理和交换，为各行各业带来了前所未…...
php 各种魔术函数的触发条件
2024.3.20 1、__construct() __construct() 用于在创建对象时自动触发 当使用 new 关键字实例化一个类时，会自动调用该类的 __construct() 方法 <?php class MyClass {public function __construct() {echo "已触发 __construct 一次";} }$obj new …...
Linux的学习之路：2、基础指令（1）
一、ls指令 上篇文章已经说了一点点的ls指令，不过那还是不够的，这篇文章会介绍更多的指令，最起码能使用命令行进行一些简单的操作，下面开始介绍了 ls常用选项 -a 列出目录下的所有文件，包括以 . 开头的隐含文件。 -d…...
0103设计算法-算法基础-算法导论第三版
文章目录 一、分治法二、分析分治算法结语 我们可以选择使用的算法设计技术有很多。插入排序使用了增量方法：在排序子数组 A [ 1 ⋯ j − 1 ] A[1\cdots j-1] A[1⋯j−1]后，将单个元素 A [ j ] A[j] A[j]插入子数组的适当位置，产生排序好的子…...
[NCTF2019]SQLi ---不会编程的崽
欸嘿，继续sql注入。又是新的sql注入类型 很直接哦，给出了sql查询语句。简单扫描一下，robots.txt还能访问。里边提示hint.txt $black_list "/limit|by|substr|mid|,|admin|benchmark|like|or|char|union|substring|select|greatest|%00…...
上位机开发 halcon坐标转轴坐标
背景 上位机开发中有一种相机叫标定相机，主要是有来给某些要进行根据CAD图点位计算时当前产品实际点位坐标时使用的一种标定测量相机。主要原理是根据两个或多个指定的标定点进行取图计算圆心坐标，再将视觉计算出的圆心坐标和取图时的轴坐标进行偏差计算。最后得到标定点轴的…...
[数据结构]二叉树(下)
一、二叉树的节点和深度关系 1.满二叉树 我们可以假设二叉树有N个节点，深度为h我们可以恒容易得到满二叉树每行的节点数，然后错位相减,算出节点与高度的关系。 2.完全二叉树 注意我这个是因为最后一行的节点数为1。 二、向上调整建堆和向下调整建堆的时…...
动手学深度学习｜notebook教程
D2L.AI｜《动手学深度学习》Notebooks 目录 面向中文读者的能运行、可讨论的深度学习教科书 含 PyTorch、NumPy/MXNet、TensorFlow 和 PaddlePaddle 实现 被全球 70 多个国家 500 多所大学用于教学 github 下面是整理好的，可以直接运行的notebook 0 前…...
C#面：简述 .NET Framework 类库中的“命名空间”
在 C# 中，命名空间（Namespace）是一种用于组织和管理代码的机制。它提供了一种将相关的类、接口、结构体和其他类型组织在一起的方式，以便更好地管理和维护代码。 .NET Framework类库中的命名空间是一种逻辑上的分组，它…...
android.os.TransactionTooLargeException解决方案，Kotlin
android.os.TransactionTooLargeException解决方案，Kotlin 首先，特意制造一个让Android发生TransactionTooLargeException的场景，一个Activity启动另外一个Activity，在Intent的Bundle里面塞入一个大的ArrayList: import android.…...
ChatGPT智能聊天系统源码v2.7.6全开源Vue前后端+后端PHP
测试环境：Linux系统CentOS7.6、宝塔、PHP7.4、MySQL5.6，根目录public，伪静态thinkPHP，开启ssl证书 具有文章改写、广告营销文案、编程助手、办公达人、知心好友、家庭助手、出行助手、社交平台内容、视频脚本创作、AI绘画、思维导图等功能 ai通道：文心一言、MiniMax、智…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...
Go 语言并发编程基础：无缓冲与有缓冲通道
在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10pip3.10） 一：前言二：安装编译依赖二：安装Python3.10三：安装PIP3.10四：安装Paddlepaddle基础框架4.1…...
高防服务器价格高原因分析
高防服务器的价格较高，主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因： 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器，因此…...