CSS之webkit内核中的属性text-stroke

让我为大家介绍一下text-stroke
大家是否想过要弄一个描边过的文字,接下来,text-stroke就可以为你解决
text-stroke是一个复合属性,里面有两个参数:描边的尺寸 描边的颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>div {text-align: center;font-size: 60px;height: 500px;line-height: 500px;-webkit-text-stroke: 1px red;color: transparent;}</style>
</head>
<body><div>text stroke</div>
</body>
</html>

text-stroke可以拆分为
text-stroke-color
text-stroke-width

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>div {text-align: center;font-size: 60px;height: 500px;line-height: 500px;-webkit-text-stroke-color: red;-webkit-text-stroke-width: 1px;color: transparent;}</style>
</head>
<body><div>text stroke</div>
</body>
</html>

在这里插入图片描述

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

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

相关文章

【服务端性能测试】性能测试策略如何做

一、需求收集 先需要确认本次测试目的是什么&#xff0c;然后再看我们需要用什么参数来判断这个目的是否能够达成。 1.1 业务性能指标参考&#xff1a; TPS、QPS、RT、请求成功率&#xff08;一般请求成功率>99.99%&#xff09; 1.2 硬件性能指标参考&#xff1a; 即服…

【React】前端项目引入阿里图标

【React】前端项目引入阿里图标 1、登录自己的iconfont-阿里巴巴矢量图标库&#xff0c;把需要的图标加入到自己的项目中去&#xff1b;2、加入并进入到项目中去选择Symbol点击复制代码3、安装ant-design/icons4. 新建一个MyIcon.js文件内容如下5、在项目中使用 1、登录自己的i…

【PyTorch实战演练】Fast R-CNN中的RoI(Region of Interest)池化详解

文章目录 0. 前言1. ROI池化的提出背景2. RoI池化的结构与工作原理3. RoI池化的作用及意义4. RoI使用示例 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&#xff0c;虽然参考了他人的宝贵见解及成果&#xff0c;但是内容可能存在不准确的地方…

【Java程序设计】【C00176】基于SSM的图书管理系统(论文+PPT)

基于SSM的图书管理系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的图书管理系统 本系统分为前台系统、后台管理员以及后台学员3个功能模块。 前台系统&#xff1a;当游客打开系统的网址后&#xff0c;首先看到的就…

Vim实战:使用 Vim实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

【Delphi】IDE 工具栏错乱恢复

由于经常会在4K和2K显示器上切换Delphi开发环境(IDE)&#xff0c;导致IDE工具栏错乱&#xff0c;咋样设置都无法恢复&#xff0c;后来看到红鱼儿的博客&#xff0c;说是通过操作注册表的方法&#xff0c;能解决&#xff0c;试了一下&#xff0c;果真好用&#xff0c;非常感谢分…

Unity之第一人称角色控制

目录 第一人称角色控制 &#x1f634;1、准备工作 &#x1f4fa;2、鼠标控制摄像机视角 &#x1f3ae;3、角色控制 &#x1f603;4.杂谈 第一人称角色控制 专栏Unity之动画和角色控制-CSDN博客的这一篇也有讲到角色控制器&#xff0c;是第三人称视角的&#xff0c;以小编…

Vue_Router_守卫

路由守卫&#xff1a;路由进行权限控制。 分为&#xff1a;全局守卫&#xff0c;独享守卫&#xff0c;组件内守卫。 全局守卫 //创建并暴露 路由器 const routernew Vrouter({mode:"hash"//"hash路径出现#但是兼容性强&#xff0c;history没有#兼容性差"…

Boosting semantic human matting with coarse annotations

前向推理在modelscope中开源了&#xff0c;但是训练没开源&#xff0c;且是基于TensorFlow的&#xff0c;复现起来是比较麻烦的。 1.Introduction 分割技术主要集中在像素级二元分类&#xff0c;抠图被建模为前景图像F和背景图像B的加权融合&#xff0c;大多数matte方法采用指…

【前端素材】bootstrap3 实现地产置业公司source网页设计

一、需求分析 地产置业公司的网页通常是该公司的官方网站&#xff0c;旨在向访问者提供相关信息和服务。这些网页通常具有以下功能&#xff1a; 公司介绍&#xff1a;网页通常包含有关公司背景、历史、核心价值观和使命等方面的信息。此部分帮助访问者了解公司的身份和目标。 …

音视频数字化(数字与模拟-录音机)

之前我们说了【数字与模拟-照相机】照相机的数字化,今天聊聊录音机。 说录音机之前,必须说说留声机。留声机是爱迪生1877年宣布发明成功的,研发过程相当复杂,但原理是简单的。 声音的本质是“波”,是物体振动产生的。以乐器为例,打击乐就是敲击(鼓、钹、木鱼、木琴、三…

Unity 设置鼠标

前言 本章主要对鼠标图标样式还有鼠标显隐进行设置 图标样式的设置 代码控制 有时候需要有改变鼠标样式的需求可以使用如下代码 Cursor.SetCursor(this.mouseTexture, Vector2.zero, CursorMode.Auto); 传入的要替换的图标偏移量允许您在支持的平台上使用硬件光标&#xff0…