圆滑描边 css,【CSS 学习】CSS 文本描边效果
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 文本描边效果相关推荐
- svg画css,CSS vs. SVG:图形文本的效果
这篇文章是探索有关于CSS和SVG技术的系列文章第一篇,通过例子来阐述CSS和SVG相关技术的比较.因为大家对SVG有一定的偏见,这个系列文章只是为了证明SVG解决Web上的某些设计问题.因为它是自然 ...
- 学html css之前,学习CSS前必知HTML基础
对于很多网页设计0基础的初学者而言,刚一接触css都会感觉云里雾里,不知怎样学习与理解.想当初小编也是这样,在什么基础都没有的前提下,直接看CSS.结果感觉好像在看天书一样.后来向大神请教之后才知道, ...
- CSS样式学习-CSS 背景
老规矩...www.java1234.com 初学者最适合去得地方! 背景色 这条规则把元素的背景设置为灰色: p {background-color: gray;} 如果您希望背景色从元素中的文本向 ...
- CSS部分学习(尚硅谷视频教程达姆老师)
CSS部分学习 css部分 day1 day2 day3 day4 day5 day6 day7 day8 css部分 day1 1.Cascading style sheets2.样式表的组成规则选 ...
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- CSS基础学习--6 CSS Text(文本)
一.文本颜色 color:red; 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...
- css学习_文本有关的样式属性、sublime快捷生成标签
1.css中color定义文本的颜色 写法:(最常用的是16进制的) 2.行间距 line-height 3.水平对齐方式 text-align left right center 4.首 ...
- 阿ken的HTML、CSS的学习笔记_文本样式属性(笔记三)
前段时间国庆中秋那会儿学校放八天假 几乎所有人都选择回家或者是出去玩儿 而我选择留在学校这边儿 找一个晚七到早七的兼职去警醒一下浑浑噩噩的自己 整栋宿舍楼就剩下我和我的一个舍友 虽不过十月深秋 却让人 ...
- 关于CSS的学习内容三
关于CSS的学习内容三 35.HTML5发展史 36.HTML5的浏览器兼容 37.HTML5语法 38.HTML新增语义化标签 39.Video和audio的应用 40.HTML5智能表单----- ...
最新文章
- 4 OC 中的内存分配以及内存对齐
- 60岁代码匠的几篇小作文,解决了大多数程序的迷茫(下)
- 搜狗CEO王小川:AI领域存在泡沫 但留下的是珍珠
- 编写java程序的常见问题_Java程序的编写与执行、Java新手常见的问题解决
- 从u盘设备启动arc-livecd
- 剑指offer47 不用加减乘除做加法
- WPF DatePicker 默认显示当前时间
- 红帽加速开放混合云创新,助力企业成功迈向开源应用时代
- java 测试排序_java排序的几种方法 - 善待自己的个人空间 - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...
- 自动定位失败_自动化测试01
- Python绘制KS曲线
- 智慧城市热度不减 产业资本进军智能汽车相关领域
- 高中信息技术:信息技术初步、计算机基础、office办公软件
- html5拾色器功能,html5 学习简单的拾色器
- Keil to STM32CubeIDE标准库移植
- Juniper Junos设置3层接口
- 【科技知识】世界量子计算发展史
- matlab print用法,使用Matlab:错误使用 mprint (line 231) Wrong # rnames in mprint,怎么解决...
- Swing入门级项目全程实录第7讲
- 浅谈示波器X-Y模式 示波器触发模式及使用
热门文章
- 寒风冷雨,东湖吹风记
- 阿里DNS 223.5.5.5 223.6.6.6挂了,无法使用了
- setTimeStamp()与setDate()区别 如何将java中Date存入mysql中的datetime中,字符串怎么转换为日期类型
- 六年级下册计算机教案人教版,人教版小学六年级信息技术教案
- 将matlab中数据保存为txt或dat格式
- Android ViewPager用法
- Centos Discuz!论坛系统
- 新生代农民工的露营装备清单
- Flask之SQLAlchemy
- C盘空间小,关闭休眠功能释放空间