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;,可以实现镂空文字

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【HarmonyOS开发】ArkUI-X 跨平台框架(使用ArkTs开发AndroidIOS)

ArkUI-X 跨平台框架进一步将 ArkUI 开发框架扩展到了多个OS平台&#xff0c;目前支持OpenHarmony、HarmonyOS、Android、 iOS&#xff0c;后续会逐步增加更多平台支持。开发者基于一套主代码&#xff0c;就可以构建支持多平台的精美、高性能应用。 一、跨平台框架有哪些? 1、…

CyberLink的视频编辑软件PowerDirector Ultimate 2024 22.0版本在win系统下载与安装配置

目录 前言一、PowerDirector Ultimate安装二、使用配置总结 前言 PowerDirector Ultimate是由CyberLink公司开发的一款视频编辑软件&#xff0c;其为高级版本&#xff0c;拥有多种强大的视频编辑和效果功能。该软件具有许多强大的功能和工具&#xff0c;包括多轨时间线编辑、视…

DevEco Studio集成ArkUI-X

DevEco StudioHarmonyOs教程 &#xff08;免费学&#xff09;&#xff1a; 最新HarmonyOS系列教程下载地址-IT营大地老师--更新中 ArkUI-X进一步将ArkUI扩展到了多个OS平台&#xff1a;目前支持OpenHarmony、HarmonyOS、Android、 iOS&#xff0c;后续会逐步增加更多平台支持。…

手写一个加盐加密算法(java实现)

目录 前言 什么是MD5&#xff1f;&#xff1f; 加盐算法 那别的人会不会跟你得到相同的UUID&#xff1f; 如何使用盐加密&#xff1f; 代码实现 前言 对于我们常见的登录的时候需要用到的组件&#xff0c;加密是一个必不可少的东西&#xff0c;如果我们往数据库存放用户…

怎么查询网络出口IP

怎么查询自己的网络的出口IP 背景 一般跟第三方服务进行接口数据交互的时候&#xff0c;对方都会让我们提供调用接口的网络的出口IP&#xff0c;对方会把该IP地址加到对方的白名单中。这样我们才能有权限进行接口的访问。 解决办法 下面介绍三种常用的查询网络出口IP的办法…

弧垂观测手段再升级!输电线路导线弧垂检测装置的应用_深圳鼎信

输电线路导线弧垂是指在输电线路中导线的水平位置与塔杆之间的垂直距离。导线的弧垂是确定导线张力、塔杆高度等参数的重要依据。通过测量弧垂及时调整弧垂大小对保证输电线路的安全运行具有重要作用。鼎信将介绍两种测量弧垂的方法&#xff0c;一起来学习一下吧&#xff01; …

设计模式篇章(2)——五种创建者模式

创建者模式主要思考如何创建一个对象&#xff0c;如何将对象的创建与使用分离。一般初级程序员都是new一个对象&#xff0c;然后紧接着使用这个对象&#xff0c;在某些场景中这样子是有问题的&#xff0c;需要使用创建者模式替代的&#xff08;例如使用单例模式&#xff09;。设…

第G2周:人脸图像生成(DCGAN)

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客\n&#x1f366; 参考文章&#xff1a;365天深度学习训练营\n&#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制]\n&#x1f680; 文章来源&#xff1a;[K同学的学习圈子](https://www.yuque.co…

Linux第1步_VMware软件安装

1、双击“VMware-workstation-full-15.5.0-14665864”&#xff0c;得到下面的界面&#xff1a; 2、等待几分钟&#xff0c;得到下面的界面&#xff1a; 3、点击“下一步” 4、勾选“我接受许可协议中的条款(A)”&#xff0c;见下图&#xff1a; 5、点击“下一步”&#xff0c;得…

爬取猫咪交易网

爬取猫咪品种&#xff0c;价格等在售数据 代码展现&#xff1a; 具体代码&#xff1a; import requests import re import os filename 声音// if not os.path.exists(filename): os.mkdir(filename) def down_load(page): for page in range(page): page …

