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

02 CSS技巧

news 文章来源：https://blog.csdn.net/weixin_46533577/article/details/132716042 2024/11/27 1:26:51

02 CSS技巧

clip-path

自定义形状，或者使用自带的属性画圆等circle

HTML结构

<body><div class="container"></div>
</body>

CSS结构

使用*polygon*自定义形状

.container {width: 300px;height: 300px;background-color: rebeccapurple;/* clip-path: polygon(13% 22%, 11% 59%, 54% 71%,12% 54%); */clip-path: circle(10%);transition: all 2s ease;
}
.container:hover {clip-path: circle(100%);
}

在这里插入图片描述## 02 perspective

HTML结构

<body><div class="frame"><div class="shape"></div></div>
</body>

CSS结构

使用3D效果，perspective需要卸载父类中，用来规定视口距离

.frame {margin: 0 auto;width: 300px;height: 300px;border: 3px solid rebeccapurple;perspective: 500px;
}
.shape {width: 300px;height: 300px;background-color: lightblue;transform: rotateX(45deg);
}

在这里插入图片描述

03 aspect-ratio

HTML结构

  <body><div class="plaer"></div></body>

CSS结构

使用aspect-ratio等比例缩放格式为分数形式

/* 不要高度，等比例缩放 */
.plaer {width: 100%;background-color: lightblue;aspect-ratio: 16/9;
}

在这里插入图片描述

04 filter

HTML结构

  <body><img class="pic1" src="./cosplay.jpg" /><img class="pic2" src="./cosplay.jpg" /><p class="spoiler">一段话。。。。 </p></body>

CSS结构

设置模糊度blur

设置对比度*saturate*

亮度brightness

img {user-select: none;
}.pic1 {margin: 0 auto;width: 300px;height: 300px;/* 设置模糊度-blur */filter: blur(10px);
}
.pic1:active {filter: none;
}.pic2 {margin: 0 auto;width: 300px;height: 300px;/* 设置对比度、曝光、灰度 *//* filter: saturate(20); *//* filter: brightness(20%); */filter: grayscale(100%);transition: all 2s ease;
}
.pic2:active {filter: none;
}.spoiler {user-select: none;filter: blur(20px);
}.spoiler:active {filter: none;
}

在这里插入图片描述

05 input输入设置

HTML结构

  <body><input type="text" placeholder="搜索。。。" /></body>

CSS结构

placeholder设置placeholder

focus当获取焦点时触发

caret-color光标颜色

input {padding: 20px;border: 1px solid red;/* 设置光标颜色 */caret-color: red;
}/* 当输入框获取焦点时，外边框设置红色 */
input:focus {outline: 1px solid red;
}/* 设置 placeholder */
input::placeholder {color: red;
}

在这里插入图片描述

06 is、where、not等用法

HTML结构

  <body><div class="item"><h1>哈哈哈哈哈</h1><h2>呵呵呵呵呵</h2><h4>拉拉阿拉啦</h4><p>placeholderplaceholderplaceholderplaceholder</p></div></body>

CSS结构

/* 如果想批量修改颜色，注意：类名后要有一个空格 */
.item :where(h1, h2, p) {color: red;
}/* is 的优先级要高于where */
.item :is(h1, h2, p) {color: blue;
}.item :not(h2, h4) {color: yellow;
}

在这里插入图片描述

07 字幕设置

HTML结构

  <body><video src="./1_01-尚优选项目简介_高清 1080P.mp4" controls><track kind="captions" label="en" src="./01-尚优选项目简介.ass" /></video></body>

CSS结构

video {width: 100%;aspect-ratio: 16/9;
}/* 设置字母样式 */
::cue {background-color: black;font-size: 50px;
}

  <track kind="captions" label="en" src="./01-尚优选项目简介.ass" />
</video>
~~~

CSS结构

video {width: 100%;aspect-ratio: 16/9;
}/* 设置字母样式 */
::cue {background-color: black;font-size: 50px;
}

