CSS新增文本描边-text-stroke属性

news2024/10/6 8:30:31

-webkit-text-stroke属性

概念:-webkit-text-stroke属性为文本添加描边效果。所谓的描边效果,指的是给文字添加边框

语法:

-webkit-text-stroke:width color;

Chrome和Firefox这两个浏览器都只能识别带有-webkit前缀的text-stroke属性

-webkit-text-stroke是一个复合属性,是由两个子属性组成的。

  • -webkit-text-stroke-width:定义边框的宽度
  • -webkit-text-stroke-color:定义边框的颜色

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>text-stroke-文本描边</title>
		<style>
			.a{
				font-size:30px;
			}
			.b{
				font-size:30px;
				-webkit-text-stroke:1px blue;
			}
			.c{
				font-size:30px;
				font-weight:bold;
				color:transparent;
				-webkit-text-stroke:2px gold;
			}
		</style>
	</head>
	<body>
		<div class="a">文本未被描边</div>
		<div class="b">文本已被描边</div>
		<!-- text-stroke实现镂空文字 -->
		<div class="c">镂空文字</div>
	</body>
</html>

运行结果
在这里插入图片描述

使用text-stroke配合color:transparent;font-weight:bold;,可以实现镂空文字

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1359844.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

科锐16位汇编学习笔记 02 分段,机器码和寻址

分段 问题1 8086是16位cpu&#xff0c;最多可以访问&#xff08;寻址&#xff09;多大内存&#xff1f; - 运算器一次最多处理16位的数据。 - 地址寄存器的最大宽度为16位。 - 访问的最大内存为&#xff1a;216 64K 即 0000 - FF…

UOS下通过SSH隧道访问云端内网windows桌面

1 用户痛点 随着时代的发展&#xff0c;众多企业的服务器慢慢走向云端。大量云端服务器节省企业成本的同时&#xff0c;也带来了安全性问题。例如&#xff1a;管理云端的服务器&#xff0c;特别是windows桌面服务器&#xff0c;往往需要给这个服务器分配一个公网IP地址&#x…

ReCAPTCHA 解决方案的自动识别和解决方法

ReCAPTCHA&#xff0c;作为广泛使用的安全措施&#xff0c;旨在区分人类和自动化机器人。然而&#xff0c;技术的进步导致了自动识别和解决 ReCAPTCHA 挑战的方法的发展。在本文中&#xff0c;我们将探讨自动 ReCAPTCHA 识别和解决技术的概念&#xff0c;以及创新解决方案 Caps…

[附代码]稳态视觉诱发电位SSVEP之预训练模型提高性能

SSVEP 之深度学习 深度学习已经被广泛运用在脑电信号分析来提高脑机接口的性能,这是一个end-to-end的方法,简单来说,只要搭建好深度学习网络,做好特征工程,然后分类即可,对于一个刚刚接触脑机接口领域深度学习的学习者来说,可以先忽略中间的数学相关的东西,先建一个网…

【Java 进阶篇】Nginx 使用详解:搭建高性能的 Web 服务器

在互联网的世界里&#xff0c;Web 服务器是我们访问网站、获取信息的入口。Nginx&#xff08;发音"engine x"&#xff09;作为一款轻量级、高性能的 Web 服务器和反向代理服务器&#xff0c;因其出色的性能和可扩展性而备受推崇。本文将围绕 Nginx 的使用进行详解&am…

十大电脑屏幕监控软件超全盘点!

电脑屏幕已经成为我们工作、学习和生活中不可或缺的一部分。然而&#xff0c;随着人们对电脑使用的日益频繁&#xff0c;电脑屏幕监控软件也应运而生&#xff0c;成为了企业和个人用户进行电脑管理和监控的重要工具。 本文将为您盘点十大电脑屏幕监控软件&#xff0c;帮助您了…

Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup

1. OptionsAPI与CompositionAPI Vue2的API设计是Options(配置)风格的Vue3的API设计是Composition(组合)风格的 Options API的弊端&#xff1a; Options类型的API&#xff0c;数据、方法、计算属性等&#xff0c;是分散在&#xff1a;data、methods、computed中的&#xff0c;若…

前缀和算法模板

一维前缀和 算法用途&#xff1a;快速求出数组中某一连续区间的和 一维前缀和算法模板 1、预处理出一个 dp 数组 要求原数组存储在 n 1 的空间大小中&#xff0c;其中后 n 个空间存数据。 dp数组&#xff0c;数组开 n 1个空间&#xff0c;dp[i] 表示 [ 1, i ] 区间内所有…

主题-----读微信公众号

