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.rhkb.cn/news/231687.html

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

相关文章

astadmin安装querylist插件Puppeteer

我本来是想在linux服务器上安装&#xff0c;折腾了一天也没安装成功&#xff0c;由于急着用&#xff0c;就先做window10上安装了&#xff0c;以后有时间再研究centos7上安装 一 首先需要安装fastadmin 框架和querylist插件 这个大家可以自行安装&#xff0c;querylist安装地址…

Django 7 实现Web便签

一、效果图 二、会用到的知识 目录结构与URL路由注册request与response对象模板基础与模板继承ORM查询后台管理 三、实现步骤 1. terminal 输入 django-admin startapp the_10回车 2. 注册&#xff0c; 在 tutorial子文件夹settings.py INSTALLED_APPS 中括号添加 "the…

Java-变量类型-分类

1 需求 2 接口 3 示例 public class RunoobTest {// 成员变量private int instanceVar;// 静态变量private static int staticVar;public void method(int paramVar) {// 局部变量int localVar 10;// 使用变量instanceVar localVar;staticVar paramVar;System.out.println(…

ubuntu 20.04 自由切换 python 的版本

问题描述 当前 ubuntu 20.04 默认安装了多个 python 的版本&#xff0c;执行 python 时&#xff0c;默认版本是 Python 2.7.18 zhangszzhangsz:~$ python Python 2.7.18 (default, Jul 1 2022, 12:27:04) [GCC 9.4.0] on linux2 Type "help", "copyright&quo…

Unity 圆角 线段 绘制 LineRender

需求 绘制圆角 核心函数 /// <summary>/// 点ABC 形成的角度必须为90 点c为中间的点/// </summary>/// <param name"a"></param>/// <param name"b"></param>/// <param name"c"></param>/// &…

判断完全数-第11届蓝桥杯省赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第27讲。 判断完全数&#…

品牌营销“网红化”是长久之计吗

“多巴胺穿搭”、“citywalk”、“美拉德风”等一系列爆火的活动仿佛就在昨日&#xff0c;品牌通过“网红化”的营销能够让更多人看到品牌&#xff0c;但是网红营销是一把双刃剑&#xff0c;放大了品牌的一举一动&#xff0c;让优点被更多人看见&#xff0c;缺点也被更多人批判…

SpringBoot Redis入门(一)——redis、Lettuce、Redisson使用

本章&#xff1a;将展示SpringBoot集成Redis三种客户端的配置要点和常见应用示例&#xff1b;下章&#xff1a;自行实现一个方法级的缓存注解&#xff0c;简化版的Cacheable&#xff0c;使初学者加深对Spring缓存框架的理解。 一、Lettuce客户端 Lettuce 是一种可扩展的、线程…

【数据库原理】(9)SQL简介

一.SQL 的发展历史 起源&#xff1a;SQL 起源于 1970 年代&#xff0c;由 IBM 的研究员 Edgar F. Codd 提出的关系模型概念演化而来。初期&#xff1a;Boyce 和 Chamberlin 在 IBM 开发了 SQUARE 语言的原型&#xff0c;后发展成为 SQL。这是为了更好地利用和管理关系数据库。…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)创建并初始化TcpServer实例 以及 启动

对于一个TcpServer来说&#xff0c;它的灵魂是什么&#xff1f;就是需要提供一个事件循环EventLop(EventLoop)&#xff0c;不停地去检测有没有客户端的连接到达&#xff0c;有没有客户端给服务器发送数据&#xff0c;描述的这些动作&#xff0c;反应堆模型能够胜任。当服务器和…

【动态规划】【字符串】132.分割回文串 II

作者推荐 【动态规划】【字符串】扰乱字符串 本文涉及的基础知识点 动态规划 字符串 LeetCode132. 分割回文串 II 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是回文。 返回符合要求的 最少分割次数 。 示例 1&#xff1a; 输入&#x…

真核微生物基因序列鉴定工具EukRep工具的安装和详细使用方法

介绍 EukRep是一种用于鉴定并分析环境中的真核微生物的工具。它基于16S rRNA基因序列&#xff0c;可以帮助研究人员确定和分类环境样品中存在的真核微生物群落。 EukRep 从宏基因组数据集中分类真核和原核序列 安装 要求Python3 推荐使用conda安装&#xff1a; $ conda cre…

操作系统期末复习大题---经典进程的同步问题

目录 一、经典进程的同步问题 1. 利用记录型信号量解决生产者—消费者问题 执行流程&#xff1a; ”生产者-消费者”问题模型代码框架如下&#xff1a; 注意&#xff1a; 小结&#xff1a; 复习典型例题&#xff1a; 解答&#xff1a; 2. 利用AND信号量解决生产者——…

【React系列】Hook(二)高级使用

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. Hook高级使用 1.1. useReducer 很多人看到useReducer的第一反应应该是redux的某个替代品&#xff0c;其实并不是…

git rebase(变基)应用场景

文章目录 git rebase(变基)应用场景1.git rebase -i HEAD~3 git rebase(变基)应用场景 使得提交记录变得简洁 现在我们模拟我们有多次提交记录&#xff0c;本地仓库有三条提交 整合成一条提交记录 1.git rebase -i HEAD~3 提交记录合并 HEAD~3合并三条记录 执行之后 然后把…

.NET Standard 支持的 .NET Framework 和 .NET Core

.NET Standard 是针对多个 .NET 实现推出的一套正式的 .NET API 规范。 推出 .NET Standard 的背后动机是要提高 .NET 生态系统中的一致性。 .NET 5 及更高版本采用不同的方法来建立一致性&#xff0c;这种方法在大多数情况下都不需要 .NET Standard。 但如果要在 .NET Framewo…

SAP设置修改删除自动JOB

一、设置JOB 方法一 一个不需要单独记事务码的方式 如果FS要求开发做了程序的话&#xff0c;直接执行事务码&#xff0c;点击左上角 程序-后台执行 输出设备选择LP01 打勾&#xff0c;有可能还有一个对话框&#xff0c;也打勾 打勾后设置周期值 系统预设的会有小时、天、周…

创新性文生视频模型,南洋理工开源FreeInit

文本领域的ChatGPT&#xff0c;画图领域的Midjourney都展现出了大模型强大的一面&#xff0c;虽然视频领域有Gen-2这样的领导者&#xff0c;但现有的视频扩散模型在生成的效果中仍然存在时间一致性不足和不自然的动态效果。 南洋理工大学S实验室的研究人员发现&#xff0c;扩散…

Spring Cloud Gateway + Nacos 灰度发布

前言 本文将会使用 SpringCloud Gateway 网关组件配合 Nacos 实现灰度发布&#xff08;金丝雀发布&#xff09; 环境搭建 创建子模块服务提供者 provider&#xff0c;网关模块 gateway 父项目 pom.xml 配置 <?xml version"1.0" encoding"UTF-8"?…

【Spring实战】22 Spring Actuator 入门

文章目录 1. 定义2. 功能3. 依赖4. 配置5. 常用的应用场景1&#xff09;环境监控2&#xff09;运维管理3&#xff09;性能优化 结论 Spring Actuator 是 Spring 框架的一个模块&#xff0c;为开发人员提供了一套强大的监控和管理功能。本文将深入探讨 Spring Actuator 的定义、…