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

-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.mzph.cn/news/600733.shtml

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

相关文章

金和OA C6 UploadFileEditorSave.aspx 任意文件上传漏洞

产品介绍 金和网络是专业信息化服务商,为城市监管部门提供了互联网监管解决方案,为企事业单位提供组织协同OA系统开发平台,电子政务一体化平台,智慧电商平台等服务。 漏洞概述 金和 OA C6 uploadfileeditorsave接口处存在任意文件上传漏洞&#xff0c;攻击者可以通过构造特殊…

洛谷——P1983 [NOIP2013 普及组] 车站分级(拓扑排序、c++)

文章目录 一、题目[NOIP2013 普及组] 车站分级题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示 二、题解基本思路&#xff1a;代码 一、题目 [NOIP2013 普及组] 车站分级 题目背景 NOIP2013 普及组 T4 题目描述 一条单…

面试题:说一下Java开启异步线程的几种方法?

文章目录 整体描述实现方法一、注解Async1. 添加注解2. 创建异步方法Service和实现类3. 调用异步方法 二、AsyncManager1. 创建AsyncManager类2. 创建一个耗时的操作类3. 执行异步操作 三、线程池1. 创建线程池2. 创建一个耗时的操作类3. 执行线程池 总结 整体描述 在java中异…

使用STM32的定时器和PWM实现LCD1602的背光控制

使用STM32的定时器和PWM功能来控制LCD1602的背光是一种常见的方法&#xff0c;它可以实现背光的亮度调节和闪烁效果。在本文中&#xff0c;我们将讨论如何利用STM32的定时器和PWM来实现LCD1602的背光控制&#xff0c;并提供相应的代码示例。 1. 硬件连接和初始化 首先&#x…

大语言模型LLM微调技术:Prompt Tuning

1 预训练语言模型概述 1.1 预训练语言模型的发展历程 截止23年3月底&#xff0c;语言模型发展走过了三个阶段&#xff1a; 第一阶段 &#xff1a;设计一系列的自监督训练目标&#xff08;MLM、NSP等&#xff09;&#xff0c;设计新颖的模型架构&#xff08;Transformer&#…

二蛋赠书十三期:《一书读懂物联网》

前言 大家好&#xff01;我是二蛋&#xff0c;一个热爱技术、乐于分享的工程师。在过去的几年里&#xff0c;我一直通过各种渠道与大家分享技术知识和经验。我深知&#xff0c;每一位技术人员都对自己的技能提升和职业发展有着热切的期待。因此&#xff0c;我非常感激大家一直…

标书制作的几个关键部分

在当今社会&#xff0c;无论是企业还是个人&#xff0c;参与招投标都是获取资源、项目或服务的重要途径。而一份优秀的标书&#xff0c;无疑是成功的关键。那么&#xff0c;标书究竟包含哪些部分呢&#xff1f; 1.封面与目录 封面是标书的脸面&#xff0c;它直接决定了评审专…

k8s的声明式资源管理(yaml文件)

1、声明式管理的特点 &#xff08;1&#xff09;适合对资源的修改操作 &#xff08;2&#xff09;声明式管理依赖于yaml文件&#xff0c;所有的内容都在yaml文件当中 &#xff08;3&#xff09;编辑好的yaml文件&#xff0c;还是要依靠陈述式的命令发布到k8s集群当中 kubect…

js 颜色转换,RGB颜色转换为16进制,16进制颜色转为RGB格式

颜色转换&#xff0c;RGB颜色转换为16进制,16进制颜色转为RGB格式&#xff0c;可以自己设置透明度。 //十六进制颜色值的正则表达式 var reg /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; /*RGB颜色转换为16进制*/ String.prototype.colorHex function () {var that this;if (/^…

Python逻辑运算符详解

在Python中&#xff0c;逻辑运算符用于比较两个或多个条件&#xff0c;并根据条件的结果返回一个布尔值&#xff08;True或False&#xff09;。 Python中的逻辑运算符有三种&#xff1a;and、or和not。 and运算符 and运算符用于判断两个条件是否同时为True。只有当两个条件都…

