文字描边_如何在网页里实现文字描边效果

文字描边

想要在网页里实现文本描边效果,在以前只能使用Photoshop等来实现,但现在只需要一个text-stroke属性,即可轻松做到文本描边,渐变文本描边,甚至图片文本描边。

01

语法

text-stroke: 

text-stroke是一个复合属性,由text-stroke-width和text-stroke-color两个子属性组成,一般使用他的简写方法。

text-stroke-width:设置描边的宽度,可以为一般的长度值。

text-stroke-color:设置描边的颜色。

02

案例--文字描边

实现一个最简单的文字描边,只需要设置描边的宽度、描边的颜色即可

af74b7f83bba00fef42cc04232603f25.png71443ba64153264e23d37069e2f7c8cf.png

03

案例--渐变文字

在以往,要实现文字描边渐变效果,几乎只能用ps来实现,但现在只需要text-stroke配合text-fill-color(文本填充颜色)和背景渐变(linear-gradient)就可以了。

f7464380d10382c6b34e0867059689b8.png823de42a44d0f11f2bc0ac7c78d05c6e.png

04

案例--图片文字描边

只需要将背景图换成图片,还可以做出以图片为底的描边效果

004ff73741d7cd5238ac98c7e955679a.png319f1493ddfb6b1794eeb0cf07e4d56e.png

知识导图

3b79d23aefc082279a6fe5cd69bd3c1e.png

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

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

相关文章

javascript数据结构-栈

github博客地址 栈(stack)又名堆栈,它是一种运算受限的线性表。遵循后进先出原则,像垃圾桶似的。功能实现依然按照增删改查来进行,内部数据存储可以借用语言原生支持的数组。 栈类 function Stack(){this.data []; }添…

”二柱子“个人项目

”二柱子“个人项目 关于二柱子的个人项目,据说……是这么发生的…… 二柱子因为懒(,,• ₃ •,,),要给他上小学的儿子编写个能够出小学四则运算题目的程序。老师上课的时候又添加了条件: 1、打印至少30道题 2、除了整数之外,还要…

Eclipse中的集成Git插件删除线上远程分支

Eclipse 的忠实党,在使用Git 多人协作以分支的形式开发应用时分支合并到主干后往往再没什么用(我的做法是保留一两周再干掉),在此记录使用Eclipse的Git 插件来删除无用的分支。 操作步骤: 项目右键 — Team — Remote — Push — Next — Finesh 1,下拉框选择你要删除的远程分支…

从MongoDB GridFS流式传输文件

不久前,我在Twitter上发布了自己的最新作品,即从MongoDB GridFS传输文件进行下载(而不是将整个文件存储到内存中然后提供服务),这是我取得的一个小胜利。 我答应就此事写博客,但不幸的是,我的特…

Css Sprites 多张图片整合在一张图片上

CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数…

无需复杂插件即可从Eclipse启动和调试Tomcat

像Eclipse这样的现代IDE提供了各种插件来简化Web开发。 但是,我相信将Tomcat作为“常规” Java应用程序启动仍然可以提供最佳的调试体验。 大多数情况下,这是因为这些工具将Tomcat或任何其他servlet容器作为外部进程启动,然后在其上附加一个远…

flutter 国际化_Flutter 开发实战资源推荐

开工第一天,来点轻松的资源推荐。这是一篇实战类资源推荐,其实Flutter的入门资料官方已经做得很好了,如果你是零基础,还是建议先啃一遍官方的教程,然后再看以下实战资源,相信在你看官方课程中涉及到的一些疑…

JSF和“立即”属性–命令组件

JSF中的即时属性通常被误解。 如果您不相信我&#xff0c;请查看Stack Overflow 。 造成这种混乱的部分原因可能是输入&#xff08;即<h&#xff1a;inputText />&#xff09;和命令&#xff08;即<h&#xff1a;commandButton />&#xff09;组件都立即可用&#…

通过joystick遥感和按键控制机器人--11

原创博客&#xff1a;转载请表明出处&#xff1a;http://www.cnblogs.com/zxouxuewei/ 1.首先安装joystick遥控器驱动&#xff1a; sudo apt-get install ros-indigo-joystick-drivers ros-indigo-turtlebot-teleop 2.运行tulterbot机器人&#xff1a; roslaunch rbx1_bringup …

Nginx 实现网站 http、https 配置

