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

css奇淫巧计

news 2026/4/3 9:01:56

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. 结果：

      image.png

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文字渐变动画

  1. 设置渐变背景
  2. 用webkit-background-clip: text以div的文字作为裁剪区域向外裁剪
  3. 用-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>

image.png

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&#xff1a;通过用形状替换字符,仅影响那些字段不是的typepassword 可选值:none &#xff08;无&#xff09;&#xff0c;circle &#xff08;圆圈&#xff09;&#xff0c;disc &#xff08;圆形&#xff09;&#xff0c;square &a…...

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

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

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

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

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

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

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

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

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

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

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

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

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

Redis在Windows下安装配置教程

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

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

数据库服务器

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

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

VS输出路径和生成事件

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

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

从 WebKit 看浏览器内核架构

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

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

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

使用原生的 JavaScript&#xff0c;不依赖于任何特定的库与 ROSBridge进行通信 创建与 ROS 的连接&#xff1a; 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是用于验收测试和回归测试的通用测试自动化框架。它使用易于理解的表格数据语法&#xff0c;非常友好的实现了关键字驱动和数据驱动模式。它的测试功能可以通过使用Python或Java实现的测试库进行扩展&#xff0c;用户可以使用…...

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

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

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

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

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

背景 按照官方文档试用新版的in-place特性时&#xff0c;一字不差地执行了&#xff0c;但是却出现了执行失败的情况&#xff1a; 执行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.双绞线 双绞线&#xff1a;将多根铜线按规则缠绕在一起&#xff0c;能够减少干扰&#xff1b;分为无屏蔽双绞线UTP和屏蔽双绞线STP&#xff0c;都…...

编程日记 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搭登录框架&#xff0c;主要就是1、2、3、4 配置&#xff1a; ①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模型修改为自定义节点

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

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

内存对齐原则

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

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

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

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

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

Pixel Mind Decoder 版本管理与协作：Git工作流在AI项目中的应用

Pixel Mind Decoder 版本管理与协作&#xff1a;Git工作流在AI项目中的应用 1. 为什么AI项目需要版本管理 在开发Pixel Mind Decoder这样的情绪分析系统时&#xff0c;我们会频繁修改代码、调整Prompt模板、更新模型参数。如果没有版本管理&#xff0c;很容易陷入混乱&#x…...

编程新知 2026/4/3 8:51:29

无障碍技术实践：OpenClaw+Phi-3-vision-128k-instruct构建语音图文助手

无障碍技术实践&#xff1a;OpenClawPhi-3-vision-128k-instruct构建语音图文助手 1. 项目背景与动机 去年夏天&#xff0c;我在一次志愿者活动中遇到几位视障开发者。他们提到日常工作中最大的障碍不是编程本身&#xff0c;而是无法快速获取图像信息和处理文档内容。这让我开…...

编程新知 2026/4/3 8:49:28

用 DeepWiki 线索看 OpenClaw：它到底用到了哪些 AI 技术？

用 DeepWiki 线索看 OpenClaw&#xff1a;它到底用到了哪些 AI 技术&#xff1f; OpenClaw 近来在个人 AI 助手、Agent 框架和本地优先智能体领域里讨论度很高。很多人第一次看到它&#xff0c;会把它简单理解为“一个能接聊天渠道的大模型壳子”。但如果顺着 GitHub 文档以及项…...

编程新知 2026/4/3 8:39:23

QMCDecode：让QQ音乐加密文件重获自由的macOS工具

QMCDecode&#xff1a;让QQ音乐加密文件重获自由的macOS工具 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认转换结…...

编程新知 2026/4/3 8:02:46

AgentCPM-Report部署教程：Pixel Epic在Ubuntu/CentOS下的环境配置

AgentCPM-Report部署教程&#xff1a;Pixel Epic在Ubuntu/CentOS下的环境配置 1. 项目介绍 Pixel Epic是一款基于AgentCPM-Report大模型构建的研究报告辅助终端&#xff0c;它将枯燥的科研工作转化为一场像素风格的RPG冒险体验。与传统AI工具不同&#xff0c;Pixel Epic采用了…...

编程新知 2026/4/3 7:38:37

Intv_AI_MK11大模型Python入门实战：零基础快速部署与调用指南

Intv_AI_MK11大模型Python入门实战&#xff1a;零基础快速部署与调用指南 1. 前言&#xff1a;为什么选择Intv_AI_MK11 如果你刚接触AI大模型开发&#xff0c;可能会被各种复杂的部署流程吓退。Intv_AI_MK11作为一款开源大模型&#xff0c;不仅性能出色&#xff0c;更重要的是…...

编程新知 2026/4/3 7:36:37

Bili2text：重构B站视频内容提取流程的智能解决方案

Bili2text&#xff1a;重构B站视频内容提取流程的智能解决方案 【免费下载链接】bili2text Bilibili视频转文字&#xff0c;一步到位&#xff0c;输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 在信息爆炸的视频时代&#xff0c;教育工作者、…...

编程新知 2026/4/3 7:30:35

Qwen3-VL-2B-Instruct保姆级教程：视觉对话机器人部署

Qwen3-VL-2B-Instruct保姆级教程&#xff1a;视觉对话机器人部署 1. 环境准备与快速部署 想要体验AI视觉对话的神奇能力吗&#xff1f;Qwen3-VL-2B-Instruct让你不用昂贵的显卡也能拥有一个能"看懂"图片的智能助手。这个教程将手把手带你完成整个部署过程&#xff…...

编程新知 2026/4/3 6:51:55

Windows下用CMake和VS编译gRPC 1.72.0，我踩过的那些坑（附完整依赖库列表）

Windows平台下gRPC 1.72.0编译实战&#xff1a;从CMake配置到VS链接错误的系统化解法 最近在Windows平台上手动编译gRPC 1.72.0的经历可谓是一波三折。作为一个长期在Linux环境下工作的开发者&#xff0c;这次回到Windows平台进行gRPC编译&#xff0c;遇到了不少特有的挑战。本…...

编程新知 2026/4/3 6:19:15

OpenClaw定时任务：千问3.5-9B实现每日自动化巡检

OpenClaw定时任务&#xff1a;千问3.5-9B实现每日自动化巡检 1. 为什么需要自动化巡检 去年接手一个长期维护的Python项目时&#xff0c;我每天早晨都要手动检查服务器状态、数据库连接、日志错误和依赖库版本。这种重复劳动不仅耗时&#xff0c;还容易遗漏关键指标。直到发现…...

编程新知 2026/4/3 4:37:45