前端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…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中，压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言，提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生，系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler，它是Thread的子类（就是package java.lang;里线程的Thread）。本文将利用它将设备信息、报错信息以及错误的发生时间都…...
python打卡第47天
昨天代码中注意力热图的部分顺移至今天 知识点回顾： 热力图 作业：对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图，展示模…...