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. 4 OC 中的内存分配以及内存对齐
  2. 60岁代码匠的几篇小作文,解决了大多数程序的迷茫(下)
  3. 搜狗CEO王小川:AI领域存在泡沫 但留下的是珍珠
  4. 编写java程序的常见问题_Java程序的编写与执行、Java新手常见的问题解决
  5. 从u盘设备启动arc-livecd
  6. 剑指offer47 不用加减乘除做加法
  7. WPF DatePicker 默认显示当前时间
  8. 红帽加速开放混合云创新,助力企业成功迈向开源应用时代
  9. java 测试排序_java排序的几种方法 - 善待自己的个人空间 - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...
  10. 自动定位失败_自动化测试01
  11. Python绘制KS曲线
  12. 智慧城市热度不减 产业资本进军智能汽车相关领域
  13. 高中信息技术:信息技术初步、计算机基础、office办公软件
  14. html5拾色器功能,html5 学习简单的拾色器
  15. Keil to STM32CubeIDE标准库移植
  16. Juniper Junos设置3层接口
  17. 【科技知识】世界量子计算发展史
  18. matlab print用法,使用Matlab:错误使用 mprint (line 231) Wrong # rnames in mprint,怎么解决...
  19. Swing入门级项目全程实录第7讲
  20. 浅谈示波器X-Y模式 示波器触发模式及使用

热门文章

  1. 寒风冷雨,东湖吹风记
  2. 阿里DNS 223.5.5.5 223.6.6.6挂了,无法使用了
  3. setTimeStamp()与setDate()区别 如何将java中Date存入mysql中的datetime中,字符串怎么转换为日期类型
  4. 六年级下册计算机教案人教版,人教版小学六年级信息技术教案
  5. 将matlab中数据保存为txt或dat格式
  6. Android ViewPager用法
  7. Centos Discuz!论坛系统
  8. 新生代农民工的露营装备清单
  9. Flask之SQLAlchemy
  10. C盘空间小,关闭休眠功能释放空间