在 nginx conf 目录下新建 ssl 目录&#xff0c;将申请的 ssl证书文件拷贝到此处&#xff1a; 修改 nginx 配置文件使支持 https&#xff0c;修改如下&#xff1a; server {listen 80;listen 443 ssl;ssl_certificate ssl/cert-xuexiyuan.cn.crt;ssl_certificat…

实用垃圾收集,第1部分–简介

这是我打算写的一系列博客文章的第一部分&#xff0c;其目的是解释垃圾回收在现实世界中的工作方式&#xff08;特别是在JVM中 &#xff09;。 我将介绍一些我认为对于充分理解垃圾收集对于实际目的是必要的理论&#xff0c;但是将其降至最低。 其动机是在各种情况下&#xff0…

mysql 导出 没有函数_没有MYSQL FILE函数的CSV导出

构建最佳CSV。你可以按照以下方式做。$filename data.csv;$csv_terminated "\n";$csv_separator ",";$csv_enclosed ";$csv_escaped "\\";$results array(1,2,3);// value$schema_insert ;$header array(a,b,c);// headerfor ($i 0…

html回复评论_3天内看了3000多篇《哈佛商业评论》,挑出来最有用的分享下

上次分享过一个工具&#xff1a;一键批量下载公众号历史消息&#xff08;后台回复001获取&#xff09;。我把《哈佛商业评论》的历史文章&#xff0c;全部爬了下来。该杂志被全球商业誉为“管理圣经”。我最感兴趣的一部分是&#xff1a;个人管理。先搜索关键词&#xff1a;&qu…

codeforces 732/D 二分

给出考试时间和考试需要准备的时间&#xff0c;问最早考完所有科目的时间 二分答案 NlogN 二分抄神犇的写法 感觉挺舒服的嘻嘻嘻 1 #include<bits/stdc.h>2 using namespace std;3 const int MAXN1e55;4 int N,M,d[MAXN],w[MAXN],cnt[MAXN];5 void read(int &x){6 …

网页版的svn怎样同步代码_学会使用Hdlbits网页版Verilog代码仿真验证平台

大家推荐一款网页版的 Verilog代码编辑仿真验证平台&#xff0c;这个平台是国外的一家开源FPGA学习网站&#xff0c;通过“https://hdlbits.01xz.net/wiki/Main_Page”地址链接进入网页&#xff0c;在该网页上可以进行Verilog代码的编写、综合&#xff0c;而且最后还能够仿真出…

Python的下载及安装

1、官网下载地址&#xff1a;https://www.python.org/downloads/ 2、python设置环境变量&#xff1a; 在系统变量里添加Python的安装位置 3、在cmd里输入python里即可转载于:https://www.cnblogs.com/fun0623/p/5257573.html

使用Apache ActiveMQ的JMS开发基础

去年是我尝试JMS的时候。 背后的想法和概念让我有些困惑&#xff0c;但是当我知道它的用途后&#xff0c;我很快就掌握了它。 在本文中&#xff0c;我将展示使用Apache ActiveMQ作为后端使用Java开发简单的生产者/消费者的基础。 让我们首先从概念开始&#xff0c;这是一个简单…

PLSQL 经常自动断开失去连接的解决过程

问题背景&#xff1a; 情况是这样的&#xff0c;很多开发同事的PLSQL上班时间开着8个小时&#xff0c;有时候他们出去抽烟后或者中午吃完饭&#xff0c;回来在PLSQL上面执行就报错无响应&#xff0c;然后卡住了半天动弹不了&#xff0c;非得重新登录plsql才生效&#xff0c;我猜…

使用Cobertura,JUnit,HSQLDB,JPA涵盖您的测试

你好&#xff01;你好吗&#xff1f; 今天让我们谈谈一个非常有用的工具&#xff0c;名为“ Cobertura”。 该框架与我们在另一篇文章中看到的Emma框架具有相同的功能。 Cobertura和Emma之间的主要区别在于Cobertura显示带有图形的简历页面。 如果要查看有关该主题的其他主题…

C# 基础知识总结

要学好C#&#xff0c;基础知识的重要性不言而喻&#xff0c;现将常用到的一些基础进行总结&#xff0c;总结如下&#xff1a; 01. 数据类型转换&#xff1a; 强制类型转换(Chart--> int): char crA; int i (int)(cr); 02. 委托/匿名函数/Lamda表达式&#xff1a; 委托是匿…