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的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 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
YII中assets的使用示例
2014/07/31 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
js实现随机点名
2021/01/19 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
中学语文教学反思
2016/02/16 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang