当前位置：首页 > news >正文

CSS3新属性（学习笔记）

news 2026/2/8 16:25:14

一、. 圆角

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…...

编程日记 2024/3/24 8:40:46

41-Vue-webpack基础

webpack基础前言什么是webpackwebpack的基本使用指定webpack的entry和output 前言本篇开始来学习下webpack的使用什么是webpack webpack: 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览…...

编程日记 2024/3/24 8:36:42

数据仓库的分层理论

数据仓库的分层理论是为了更好地组织和管理数据，支持复杂的数据分析和决策支持。在这一理论中，数据仓库被分为多个层次，每个层次都有其特定的作用和设计原则。以下是每一层的详细介绍，以及以销售人员为例的Doris建表实例。 ODS层…...

编程日记 2024/3/24 8:30:36

MySQL 8.0-索引- 不可见索引（invisible indexes）

概述 MySQL 8.0引入了不可见索引(invisible index)，这个在实际工作用还是用的到的，我觉得可以了解下。在介绍不可见索引之前，我先来看下invisible index是个什么或者定义。我们依然使用拆开来看，然后再把拆出来的词放到MySQL…...

编程日记 2024/3/24 8:28:35

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(本博…...

编程日记 2024/3/24 8:27:34

Eureka和Nacos的关系

目录它们的比较： 结论： Eureka和Nacos都是服务发现和注册中心，它们在微服务架构中扮演着关键角色，但它们是由不同的组织开发的，服务于类似但不完全相同的目的。以下是它们之间的关系： Eureka&#xff1a…...

编程日记 2024/3/24 8:24:31

极简自建web视频会议，私有云，rtmp/rtsp/webrtc一键参会直播会议互动方案

随着视频互动深入工作日常，很多客户需要自建一个会议，监控的交互平台，目前外面不管是开源还是非开源的平台，都是极为复杂，一般linux安装库关联部署复杂，非技术人员根本没办法使用，不方便集成部署…...

编程日记 2024/3/24 8:23:30

5G智能网关助力工业铸造设备监测升级

随着物联网技术的迅猛发展和工业4.0浪潮的推进，传统工业正面临着严峻的转型升级压力。在这一背景下，铸造行业——这一典型的传统重工业领域，也必须积极探索借助5G、物联网、边缘计算等技术提升生产经营效率的新路径。本文就基于佰马合作伙伴…...

编程日记 2024/3/24 8:22:29

奇舞周刊第523期：来自 rust 生态的强烈冲击？谈谈 Leptos 在语法设计上的精妙之处...

奇舞推荐 ■ ■ ■ 来自 rust 生态的强烈冲击？谈谈 Leptos 在语法设计上的精妙之处过去很长一段时间，前端框架们都在往响应式的方向发展。同时又由于 React hooks 的深远影响，函数式响应式成为了不少前端心中最理想的前端框架模样。Solid …...

编程日记 2024/3/24 8:21:28

《边缘计算：连接未来的智慧之桥》

随着物联网、5G等技术的快速发展，边缘计算作为一种新兴的计算模式，正逐渐引起人们的广泛关注。边缘计算通过将数据处理和存储功能放置在距离数据产生源头更近的位置，实现了更快速、更可靠的数据处理和交换，为各行各业带来了前所未…...

编程日记 2024/3/24 8:18:25

php 各种魔术函数的触发条件

2024.3.20 1、__construct() __construct() 用于在创建对象时自动触发当使用 new 关键字实例化一个类时，会自动调用该类的 __construct() 方法 <?php class MyClass {public function __construct() {echo "已触发 __construct 一次";} }$obj new …...

编程日记 2024/3/24 8:17:24

Linux的学习之路：2、基础指令（1）

一、ls指令上篇文章已经说了一点点的ls指令，不过那还是不够的，这篇文章会介绍更多的指令，最起码能使用命令行进行一些简单的操作，下面开始介绍了 ls常用选项 -a 列出目录下的所有文件，包括以 . 开头的隐含文件。 -d…...

编程日记 2024/3/24 8:10:16

0103设计算法-算法基础-算法导论第三版

文章目录一、分治法二、分析分治算法结语我们可以选择使用的算法设计技术有很多。插入排序使用了增量方法：在排序子数组 A [ 1 ⋯ j − 1 ] A[1\cdots j-1] A[1⋯j−1]后，将单个元素 A [ j ] A[j] A[j]插入子数组的适当位置，产生排序好的子…...

编程日记 2024/3/24 8:09:15

[NCTF2019]SQLi ---不会编程的崽

编程日记 2024/3/24 8:06:11

上位机开发 halcon坐标转轴坐标

背景上位机开发中有一种相机叫标定相机，主要是有来给某些要进行根据CAD图点位计算时当前产品实际点位坐标时使用的一种标定测量相机。主要原理是根据两个或多个指定的标定点进行取图计算圆心坐标，再将视觉计算出的圆心坐标和取图时的轴坐标进行偏差计算。最后得到标定点轴的…...

编程日记 2024/3/24 8:03:09

[数据结构]二叉树(下)

一、二叉树的节点和深度关系 1.满二叉树我们可以假设二叉树有N个节点，深度为h我们可以恒容易得到满二叉树每行的节点数，然后错位相减,算出节点与高度的关系。 2.完全二叉树注意我这个是因为最后一行的节点数为1。二、向上调整建堆和向下调整建堆的时…...

编程日记 2024/3/24 8:02:07

动手学深度学习｜notebook教程

D2L.AI｜《动手学深度学习》Notebooks 目录面向中文读者的能运行、可讨论的深度学习教科书含 PyTorch、NumPy/MXNet、TensorFlow 和 PaddlePaddle 实现被全球 70 多个国家 500 多所大学用于教学 github 下面是整理好的，可以直接运行的notebook 0 前…...

编程日记 2024/3/24 8:01:06

C#面：简述 .NET Framework 类库中的“命名空间”

在 C# 中，命名空间（Namespace）是一种用于组织和管理代码的机制。它提供了一种将相关的类、接口、结构体和其他类型组织在一起的方式，以便更好地管理和维护代码。 .NET Framework类库中的命名空间是一种逻辑上的分组，它…...

编程日记 2024/3/24 8:00:05

android.os.TransactionTooLargeException解决方案，Kotlin

android.os.TransactionTooLargeException解决方案，Kotlin 首先，特意制造一个让Android发生TransactionTooLargeException的场景，一个Activity启动另外一个Activity，在Intent的Bundle里面塞入一个大的ArrayList: import android.…...

编程日记 2024/3/24 7:59:04

ChatGPT智能聊天系统源码v2.7.6全开源Vue前后端+后端PHP

测试环境：Linux系统CentOS7.6、宝塔、PHP7.4、MySQL5.6，根目录public，伪静态thinkPHP，开启ssl证书具有文章改写、广告营销文案、编程助手、办公达人、知心好友、家庭助手、出行助手、社交平台内容、视频脚本创作、AI绘画、思维导图等功能 ai通道：文心一言、MiniMax、智…...

编程日记 2024/3/24 7:48:55

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣（LeetCode） 思路使用两个栈：一个存储重复次数，一个存储字符串遍历输入字符串： 数字处理：遇到数字时，累积计算重复次数左括号处理：保存当前状态&a…...

编程新知 2026/1/25 10:09:59

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题，前来答题。每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题， 因为搜索范围是有界的，上界最大木板长度补充的全部木料长度，下界最小木板长度； 即left0,right10^6; 我们可以设置一个候选值x(mid)，将木板的长度全部都补充到x，如果成功…...

编程新知 2026/2/4 17:42:50

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2026/2/7 10:22:16