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

css奇淫巧计

news 2026/2/8 14:17:35

1.input文本内容替换

-webkit-text-security：通过用形状替换字符,仅影响那些字段不是的type=password
1. 可选值:none （无），circle （圆圈），disc （圆形），square （正方形）
2. 代码：
```
<style>input {-webkit-text-security: circle;}
</style>
<input type="text" name="name" id="name" />
```
3. 结果：

2. 使用currentColor

currentColor 可以说是css的一个变量,会被解析为 clolor 的一个值,所以下面我们就可以给跟，color同样值使用currentColor
```
.text{color: #3397ff;border: 1px solid currentColor;
}
```

3.使用 inherit

-inherit会继承来着父元素的对应值
css .box{ font-size: 20px; color: #3397ff; background: #333333; border: 1px solid currentColor; .text{ line-height: 2em; margin-top: 2em; width: 20em; color:inherit; background:inherit; border:inherit; } }

4.css文字渐变动画

设置渐变背景
用webkit-background-clip: text以div的文字作为裁剪区域向外裁剪
用-webkit-text-fill-color把文字变透明

<style>.list {background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-background-size: 200% 100%;animation: bgp 5s infinite linear;}@keyframes bgp {0%  { background-position: 0 0;}100% { background-position: -100% 0;}}
</style><div class="list"><span class="list-item">今天又是元气满满的一天</span><span class="list-item">让眼睛休息一下把</span><span class="list-item">小姐姐今天好漂漂哟~</span><span class="list-item">明天要放假了真开心</span><span class="list-item">每天进步一点点</span></div>

5.通过 box-reflect 设置倒影

通过-webkit-box-reflect设置倒影，并添加倒影渐变色
详情

<style>
.reflect{width:950px;margin:0 auto;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));text-transform:uppercase;}
</style>
</head>
<body>
<div class="reflect">你看到倒影了么？</div>
</body>

6.虚化黑色

 .text{fade-out(black, 0.95) /* black的变种，1是全黑，0是全透明无色 */}

7.伪类清除浮动

.clearfix:after{content: '';display: block; /*或者 table*/clear: both;}.clearfix{zoom: 1; /* IE 兼容*/}

8.:checked修改radio、checkbox样式

<style>.tabList{position: relative;display: inline-block;}input[type='radio']{width:100%;height:100%;position: absolute;top:0;left:0;opacity: 0;z-index:9;}.tabDiv{width:100px;height:40px;position: relative;z-index:1;border:1px solid;line-height:40px;text-align: center;}input[type='radio']:checked + .tabDiv{background: red;border:1px solid red;}</style>
<body><div class='tabList'><input type='radio' name='tab' /><div class='tabDiv'>one</div></div><div class='tabList'><input type='radio' name='tab' /><div class='tabDiv'>two</div></div>
</body>

css奇淫巧计

1.input文本内容替换 -webkit-text-security：通过用形状替换字符,仅影响那些字段不是的typepassword 可选值:none （无），circle （圆圈），disc （圆形），square &a…...

编程日记 2023/5/31 19:52:18

Web服务器实现｜基于阻塞队列线程池的Http服务器｜线程控制｜Http协议

基于阻塞队列生产者消费者模型线程池的多线程Web服务器代码地址：WebServer_GitHub_Addr README 摘要本实验通过C语言，实现了一个基于阻塞队列线程池的多线程Web服务器。该服务器支持通过http协议发送报文，跨主机抓取服务器上特定资源。与…...

编程日记 2023/5/31 19:47:17

【C++】运算符重载（日期类的实现）

【C】运算符重载（日期类的实现） 前言运算符重载operator全局和类中日期类的实现成员变量的确定构造函数拷贝构造运算符重载部分的重载思路实现GETmonthdayoperator 的重载思路实现 -的与-的重载实现各个比较运算符的重载实现前置与后置实现 &#xf…...

编程日记 2023/5/31 19:42:15

【Linux】线程分离 | 线程库 | C++调用线程 | 线程局部存储

文章目录 1. 线程分离1. 为什么要线程分离？2. 具体使用3. 为什么有时候分离在调用join 会正常运行？ 2. 如何理解线程库？如何理解先描述在组织？ 3. C中使用多线程4. 线程局部存储局部变量全局变量 1. 线程分离 1. 为什么要线程分…...

编程日记 2023/5/31 19:37:13

c++ ffmpeg 浅谈YUV444、YUV422、YUV420（2）

本期将会给大家介绍YUV相关基础知识，同时也介绍威创网络分布式系统的卓越色彩处理技术。 1.什么是YUV色彩空间 2.YUV采样格式 3.YUV不同采样格式对图像画质的影响分析一、什么是YUV色彩空间? YUV是视频、图片、相机等应用中常常使用的一类图像格式，是…...

编程日记 2023/5/31 19:32:12

Redis在Windows下安装配置教程

Redis是一个开源的高性能键值对存储数据库，常用于缓存、消息队列等场景。本文将介绍如何在Windows系统下安装配置Redis。 1. 下载地址 Redis官方网站提供了Windows版本的安装包下载地址，网址为：https://github.com/tporadowski/redis/relea…...

编程日记 2023/5/31 19:27:11

数据库服务器

数据库服务器，联系Web服务器与DBMS的中间件是负责处理所有的应用程序服务器，包括在web服务器和后台的应用程序或数据库之间的事务处理和数据访问。基本信息中文名数据库服务器外文名 database server 功能数据库服务器建立在数据库系统基础上&a…...

编程日记 2023/5/31 19:22:10

VS输出路径和生成事件