软件验收测试计划、验收测试报告案例模板参考

1. 概述 1.1. 编写目的 1.2. 测试背景 1.3. 测试依据 1.4. 测试对象 1.5. 测试资源 2. 测试方式与环境 2.1. 测试方式 2.2. 测试环境 3. 测试结果 3.1. 功能适合性和准确性 3.1.1. 总体统计 3.1.2. 详细结果 3.2. 安全性 3.3. 可靠性和性能 4. 总体分析 5. 测试…

创建VScode的C/C++编译环境

创建VScode的C/C编译环境 安装软件json文件 安装软件 可以选择安装Dev-Cpp、BlockCode或者MinGW。这里选择了Dev-Cpp。 json文件 launch.json { "version": "0.2.0", "configurations": [ { "name": "&#xff08;gdb) L…

python解决如何判断平衡二叉树问题

对于二叉树中的特殊二叉树&#xff0c;平衡二叉树&#xff0c;要想解决判断二叉树是否是平衡二叉树问题&#xff0c;首先需要知道什么事平衡二叉树。 平衡二叉树的概念是指给定一颗二叉树&#xff0c;这颗二叉树以及二叉树的所有子二叉树的左右子树的高度之差不大于1&#xff…

redis的搭建及应用(六)-redis应用LUA脚本

edis的lua脚本 Lua 是一种轻量小巧的脚本语言&#xff0c;用标准C语言编写并以源代码形式开放&#xff0c; 其设计目的是为了嵌入应用程序中&#xff0c;从而为应用程序提供灵活的扩展和定制功能。 Lua 是巴西里约热内卢天主教大学&#xff08;Pontifical Catholic University …

STM32 IAP学习

STM32三种烧录方式 ISP&#xff1a;In System Programming&#xff08;在系统编程&#xff09; 执行芯片厂商的BootLoader程序进入ISP模式&#xff0c;进入ISP模式后&#xff0c;用户可选择官方提供的烧录通信接口&#xff08;如&#xff1a;串口&#xff09;&#xff0c;并配…

C++ UTF-8与GBK字符的转换 —基于Windows (MultiByteToWideChar WideCharToMultiByte)

1、UTF-8 和 GBK 的区别 GBK&#xff1a;通常简称 GB &#xff08;“国标”汉语拼音首字母&#xff09;&#xff0c;GBK 包含全部中文字符。 UTF-8 &#xff1a;是一种国际化的编码方式&#xff0c;包含了世界上大部分的语种文字&#xff08;简体中文字、繁体中文字、英文、…

word2019保存后的图片变模糊了怎么办?Word 2019 默认保存后压缩变模糊的问题,解决方案

Word 2019 默认保存后压缩变模糊的问题&#xff0c;解决方案 1&#xff0c;新建word 文件&#xff0c;插入一张原始图片&#xff0c;1080*1920&#xff0c;如下图&#xff1a; 2&#xff0c;保存时&#xff0c;word 2019默认选项&#xff0c;导致word 保存后&#xff0c;图片…

CTFshow web入门web127-php特性30

开启环境: extract() 函数从数组中将变量导入到当前的符号表&#xff0c;使用数组键名作为变量名&#xff0c;使用数组键值作为变量值 举例就是?a2&#xff0c;就会变成$a2&#xff0c;这里ctf_show有个_需要构造&#xff0c;前面说过php中变量名只有数字字母下划线&#xff…

<HarmonyOS主题课>1~3课后习题汇总

&#xff1c;HarmonyOS第一课&#xff1e;1~10课后习题汇总 1使用DevEco Studio高效开发 单选题 用哪一种装饰器修饰的组件可作为页面入口组件&#xff1f;&#xff08;B&#xff09; A. ComponentB. EntryC. PreviewD. Builder ArkTS Stage模型支持API Version 9&#xf…

uniapp 日历组件

我们的需求是显示当前月和下个月的排班表 引入 uniapp 日历组件 uni-calendar 做法有两种&#xff0c;一种是直接去修改组件&#xff0c;还有就是文档中提供的 selected 方法 修改组件的就不写了 <uni-calendar :lunar"true" :selected"selected" :in…