text-shadow 实现文本描边

h1{

text-shadow:

-.025em -.025em 0 #444,

.025em -.025em 0 #444,

-.025em .025em 0 #444,

.025em .025em 0 #444;

}

text-stroke 实现文本描边

text-stroke 是 ext-stroke-width 和 text-stroke-color 的两个属性简写写法

text-stroke:

text-stroke 属性常常与 text-fill-color (文本填充颜色) 一起使用

h1{

-webkit-text-fill-color:transparent;

-webkit-text-stroke:6px #f36;

}

实现渐变文本描边

h1{

background:-linear-gradient(-86deg, #EEF85B 5%, #7AEC8D 53%, #09E5C3 91%);

-webkit-background-clip:text;

-webkit-text-fill-color:#fff;

-webkit-text-stroke:6px transparent;

}

使用 SVG 实现描边

H_VK

.text{

fill:transparent;

stroke-width:90px;

stroke:#096;

}

SVG 动画描边

H_VK

.text {

fill: none;

stroke-width: 6;

stroke-linejoin: round;

stroke-dasharray: 70 330;

stroke-dashoffset: 0;

animation: stroke 6s infinite linear;

}

.text:nth-child(5n + 1) {

stroke: #F2385A;

animation-delay: -1.2s;

}

.text:nth-child(5n + 2) {

stroke: #F5A503;

animation-delay: -2.4s;

}

.text:nth-child(5n + 3) {

stroke: #E9F1DF;

animation-delay: -3.6s;

}

.text:nth-child(5n + 4) {

stroke: #56D9CD;

animation-delay: -4.8s;

}

.text:nth-child(5n + 5) {

stroke: #3AA1BF;

animation-delay: -6s;

}

@keyframes stroke {

100% {

stroke-dashoffset: -400;

}

}

/* Other styles */

html, body {

height: 100%;

}

body {

background: #212121;

background-size: .2em 100%;

font: 14.5em/1 Open Sans, Impact;

text-transform: uppercase;

margin: 0;

}

svg {

position: absolute;

width: 100%;

height: 100%;

}

实现 Canvas 实现描边

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d");

canvas.width = canvas.height = 800;

context.lineWidth = 6;

context.font = '8em/1 Bangers, sans-serif';

context.strokeStyle = '#f36';

context.strokeText("Hello H_VK",0, canvas.height / 2);

文章 GitHub 地址 :https://github.com/SilenceHVK/blog/issues/32 ,欢迎 Star。

圆滑描边 css,【CSS 学习】CSS 文本描边效果相关推荐

  1. svg画css,CSS vs. SVG:图形文本的效果

    这篇文章是探索有关于CSS和SVG技术的系列文章第一篇,通过例子来阐述CSS和SVG相关技术的比较.因为大家对SVG有一定的偏见,这个系列文章只是为了证明SVG解决Web上的某些设计问题.因为它是自然 ...

  2. 学html css之前,学习CSS前必知HTML基础

    对于很多网页设计0基础的初学者而言,刚一接触css都会感觉云里雾里,不知怎样学习与理解.想当初小编也是这样,在什么基础都没有的前提下,直接看CSS.结果感觉好像在看天书一样.后来向大神请教之后才知道, ...

  3. CSS样式学习-CSS 背景

    老规矩...www.java1234.com 初学者最适合去得地方! 背景色 这条规则把元素的背景设置为灰色: p {background-color: gray;} 如果您希望背景色从元素中的文本向 ...

  4. CSS部分学习(尚硅谷视频教程达姆老师)

    CSS部分学习 css部分 day1 day2 day3 day4 day5 day6 day7 day8 css部分 day1 1.Cascading style sheets2.样式表的组成规则选 ...

  5. 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...

  6. CSS基础学习--6 CSS Text(文本)

    一.文本颜色 color:red; 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...

  7. css学习_文本有关的样式属性、sublime快捷生成标签

    1.css中color定义文本的颜色 写法:(最常用的是16进制的) 2.行间距    line-height 3.水平对齐方式   text-align left right  center 4.首 ...

  8. 阿ken的HTML、CSS的学习笔记_文本样式属性(笔记三)

    前段时间国庆中秋那会儿学校放八天假 几乎所有人都选择回家或者是出去玩儿 而我选择留在学校这边儿 找一个晚七到早七的兼职去警醒一下浑浑噩噩的自己 整栋宿舍楼就剩下我和我的一个舍友 虽不过十月深秋 却让人 ...

  9. 关于CSS的学习内容三

    关于CSS的学习内容三 35.HTML5发展史 36.HTML5的浏览器兼容 37.HTML5语法 38.HTML新增语义化标签 39.Video和audio的应用 40.HTML5智能表单----- ...

最新文章

  1. 万字长文带你了解推荐系统全貌!
  2. 远程桌面不能用不能连接处理办法
  3. 桩位编号插件xzbh_饶平专业泵站基坑拉森钢板桩施工规范
  4. shell脚本循环执行一个linux命令,Linux中循环执行shell命令的方法
  5. V4L2驱动的移植与应用(二+三)【转】
  6. JMeter 如何把上一个请求的结果作为下一个请求的参数 —— 使用正则提取器
  7. 数据挖掘技术研究现状
  8. Java 流行的工作流引擎
  9. 向量与直线,梯度与法向量,切向量
  10. 【ZOJ2750】Idiomatic Phrases Game(最短路)
  11. c语言不用死等的延时函数,matlab延时函数怎么写
  12. 基于JAVA社区老人健康服务跟踪系统计算机毕业设计源码+数据库+lw文档+系统+部署
  13. 关于把秒换算成分钟和小时的c程序
  14. Linux常用命令速查手册——嘎嘎管用
  15. 【oracle11g,11】redo日志文件2 :日志恢复 (重点)
  16. 服务器信号有杂音怎么回事,直播有杂音是怎么回事?奉上原因及解决方法
  17. Swift UIImageView 相框
  18. 51单片机STC 89C52RC进阶 – 自制8x8点阵、点亮单颗LED、显示点阵汉字
  19. Ardunio开发实例-ISL29125 RGB彩色光传感器
  20. [程序人生]北大学生12年不回家,你怎么看?

热门文章

  1. ___73__OleDbDataAdapter读取Access数据__到DataSet中来
  2. leetcode 55 跳跃游戏
  3. [C语言]魔术师与3位数:在一种室内互动游戏中,魔术师要每位观众心里想一个3位数abc(a、b、c分别是百位、十位和个位数字),然后魔术师让观众心中记下acb、bac、bca、cab、cba五个数以及
  4. 某大型企业局域网安全解决方案
  5. Springboot中添加contextPath
  6. 凌云抒志 星海航帆 | 汇佳学校MYP社区设计展隆重举办
  7. MySQL中的distinct 用法
  8. Jquery 对div 先删除后恢复
  9. 关于人工智能造假的一点思考
  10. 网易游戏笔试题(1) 20171209