在生成时，常常希望输出文件夹整洁，因此需要设置dll或exe输出位置，同时也希望对一些文件做一些特殊操作 VS的 UI 常用缩写 “./”：代表目前所在的目录。 " . ./"代表上一层目录。 “/”：代表根目录。生成…...

编程日记 2023/5/31 19:17:10

从 WebKit 看浏览器内核架构

浏览器常见的浏览器内核有：Blink、WebKit、Gecko、Trident 等，目前 WebKit 内核占据了非常大的的市场，包括 Chrome、Safari、安卓浏览器等市面上的主流浏览器，都使用了 WebKit 内核。从 WebKit 看浏览器内核架构既然 WebKit 这么…...

编程日记 2023/5/31 19:12:08

使用原生的 JavaScript，不依赖于任何特定的库与 ROSBridge进行通信

使用原生的 JavaScript，不依赖于任何特定的库与 ROSBridge进行通信创建与 ROS 的连接： var rosbridge_url "ws://localhost:9090"; var ws new WebSocket(rosbridge_url);ws.onopen function(event) {console.log(Connected to rosbri…...

编程日记 2023/5/31 19:07:07

MATLAB第十章_图像处理算法

目录图像处理算法图像处理基础图像处理函数默认显示方式添加颜色条显示多帧图像显示动画三维材质图像图像的直方图灰度变换均衡直方图图像处理应用图像增强图像重建图像变换图像压缩图像分割图像边缘检测图像识别图像处理算法图像处理…...

编程日记 2023/5/31 19:02:06

RobotFramework接口测试方案

1. Robot FrameWork介绍 1.1 介绍 Robot Framework是用于验收测试和回归测试的通用测试自动化框架。它使用易于理解的表格数据语法，非常友好的实现了关键字驱动和数据驱动模式。它的测试功能可以通过使用Python或Java实现的测试库进行扩展，用户可以使用…...

编程日记 2023/5/31 18:57:05

chatgpt赋能python：Python中日期转换：从字符串到日期对象

Python中日期转换：从字符串到日期对象作为一个经验丰富的Python工程师，日期转换在我的日常编码工作中经常遇到。Python提供了一些内置函数和模块，可以将字符串转换为日期对象或将日期对象格式化为特定的字符串。本篇文章将带您深入了解Pyth…...

编程日记 2023/5/31 18:52:04

k8s 1.27新特性in-place使用方法：避坑指南（官方文档有坑，已提issue）

背景按照官方文档试用新版的in-place特性时，一字不差地执行了，但是却出现了执行失败的情况： 执行kubectl -n qos-example patch pod qos-demo-5 --patch {"spec":{"containers":[{"name":"qos-demo-ct…...

编程日记 2023/5/31 18:47:03

网络传输（传输介质、通信方式、交换方式）

目录一、传输介质1.双绞线2.网线安装3.光纤4.无线信道二、通信方式、交换方式1.通信方式2.同步方式3.交换方式一、传输介质 1.双绞线双绞线：将多根铜线按规则缠绕在一起，能够减少干扰；分为无屏蔽双绞线UTP和屏蔽双绞线STP，都…...

编程日记 2023/5/31 18:42:01

【Unity】Time.deltaTime有什么用？看完你就明白

大多数刚开始使用 Unity 的人（包括我），都会对Time.deltaTime感到迷惑。看完本文，你就会明白Time.deltaTime的定义及作用。 1、deltaTime是什么？根据定义，Time.deltaTime是每一帧之间的时间间隔（以秒为单位）。这有助于我们使游戏与帧数无关，也就是说，无论 fps 是…...

编程日记 2023/5/31 18:37:00

vue实现用户动态权限登录

一、使用vueelementUI搭登录框架，主要就是1、2、3、4 配置： ①vue.config.js use strict const path require(path)function resolve(dir) {return path.join(__dirname, dir) }// All configuration item explanations can be find in https://cli.v…...

编程日记 2023/5/31 18:31:59

ONNX模型修改为自定义节点

参考一首先，需要将ONNX模型中的节点修改为自定义节点。要实现这一点，您需要了解自定义节点的定义和如何在ONNX中使用它们。ONNX定义了一个自定义运算符的接口，您可以使用该接口定义自己的运算符，并将其编译为ONNX模型可以识别的…...

编程日记 2023/5/31 18:26:58

内存对齐原则

struct （1）结构体第一个数据成员放在offset为0的地方，后面每个成员相对于结构体首地址的偏移量（offset）都是成员大小（该变量类型所占字节）的整数倍，如有需要编译器会在成员之间加上填…...

编程日记 2023/5/31 18:21:57

Java SPI 一之SPI（Service Provider Interface）进阶 AutoService

一、SPI（Service Provider Interface） 1.1 介绍 SPI（Service Provider Interface），是JDK内置的一种服务提供发现机制(为某个接口寻找服务实现的机制)，可以用来启用框架扩展和替换组件，其…...

编程日记 2023/5/31 18:16:56

golang循环变量捕获问题

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景看这个代码片段： fo…...

编程新知 2026/1/21 14:29:57

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2026/2/4 17:51:19

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器纯前端实现高延迟高流量帧率极低个人demo测试超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享相信一定会对你有所帮助~ 那咱们废话不多说，直接开始吧！ 一、基础概念 1. 哈希核心思想： 哈希函数的作用：通过此函数建立一个Key与存储位置之间的映射关系。理想目标：实现…...

编程新知 2026/1/28 11:27:52

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...

编程新知 2026/1/10 19:08:23

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了，很多小伙伴想体验鸿蒙电脑版操作系统，可惜，鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机，来体验大家心心念念的鸿蒙系统啦！注意：虚拟…...

编程新知 2026/2/6 2:33:44