CSS中的字体描边
兴趣使然,突然看见网上的一些带有描边的字体,觉得有点意思,便尝试去做了下
不是什么很厉害的技巧,当然也有参考张鑫旭大神写的文章
只能感叹,css的世界还很大,很广阔
直入主题:
对于文字的描边,一般都会想到-webkit-text-stroke去描边(抱歉我是百度的,我给大家丢脸了)
但是这样直接写的话,会出现一个问题就是描边的宽度,如果设置的稍大一点,你会发现字体原本的颜色就消失了
关于这点,张鑫旭写的一篇文章中有详细讲到
https://www.zhangxinxu.com/wordpress/2017/06/webkit-text-stroke-css-text-shadow/
原理就是这个描边是属于居中描边的:
什么意思?就是说这个描边是从字体的外边框,同时向外和向内描边的
像这样:
外描边还好,但是内描边就会覆盖掉原本文字的颜色,这样就会导致原本字体会被覆盖掉(当然视情况而定,如果刚好需要这样的效果当我没说)
所以对于这种情况就利用重叠描边
css代码如下:
.nickname {
text-align: center;
font-size: 0.587rem;
font-weight:;
color: #3c3c3c;
margin-top: 0.32rem;
position: relative;
z-index:;
}
.nickname::before {
content: '想要重叠的文字';
position: absolute;
z-index: -1;
-webkit-text-stroke: 0.15rem #fff;
}
原理就是将原文本设置定位,层级提高,然后利用伪元素进行描边,最后重合在一起
这样就相当于实现了 —— 外描边
效果大概长这样:
当作是个小技巧吧!
CSS中的字体描边的更多相关文章
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- cocosbuilder中使用字体描边时,字符重叠,间距过小问题
cocosbuilder中使用字体描边时,字符重叠,间距过小问题 cocos2d-x 3.7 v3.7解析cocosbuilder中描边字体的代码如下: void LabelTTFLoader::pa ...
- css中的字体样式及元素样式
css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- CSS 中的字体兼容写法:用CSS为英文和中文字体分别设置不同的字体
font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...
- 关于CSS中的字体尺寸设置 em rem
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- CSS中的字体属性和文本属性
1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...
- CSS 中用户自定义字体 @font-face
@font-face 允许网页中使用自定义的字体,这些自定义的字体被放置在服务器上,从而让网页摆脱对访问者计算机上字体环境的依赖. 简单的说,有了@font-face,只需将字体上传到服务器端,无论访 ...
- CSS中设置字体样式
<style type="text/css"> body{ font-family: SimHei,"微软雅黑",sans-serif; } < ...
随机推荐
- Linux系统的RAID磁盘阵列
RAID概念 磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构成的具有冗余能力的阵列”之意. 磁盘阵列是由很多价格较便宜的磁盘,以硬件( ...
- Java——对象的复制、克隆、序列化
原创作者: https://blog.csdn.net/lmb55/article/details/78277878对象克隆(复制)假如说你想复制一个简单变量.很简单: int apples = 5; ...
- 数组Array的API2
数组的方法 arr.push() arr.unshift() arr.pop() arr.shift() arr.slice() arr.splice() arr.join() arr.find() ...
- 彻底搞懂Scrapy的中间件(三)
在前面两篇文章介绍了下载器中间件的使用,这篇文章将会介绍爬虫中间件(Spider Middleware)的使用. 爬虫中间件 爬虫中间件的用法与下载器中间件非常相似,只是它们的作用对象不同.下载器中间 ...
- ubuntu安装后环境配置
首先实现能够连接外网,宿主机和虚拟机能ping通 进行smb的配置,能实现pytty的远程连接. 首先apt-get update 安装ssh apt-get install ssh 打开ssh服务 ...
- 查询最新记录的sql语句效率对比
在工作中,我们经常需要检索出最新条数据,能够实现该功能的sql语句很多,下面列举三个进行效率对比 本次实验的数据表中有55万条数据,以myql为例: 方式1: SELECT * FROM t_devi ...
- Python3 多线程、多进程
python中的线程是假线程,不同线程之间的切换是需要耗费资源的,因为需要存储线程的上下文,不断的切换就会耗费资源.. python多线程适合io操作密集型的任务(如socket server 网络并 ...
- 云栖大会day1 下午
下午参与的是创新创业专场 会议议程是 创新创业专场-2018阿里云创新中心年度盛典 13:30-14:10 阿里双创新征程 李中雨 阿里云创业孵化事业部总经理 14:10-14:40 人货场的渗透与重 ...
- faiss索引基于数量级和内存限制的选择
它是一个能使开发者快速搜索相似多媒体文件的算法库.而该领域一直是传统的搜索引擎的短板.借助Faiss,Facebook 在十亿级数据集上创建的最邻近搜索(nearest neighbor search ...
- 颜色空间的转换系列 (一) ——RGB2XYZ/LAB
http://www.wk78.com/forum.php?mod=forumdisplay&fid=2&page=1 文件在论坛. 然后需要解决一个问题: 我直接复制过来了,自己看吧 ...