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

CSS3新属性（学习笔记）

news 2026/2/7 13:00:21

一、. 圆角

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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现数据库设置 2个db_recovery参数创建guarantee闪回点，不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

Objective-C常用命名规范总结

【OC】常用命名规范总结文章目录【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/2/4 17:18:03

C++使用 new 来创建动态数组

问题： 不能使用变量定义数组大小原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...

编程新知 2026/2/2 18:33:19

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2026/2/6 16:59:24

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置配置manifest 文档：manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号：4.66 对应的sdk版本 4.66 两者必须一致本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机配置虚拟机飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2026/1/30 6:19:54