相关文章：

02 CSS技巧

02 CSS技巧 clip-path 自定义形状&#xff0c;或者使用自带的属性画圆等circle HTML结构 <body><div class"container"></div> </body>CSS结构 使用*polygon*自定义形状 .container {width: 300px;height: 300px;background-color: re…...

编程日记 2023/9/11 3:41:22

Yarn资源调度器

文章目录 一、Yarn资源调度器1、架构2、Yarn工作机制3、HDFS、YARN、MR关系4、作业提交之HDFS&MapReduce 二、Yarn调度器和调度算法1、先进先出调度器&#xff08;FIFO&#xff09;2、容量调度器&#xff08;Capacity Scheduler&#xff09;3、公平调度器&#xff08;Fair …...

编程日记 2023/9/11 3:40:20

android上架备案公钥和md5获取工具

最近很多公司上架遇到了一个问题&#xff0c;就是要提供app的备案证明&#xff0c;现在android上架都需要备案了&#xff0c;但是我们的证书都是通过工具生成的&#xff0c;哪里知道公钥和md5那些东西呢&#xff1f;无论安卓备案还是ios备案都需要提供公钥和md5。 包括ios的备案…...

编程日记 2023/9/11 3:39:19

SpringBoot系列(12)：SpringBoot集成log4j2日志配置

最近项目上有使用到log4j2日志模板配置&#xff0c;本文简单总结一下之前的学习笔记&#xff0c;如有纰漏之处&#xff0c;请批评指正。 1. log4j2日志依赖 使用log4j2日志模板时&#xff0c;需要引入相关依赖&#xff0c;下边的两种依赖方式均可。 1.1 使用sl4j依赖时 <…...

编程日记 2023/9/11 3:38:17

HTML事件列表

鼠标事件 属性描述DOMonclick当用户点击某个对象时调用的事件句柄。2oncontextmenu在用户点击鼠标右键打开上下文菜单时触发ondblclick当用户双击某个对象时调用的事件句柄。2onmousedown鼠标按钮被按下。2onmouseenter当鼠标指针移动到元素上时触发。2onmouseleave当鼠标指针…...

编程日记 2023/9/11 3:37:09

并发-Executor框架笔记

Executor框架 jdk5开始&#xff0c;把工作单元与执行机制分离开来&#xff0c;工作单元包括Runable和Callable&#xff0c;执行机制由Executor框架来提供。 Executor框架简介 Executor框架的两级调度模型 Java线程被一对一映射为本地操作系统线程 java线程启动会创建一个本…...

编程日记 2023/9/11 3:36:08

【C进阶】分析 C/C++程序的内存开辟与柔性数组(内有干货)

前言&#xff1a; 本文是对于动态内存管理知识后续的补充&#xff0c;以及加深对其的理解。对于动态内存管理涉及的大部分知识在这篇文章中 ---- 【C进阶】 动态内存管理_Dream_Chaser&#xff5e;的博客-CSDN博客 本文涉及的知识内容主要在两方面&#xff1a; 简单解析C/C程序…...

编程日记 2023/9/11 3:35:06

深入理解 JVM 之——字节码指令与执行引擎

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 类文件结构 Write Once&#xff0c;Run Anywhere 对于 C 语言从程序到运行需要经过编译的过程&#xff0c;只有经历了编译后&#xff0c;我们所编写的代码才能够翻译为机器可以直接运行的二进制代码&#x…...

编程日记 2023/9/11 3:34:05

C++：vector

目录 一、关于vector 二、vector的相关函数 三、相关函数的使用 ①构造函数 ②size ③[] ​编辑 ④push_back ⑤迭代器iterator ⑥reserve ⑦resize ⑧find ⑨insert ⑩erase ⑪sort 一、关于vector vector比较像数组 观察可知&#xff0c;vector有两个模板参数…...

编程日记 2023/9/11 3:33:04

Android Automotive编译

