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

CSS3新属性（学习笔记）

news 2025/6/25 23:16:51

一、. 圆角

    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个值&#xff08;规则同margin&#xff09; 可以取px和% 一般用像素&#xff0c;画圆的时候用百分比&#xff1a;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: 是前端项目工程化的具体解决方案。 主要功能&#xff1a;它提供了友好的前端模块化开发支持&#xff0c;以及代码压缩混淆、处理浏览…...

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

数据仓库的分层理论

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

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

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

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

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

Uibot6.0 (RPA财务机器人师资培训第3天 ）财务招聘信息抓取机器人案例实战

训练网站&#xff1a;泓江科技 (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的关系

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

欸嘿&#xff0c;继续sql注入。又是新的sql注入类型 很直接哦&#xff0c;给出了sql查询语句。简单扫描一下&#xff0c;robots.txt还能访问。里边提示hint.txt $black_list "/limit|by|substr|mid|,|admin|benchmark|like|or|char|union|substring|select|greatest|%00…...

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

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

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

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

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

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

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

动手学深度学习｜notebook教程

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

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

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

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

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

android.os.TransactionTooLargeException解决方案，Kotlin

android.os.TransactionTooLargeException解决方案&#xff0c;Kotlin 首先&#xff0c;特意制造一个让Android发生TransactionTooLargeException的场景&#xff0c;一个Activity启动另外一个Activity&#xff0c;在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

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/6/25 2:07:42

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/6/21 1:43:55

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/6/24 0:59:15

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/6/21 6:34:03

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2025/6/22 11:11:02

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/6/25 1:03:29

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/6/16 14:43:58

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...

编程新知 2025/6/24 6:27:38

接口 RESTful 中的超媒体：REST 架构的灵魂驱动

在 RESTful 架构中&#xff0c;** 超媒体&#xff08;Hypermedia&#xff09;** 是一个核心概念&#xff0c;它体现了 REST 的 “表述性状态转移&#xff08;Representational State Transfer&#xff09;” 的本质&#xff0c;也是区分 “真 RESTful API” 与 “伪 RESTful AP…...

编程新知 2025/6/21 15:25:21

Neo4j 完全指南：从入门到精通

第1章&#xff1a;Neo4j简介与图数据库基础 1.1 图数据库概述 传统关系型数据库与图数据库的对比图数据库的核心优势图数据库的应用场景 1.2 Neo4j的发展历史 Neo4j的起源与演进Neo4j的版本迭代Neo4j在图数据库领域的地位 1.3 图数据库的基本概念 节点(Node)与关系(Relat…...

编程新知 2025/6/21 6:12:27