前端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…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...