系统准备 安装系统 准备一台安装Ubuntu系统的机器&#xff08;windows系统的机器可以通过WSL安装ubuntu系统&#xff09; 安装docker 本文使用docker进行编译&#xff0c;因此提前安装docker。参考网络链接安装docker并设置为不使用sudo进行docker操作。 参考链接&#xff…...

编程日记 2023/9/11 3:32:04

什么是50ETF期权开户条件，怎么开期权交易权限？

50ETF期权是指上证50ETF期权&#xff0c;标的物是上证50ETF&#xff0c;代码是&#xff08;510500&#xff09;&#xff0c;期权是一种在上证50ETF基础上进行衍生品交易的金融工具&#xff0c;下文科普什么是50ETF期权开户条件&#xff0c;怎么开期权交易权限&#xff1f;本文来…...

编程日记 2023/9/11 3:31:02

React 从入门到精通——本文来自AI创作助手

React是一个流行的JavaScript库&#xff0c;用于构建用户界面。以下是React入门到精通的步骤&#xff1a; 入门 安装React 你可以在npm上下载React包&#xff0c;也可以使用其他包管理器。首先需要安装node.js&#xff0c;然后使用以下命令安装React&#xff1a; npm insta…...

编程日记 2023/9/11 3:30:01

【51单片机实验笔记】前篇（三） 模块功能封装汇总（持续更新）

文章目录 通用函数public.hpublic.c 延时函数delay.hdelay.c LED模块数码管模块smg.hsmg.c LED点阵模块独立按键模块矩阵按键模块外部中断模块定时器模块串口通讯模块ADC模块PWM模块 通用函数 包含常用头文件&#xff0c;宏定义&#xff0c;自定义类型&#xff0c;函数工具等。…...

编程日记 2023/9/11 3:29:00

Excel VSTO开发4 -其他事件

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 4 其他事件 针对插件的事件主要有Startup、Shutdown这两个事件&#xff0c;在第2节中已经讲解。在开发窗口中&#xff0c;选择对象…...

编程日记 2023/9/11 3:27:59

语音识别数据的采集方法：基本流程数据类型

“人工智能是一种模仿人类功能的产品。数据采集的方法需要针对特定的场景需求。”—–Mark Brayan (澳鹏CEO) 我们一直说&#xff0c;对于一个高质量的人工智能产品离不开高质量的训练数据。对于不同的人工智能我们需要不同的数据对其训练。要采集正确的数据去训练特定的模型才…...

编程日记 2023/9/11 3:26:59

oracle数据库给用户授权DBA权限Oracle查看哪些用户具有DBA权限

oracle数据库给用户授权DBA权限 步骤一&#xff1a;以sysdba身份登录到Oracle数据库 在授予DBA权限之前&#xff0c;我们首先要以sysdba身份登录到Oracle数据库。使用以下命令登录&#xff1a; sqlplus / as sysdba步骤二&#xff1a;创建用户&#xff08;如有用户跳过&#…...

编程日记 2023/9/11 3:25:58

024-从零搭建微服务-系统服务（六）

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff08;后端&#xff09;&#xff1a;https://gitee.com/csps/mingyue 源码地址&#xff08;前端&#xff09;&#xff1a;https://gitee.com/csps…...

编程日记 2023/9/11 3:24:56

Arduino驱动TCS3200传感器（颜色传感器篇）

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 TCS3200颜色传感器是一款全彩的颜色检测器，包括了一块TAOS TCS3200RGB感应芯片和4个白色LED灯，TCS3200能在一定的范围内检测和测量几乎所有的可见光。TCS3200有大量的光检测器，每个都有红绿蓝和清…...

编程日记 2023/9/11 3:23:55

基于Matlab实现多个数字水印案例（附上源码+数据集）

数字水印是一种在数字图像或视频中嵌入特定信息的技术&#xff0c;以保护知识产权和防止盗版。在本文中&#xff0c;我们将介绍如何使用Matlab实现数字水印。 文章目录 实现步骤源码数据集下载 实现步骤 首先&#xff0c;我们需要选择一个用于嵌入水印的图像。这可以是原始图像…...