1.SOA 面向服务的架构&#xff08;Service-Oriented Architecture&#xff0c;SOA&#xff09;还没有一个公认的定义。许多组织从不同的角度和不同的侧面对 SOA 进行了描述&#xff0c;较为典型的有以下三个&#xff1a; &#xff08;1&#xff09;W3C 的定义&#xff1a;SOA 是…

机器学习库【03】:-NumPy-算术运算

一、说明 与常规数学一样,数组算术本质上是关于加法、减法、乘法和除法。在 中NumPy,此类操作是按元素执行的 [2]: NumPy 是 Numerical Python 的缩写,是 Python 生态系统中一个功能强大的库,它提供对大型多维数组和矩阵的支持,以及对这些数组进行操作的数学函数集合。Nu…

Guava Cache 异步刷新技巧,你值得拥有!

以下文章来源于勇哥Java实战 &#xff0c;作者勇哥 Guava Cache是一款非常优秀的本地缓存框架。 这篇文章&#xff0c;我们聊聊如何使用 Guava Cache 异步刷新技巧带飞系统性能 。 1 经典配置 Guava Cache 的数据结构跟 JDK1.7 的 ConcurrentHashMap 类似&#xff0c;提供了基…

Springcloud alibab和dubbo有什么区别?

Spring Cloud Alibaba 和 Dubbo 都是为了简化企业级应用开发而生的框架&#xff0c;尤其是在分布式系统和微服务架构的背景下。 虽然他们在某些功能上有重叠&#xff0c;但各有侧重点和使用场景。 微服务架构图 首先介绍一下 Spring Cloud Alibaba&#xff1a; Spring Cloud …

【c语言】指针小结

一、指针是什么&#xff1f; 可以通过运算符&来取得变量实际保存的 起始地址 。 &#xff08;这个地址是虚拟地址&#xff0c;并不是真正物理内存上的地址。&#xff09; 数据类型 *标识符 &变量; int *pa &a; int *pa NULL; (NULL表示地址为0的内存空间&a…

Keras实现seq2seq

概述 Seq2Seq是一种深度学习模型&#xff0c;主要用于处理序列到序列的转换问题&#xff0c;如机器翻译、对话生成等。该模型主要由两个循环神经网络&#xff08;RNN&#xff09;组成&#xff0c;一个是编码器&#xff08;Encoder&#xff09;&#xff0c;另一个是解码器…

gitlab 8.13.0 关闭注册功能

新版本基本都可以在网上找到关闭注册的教程&#xff0c;但是老版本会比较麻烦&#xff0c;可以通过如下路径在网页中设置&#xff08;root 管理员登录&#xff09; ​​​​​​http://ip:port/admin/application_settings 最后保存即可

C语言学习NO.11-字符函数strlen,strlen函数的使用,与三种strlen函数的模拟实现

&#xff08;一&#xff09;strlen函数的使用 strlen函数的演示 #include <stdio.h> #include <string.h>int main() {char arr1[] "abcdef";char arr2[] "good";printf("arr1 %d,arr2 %d",strlen(arr1),strlen(arr2));return …

阿里通义千问「全民舞王」,一张照片就能跳《科目三》,刷爆朋友圈

这两天看朋友圈、网上都在发这种跳舞的视频。只要上传一张全身照&#xff0c;就可以生成各种跳舞的视频。 比如前段时间火爆海底捞的《科目三》&#xff0c;还有《DJ慢摇》、《鬼步舞》、《兔子舞》、甚至还有咱《秧歌舞》。 先来一睹为快&#xff01; 阿里通义千问「全民舞王…

JS新手入门笔记整理:JS语法基础

变量与常量 变量 语法 var 变量名值&#xff1b; 1、在JavaScript中&#xff0c;给一个变量命名&#xff0c;需要遵循以下2个方面的原则&#xff1a; 变量由字母、下划线、$或数字组成&#xff0c;并且第一个字母必须是字母、下划线或$。变量不能是系统关键字和保留字。 2…

主浏览器优化之路2——Edge浏览器的卸载与旧版本的重新安装

Edge浏览器的卸载与旧版本的重新安装 引言开整寻找最年轻的她开始卸载原本的Edge工具下载后新版本的安装 结尾 引言 &#xff08;这个前奏有点长&#xff0c;但是其中有一些我的思考顿悟与标题的由来&#xff0c;望耐心&#xff09; 我在思考这个系列的时候 最让我陷入困得是…

电商要怎么学?企业如何进行数字化转型打破市场僵局?

电商要怎么学&#xff1f;企业如何进行数字化转型打破市场僵局&#xff1f; 电商的学习需要从多个方面入手&#xff0c;首先需要了解电商的基本概念和原理&#xff0c;包括电商平台的运营模式、商品推广、客户服务等。此外&#xff0c;还需要掌握电商平台的操作技能&#xff0c…