前端CSS文字阴影text-shadow记录
前端CSS文字阴影text-shadow记录
一、文字阴影
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;}.text {font-size: 60px;font-weight: bold;text-shadow: 4px 4px 10px #222222;}</style>
</head><body><div class="text">Hello world</div>
</body></html>
效果：
下面代码只放CSS部分
二、文字模糊
.text {font-size: 60px;font-weight: bold;text-shadow: 0 0 6px #000;color: transparent;}
设置文字阴影后，文字颜色设置透明，即可设置文字模糊
三、像素风格的文字
.text {font-size: 60px;font-weight: bold;text-shadow: 2px 2px 0px #ddd,4px 4px 0px #bbb,6px 6px 0px #999,8px 8px 0px #777,10px 10px 0px #555,12px 12px 0px #333,14px 14px 0px #111;color: #fff;}
四、3D文字
.text {font-size: 60px;font-weight: bold;text-shadow: 2px 2px 2px #ddd,4px 4px 2px #bbb,6px 6px 2px #999,8px 8px 2px #777,10px 10px 2px #555,12px 12px 2px #333,14px 14px 2px #111;color: #fff;}
与像素风格不同之处在与阴影模糊效果增加了（0px->2px)
可以把阴影放入伪类，字体会更有空间感，如下：
.text {font-size: 60px;font-weight: bold;text-shadow: 2px 2px 2px #ddd,4px 4px 2px #bbb,6px 6px 2px #999,8px 8px 2px #777,10px 10px 2px #555,12px 12px 2px #333,14px 14px 2px #111;color: #fff;transform: skew(40deg) rotate(-10deg) rotateX(50deg);}
五、彩虹拖尾
.text {font-size: 60px;font-weight: bold;text-shadow: 2px 2px 2px #ff0000,4px 4px 2px #ff7f00,6px 6px 2px #ffff00,8px 8px 2px #00ff00,10px 10px 2px #00ffff,12px 12px 2px #0000ff,14px 14px 2px #8b00ff;color: #fff;/* transform: skew(40deg) rotate(-10deg) rotateX(50deg); */}
修改阴影的颜色就行了
六、空心文字
.text {font-size: 60px;font-weight: bold; color: transparent;-webkit-text-stroke-width: 2px;-webkit-text-stroke-color: #333;/* text-shadow: 6px 6px hotpink; */}
两步：一是文字透明，二是文字描边
继续给文字阴影，就是解开上面注释起来的代码，得到下面效果
相关文章：
前端CSS文字阴影text-shadow记录
前端CSS文字阴影text-shadow记录 一、文字阴影 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Doc…...
maven 删除下载失败的包
本文介绍了当Maven包报红时，使用删除相关文件的方法来解决该问题。文章详细说明了_remote.repositories、.lastUpdated和_maven.repositories文件的作用，以及如何使用命令行删除这些文件。这些方法可以帮助开发者解决Maven包报红的问题，确保项…...
《吐血整理》高级系列教程-吃透Fiddler抓包教程(37)-掌握Fiddler中Fiddler Script用法你有多牛逼-下
1.简介 Fiddler是一款强大的HTTP抓包工具，它能记录所有客户端和服务器的http和https请求，允许你监视，设置断点，甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说，都有很大的帮助。Fiddler提供的功能基本上能…...
网络安全进阶学习第十二课——SQL手工注入3(Access数据库)
文章目录 注入流程：1、判断数据库类型2、判断表名3、判断列名4、判断列数1）判断显示位 5、判断数据长度6、爆破数据内容 注入流程： 判断数据库类型 ——> 判断表名 ——> 判断列名 ——> 判断列名长度 ——> 查出数据。 asp的网…...
Zookeeper集群+Kafka集群
目录 一丶Zookkeeper概述 二、Zookeeper 特点 2.1Zookeeper 应用场景 2.2Zookeeper 选举机制 2.2.1第一次启动选举机制 2.2.2非第一次启动选举机制 三、部署 Zookeeper 集群 3.1//安装 JDK 3.2安装 Zookeeper 3.2.1修改配置文件 3.2.2拷贝配置好的 Zookeeper 配置文件…...
管理类联考——逻辑——论证逻辑——汇总篇——目录+提炼
文章目录 一、削弱方法关系的削弱必要方法的削弱因果推理的削弱果因推理的削弱概念跳跃的削弱数量比例的削弱比例因果的削弱 二、支持方法关系的支持必要方法的支持因果推理的支持果因推理的支持概念跳跃的支持数量比例的支持比例因果的支持 三、假设方法关系的假设必要方法的假…...
用excel格式书写的接口用例执行脚本
创建测试用例和测试结果集文件夹： excel编写的接口测试用例如下： 1 encoding 响应的编码格式。所测项目大部分是utf-8，有一个特殊项目是utf-8-sig 2 params 对应requests的params 3 data，对应requests的data 有些参数是动态的&a…...
【flink】Chunk splitting has encountered exception
执行任务报错： Chunk splitting has encountered exception 错误信息截图： 完整的错误信息： 16:30:43,911 ERROR org.apache.flink.runtime.source.coordinator.SourceCoordinator [SourceCoordinator-Source: CDC Sourceorg.jobslink.flink…...
单元测试用例分组 demo
文章目录 目标1、使用 Category 进行用例分组（1）设置用例组（2）编写测试类，case设置对应的用例组（3）编写执行类（4）查看运行结果（5）联系项目 2、参数…...
观察者模式(Observer)
观察着模式是一种行为设计模式，可以用来定义对象间的一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。 观察者模式又叫做发布-订阅（Publish/Subscribe）模式、模型-视图…...
20天学会rust（二）rust的基础语法篇
在第一节（20天学rust（一）和rust say hi）我们配置好了rust的环境，并且运行了一个简单的demo——practice-01，接下来我们将从示例入手，学习rust的基础语法。 首先来看下项目结构： 项目…...
Stephen Wolfram：嵌入的概念
The Concept of Embeddings 嵌入的概念 Neural nets—at least as they’re currently set up—are fundamentally based on numbers. So if we’re going to to use them to work on something like text we’ll need a way to represent our text with numbers. And certain…...
springboot，swagger多个mapper包，多个controller加载问题
启动类添加MapperScan({"xxx.xxx.xxx.mapper","xxx.xxx.xxx.mapper"}) swagger配置类添加 Bean public Docket api01() {return new Docket(DocumentationType.SWAGGER_2)//.enable(swagger_is_enabl).apiInfo(new ApiInfoBuilder().title("你的title…...
湖大CG满分教程：作业训练四编程题20. 回文串（暴力×动态规划算法√）
问题描述 “回文串”是一个正读和反读都一样的字符串，比如“level”或者“noon”等等就是回文串。给你一个字符串，问最少在字符串尾添加多少字符，可以使得字符串变为回文串。 输入格式 有多组测试数据。 每组测试数据第一行是一个正整数N…...
使用toad库进行机器学习评分卡全流程
1 加载数据 导入模块 import pandas as pd from sklearn.metrics import roc_auc_score,roc_curve,auc from sklearn.model_selection import train_test_split from sklearn.linear_model import LogisticRegression import numpy as np import math import xgboost as xgb …...
)
Python数据容器——列表（list)
数据容器入门 Python中的数据容器： 一种可以容纳多份数据的数据类型，容纳的每一份数据称之为1个元素 每一个元素，可以是任意类型的数据，如字符串、数字、布尔等。 数据容器根据特点的不同，如：是否支持重复元…...
Linux CEF（Chromium Embedded Framework）源码下载编译详细记录
Linux CEF（Chromium Embedded Framework）源码下载编译 背景 由于CEF默认的二进制分发包不支持音视频播放，需要自行编译源码，将ffmpeg开关打开才能支持。这里介绍的是Linux平台下的CEF源码下载编译过程。 前置条件 下载的过程非…...
Adaptive AUTOSAR—— Communication Management 3.1
9 Communication Management 9.1 What is Communication Management? 通信管理是自适应平台架构中的一个功能集群。 作为一个功能集群，通信管理向应用程序提供了一个C++ API，实现了面向服务的通信。服务是一个由应用程序提供的功能单元，可以在运行时被另一个应用程序动态…...
VMnet0 桥接设置
VMnet0 一定要设置为你的硬件物理网卡，不能设置自动，不然后，网线一断，就再也连不上了。必须重启电脑才能连上，这个问题找了很久才找到。 下面有个hyper-V虚拟网卡，如果选自动的话，物理网卡一掉…...
Sublime Text 4 Build 4151 4152 发布及注册方法
Sublime Text 是一个商业代码编辑器。它原生支持许多编程语言和标记语言，用户可以通过插件来扩展它的功能，这些插件通常是由社区建立的，并以自由软件许可证的形式维护。为了方便插件，Sublime Text 有一个 Python API。 Sublime T…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）
引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行，YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID： YW3…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...