编程日记 2023/9/11 3:22:55

C语言之指针进阶篇（2）

目录 函数指针 函数名和&函数名 函数指针的定义 函数指针的使用 函数指针陷阱 代码1 代码2 注意 函数指针数组定义 函数指针数组的使用 指向函数指针数组的指针 书写 终于军训圆满结束了&#xff0c;首先回顾一下指针进阶篇&#xff08;1&#xff09;主要是…...

编程日记 2023/9/11 3:21:54

C++ 进制转化入门知识（1）

一、什么是进制 进制是一种用来表示数值的系统或方法&#xff0c;它是基于一个特定的基数来工作的。在我们常见的几种进制中&#xff0c;有&#xff1a; 1. **二进制&#xff08;基数 2&#xff09;**&#xff1a; 二进制只用两个数字&#xff1a;0和1。这是计算机内部使用…...

编程日记 2023/9/11 3:20:53

【React】React学习：从初级到高级（四）

React学习[四] 4 应急方案4.1 使用ref引用值4.1.1 给组件添加ref4.1.2 ref和state的不同之处4.1.3 何时使用ref 4.2 使用ref操作DOM4.2.1 获取指向节点的ref4.2.3 使用 ref 回调管理 ref 列表4.2.4 访问另一个组件的DOM节点4.2.5 用 flushSync 同步更新 state 4.3 使用Effect同…...

编程日记 2023/9/11 3:19:52

微信小程序登录问题（思路简略笔记）

配置问题 这是小程序登录问题&#xff0c;必要的两个配置。 流程思路 1. 微信小程序端&#xff0c;会返回一个code。 2. 查看需要返回给微信小程序端的数据。 3. 既然需要返回三个数据&#xff0c;先看openid如何拿到 WX-Login https://api.weixin.qq.com/sns/jscode2ses…...

编程日记 2023/9/11 3:18:51

Go 锁扩展

文章目录 TryLock统计 goroutine数量读写锁读锁写锁常见死锁情况写锁重入写锁中调用读锁循环依赖 TryLock 源码中自带的(我的go是 1.20版本)TryLock 会尝试获取锁&#xff0c;如果获取不到返回false&#xff0c;并不会进行休眠阻塞(和 Lock的主要区别) func (m *Mutex) TryLo…...

编程日记 2023/9/11 3:17:50

Docker的简介及安装

[shouce]http://shouce.jb51.net/docker_practice/栾一峰菜鸟教程参考文献 1 环境配置的难题 软件开发最大的麻烦事之一&#xff0c;就是环境配置。用户计算机的环境都不相同&#xff0c;你怎么知道自家的软件&#xff0c;能在那些机器跑起来&#xff1f; 用户必须保证两件事…...

编程日记 2023/9/11 3:16:49

安卓核心板的不同核心规格及架构介绍

安卓核心板是将核心功能封装的一块电子主板&#xff0c;集成芯片、存储器和功放器件等&#xff0c;并提供标准接口的芯片。 其特点&#xff1a; ● 能跑 Android 等操作系统 强大的功能及丰富的接口 支持 LCD/TP&#xff0c;Audio&#xff0c;Camera&#xff0c;Video&#…...

编程日记 2023/9/11 3:15:46

flume1.11.0安装部署

1、准备安装包apache-flume-1.11.0-bin.tar.gz&#xff1b; 上传&#xff1b; 2、安装flume-1.11.0&#xff1b; 解压&#xff1b; tar -zxvf apache-flume-1.11.0-bin.tar.gz -C /opt/server 进入conf目录&#xff0c;修改flume-env.sh&#xff0c;配置JAVA_HOME&#xff1b…...

编程日记 2023/9/11 3:14:45

通过wordpress 自定义主题的额外CSS删除指定区块

