CSS3实现文字描边的2种方法(小结)


Posted in HTML / CSS onFebruary 14, 2020

问题

最近遇到一个需求,需要实现文字的描边效果,如下图

CSS3实现文字描边的2种方法(小结)

解决方法一

首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke

 

该属性是一个复合属性,可以设置文字宽度和文字描边颜色

 

该属性使用很简单:text-stroke:1px#f00;(1px是文字宽度,#ff是文字描边颜色)

 

本以为该属性的兼容性会及时止住我微微上扬的嘴角,随后逐渐凝固

但出乎意料的是大多浏览器已经开始支持该属性,只需要加上前缀-webkit-即可

CSS3实现文字描边的2种方法(小结)

 

Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>text-stroke-文字描边</title>
        <style>
            .demo {
                color: mistyrose;
                text-align: center;
                font-family: Verdana;
                font-size: 30px;
                font-weight: bold;
            }
            .stroke {
                -webkit-text-stroke: 1px greenyellow;
            }
        </style>
    </head>
 
    <body>
        <div class="demo">
            <p>没有添加描边</p>
            <p class="stroke">添加了字体描边</p>
        </div>
    </body>
</html>

 

解决方法二(推荐)

偶然间发现一种即使不用text-stroke属性也能够实现文字描边的方法—— text-shadow

 并且text-shadow属性的兼容性更好,也不用加前缀-webkit-

CSS3实现文字描边的2种方法(小结)

 

Demo

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title>text-shadow-文字描边</title>
           <style>
                .demo {
                    text-align: center;
                     font-family: Verdana;
                     font-size: 30px;
                     font-weight: bold;
                     color: red;
                }
                
                .stroke {
                     text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
                }
           </style>
     </head>
     <body>
           <div class="demo">
                <p>没有添加描边</p>
                <p class="stroke">添加了字体描边</p>
           </div>
     </body>
</html>

css 模拟文字描边效果2

p{
   text-shadow:
   -1px -1px 0 #4f4d57,  
   1px -1px 0 #4f4d57,
   -1px 1px 0 #4f4d57,
   1px 1px 0 #4f4d57,
   0px 2px 2px rgba(0,0,0,0.6);
   font-size: 15px;         
   color: #f2f2f2;
   font-family:"微软雅黑";
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 #HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 #HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 #HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 #HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 #HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 #HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 #HTML / CSS
You might like
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php数组合并的二种方法
2014/03/21 PHP
php创建无限级树型菜单
2015/11/05 PHP
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python如何查看安装了的模块
2020/06/23 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python实现自动装机功能案例分析
2020/10/22 Python
python list的index()和find()的实现
2020/11/16 Python
python如何构建mock接口服务
2021/01/28 Python
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
母亲节感恩活动记录
2014/03/16 职场文书
操行评语大全
2014/04/30 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
欢迎词范文
2015/01/27 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Python包argparse模块常用方法
2021/06/04 Python
java版 简单三子棋游戏
2022/05/04 Java/Android