Python3 元组----20240105

Python 的元组与列表类似,不同之处在于元组的元素不能修改。 元组使用小括号 ( ),列表使用方括号 [ ]。 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可。 >>> tup1 = (Google, Runoob, 1997, 2000) >>> tup2 = (1<

如何选择最适合的采购付款 (P2P) 解决方案?

无论企业的业务流程执行得如何&#xff0c;流程中始终存在改进空间。更好的管理系统是获得更好结果的关键&#xff0c;尤其是当企业处于增长阶段时。强大的采购到付款&#xff08;P2P&#xff09;系统是加快采购流程&#xff0c;同时保持采购支出可见性的最有效方法之一。 什么…

Mysql 分割字符串,一行变多行,@rownum,mysql.help_topic

1 前言 朋友最近遇到一个比较棘手的 sql 问题&#xff0c;让我帮忙看看&#xff1a; 他有两张表 testa 和 testb &#xff0c;一个表存的日期&#xff0c;另一个表存字符串例如 2023-11-01,2023-11-02&#xff0c;如何将这两张表关联起来&#xff0c;只查 testa 表的数据&#…

什么是负载均衡?什么情况下又会用到负载均衡

什么是负载均衡 在大型的网络应用中&#xff0c;使用多台服务器提供同一个服务是常有的事。平均分配每台服务器上的压力、将压力分散的方法就叫做负载均衡。 [利用 DNS来实现服务器流量的负载均衡&#xff0c;原理是“给网站访问者随机分配不同ip”] 什么情况下会用到负载均…

WAF的概念、分类和应用

WAF&#xff08;Web Application Firewall&#xff0c;Web应用防火墙&#xff09;是一种保护Web应用程序的安全工具&#xff0c;它可以监控、过滤和阻止Web应用程序和互联网之间的HTTP流量。WAF通常可以防御一些常见的Web攻击&#xff0c;如跨站请求伪造&#xff08;CSRF&#…

救命,现在当行政真的可以不用太老实

行政的姐妹在哪里啊&#xff1f;这个打工工具真的要知道哦&#xff01; 信我&#xff0c;真的好用啊&#xff01;终于不用自己写总结写材料的啊&#xff01; 这东西写啥都可以&#xff0c;只要输入需求马上就写好了啊&#xff0c;什么工作总结&#xff0c;活动策划方案&#…

Security的入门和流程分析

Security的入门和流程分析 问题&#xff1a;访问一个controller方法之前进行一个权限验证&#xff1f; 在controller里面的每一个handler无论什么访问都要进行一个校验&#xff0c;但是对于login logout 验证码这种Handler处理器是放行的 1.使用过滤器拦截器 注意两者区别 过滤…

2023中国PostgreSQL数据库生态大会-核心PPT资料下载

一、峰会简介 大会以“极速进化融合新生”为主题&#xff0c;探讨了PostgreSQL数据库生态的发展趋势和未来方向。 在大会主论坛上&#xff0c;专家们就PostgreSQL数据库的技术创新、应用实践和生态发展进行了深入交流。同时&#xff0c;大会还设置了技术创新&云原生论坛、…

计算机创新协会冬令营——暴力枚举题目05

这道题挺基础但是挺多坑的。(•́へ•́╬) 题目 204. 计数质数 - 力扣&#xff08;LeetCode&#xff09; 给定整数 n &#xff0c;返回 所有小于非负整数 n 的质数的数量 。 示例 示例 1&#xff1a; 输入&#xff1a;n 10 输出&#xff1a;4 解释&#xff1a;小于 10 的质…

手机与电脑投屏互联方案

手机 to 电脑 无线显示器 搜索"无线显示器"找到系统自带的应用 没有的话, 可能需要安装一下 电脑上打开无线显示器 手机中打开投屏 就投上去了, 感觉很卡, 不是很流畅,但是是系统自带的功能, 比较方便 无法连接时可以检查一下这里的设置 scrcpy screen copy 屏幕…