最近用wordpress建站&#xff0c;想要删除指定区块&#xff0c;发现相关的教程蛮少的&#xff0c;作为小白的我搜了相关教程&#xff0c;好像没找到&#xff0c;只能自己慢慢摸索了&#xff0c;看了很多&#xff0c;终于尝试实现了&#xff0c;特记录下&#xff0c;免得自己忘了…...

编程日记 2023/9/11 3:13:44

Rokid Jungle--Max pro

介绍和功能开发 YodaOS-Master操作系统&#xff1a;以交换计算为核心&#xff0c;实现单目SLAM空间交互&#xff0c;具有高精度、实时性和稳定性。发布UXR2.0SDK&#xff0c;为构建空间内容提供丰富的开发套件 多模态交互 算法原子化 多种开发工具协同 多生态支持 骁龙XR2…...

编程日记 2023/9/11 3:12:42

【LeetCode算法系列题解】第61~65题

CONTENTS LeetCode 61. 旋转链表&#xff08;中等&#xff09;LeetCode 62. 不同路径&#xff08;中等&#xff09;LeetCode 63. 不同路径 II&#xff08;中等&#xff09;LeetCode 64. 最小路径和&#xff08;中等&#xff09;LeetCode 65. 有效数字&#xff08;困难&#xff…...

编程日记 2023/9/11 3:11:41

网站怎么上传模板/2000元代理微信朋友圈广告

Listen1 for mac中文版是mac上一款强大的全网搜歌音乐播放器&#xff0c;让你可以免费听全网付费VIP音乐&#xff0c;支持网易云音乐、QQ音乐、虾米音乐、酷狗音乐以及酷我音乐等网站的歌曲搜索播放功能&#xff0c;拥有创建歌单、随心播放、歌曲收藏、快速搜索的功能&#xff…...

编程日记 2024/11/27 0:42:09

做网站要给ftp密码吗/开鲁seo服务

2019独角兽企业重金招聘Python工程师标准>>> 项目上对图像处理需要用到点高斯算法&#xff0c;网上找到一篇对原理及部分问题分析讲解的还不错的文章&#xff0c;分享一下&#xff0c;后付自己的一段代码 - 理论 - 高斯分布函数可表示为一个一维的函数G(x) 或者一个…...

编程日记 2024/11/26 21:38:32

网站线下推广方式/seo概念的理解

在java中&#xff0c;给我们提供了3种循环结构&#xff1b;分别是while语句、do while语句和 for语句&#xff1b;下面我们就来介绍下java中的3种循环语句&#xff1a;1、while语句&#xff1a;它是告诉编译器反复循环执行一组代码&#xff0c;直到满足条件为止&#xff1b;变现…...

编程日记 2024/11/26 19:12:55

潍坊做网站价格/设计一个公司网站多少钱

Linux 下的硬盘读写速度测试工具执行一下以下命令看看你服务器的磁盘性能如何。hdparm -Tt /dev/sda以下是 2块 希捷 ES2 SATA 500G 做 Raid0 的速度[rootadmin ~]# hdparm -Tt /dev/sda/dev/sda:Timing cached reads: 18916 MB in 1.99 seconds 9484.20 MB/secTiming buffere…...

编程日记 2024/11/26 18:20:08

自己买空间做网站/网站seo查询

本文将带你了解Android应用开发Android lombok学习&#xff0c;分享写demo过程中的处理&#xff0c;希望本文对大家学Android有所帮助。下面说一下我写demo过程中的处理过程(可能与网络其他的有些不同)1.AS中安装插件在Android Studio下&#xff0c;进入setting->Plugins …...

编程日记 2024/11/26 16:11:23

wordpress api接口 APP/百度云引擎搜索

1.背景知识介绍丰富的包是Python最大的优势之一。只有想不到的功能&#xff0c;没用不存在的包~包的学习主要包括包的使用与包的安装~1. 包的使用首先看一下包的使用&#xff0c;其实我们之前已经接触到了一点包的使用。#第一种写法&#xff1a;import xxx#第二种写法from xxx …...

编程日记 2024/11/26 13:14:18