圆滑描边 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智能表单----- ...
最新文章
- 万字长文带你了解推荐系统全貌!
- 远程桌面不能用不能连接处理办法
- 桩位编号插件xzbh_饶平专业泵站基坑拉森钢板桩施工规范
- shell脚本循环执行一个linux命令,Linux中循环执行shell命令的方法
- V4L2驱动的移植与应用(二+三)【转】
- JMeter 如何把上一个请求的结果作为下一个请求的参数 —— 使用正则提取器
- 数据挖掘技术研究现状
- Java 流行的工作流引擎
- 向量与直线,梯度与法向量,切向量
- 【ZOJ2750】Idiomatic Phrases Game(最短路)
- c语言不用死等的延时函数,matlab延时函数怎么写
- 基于JAVA社区老人健康服务跟踪系统计算机毕业设计源码+数据库+lw文档+系统+部署
- 关于把秒换算成分钟和小时的c程序
- Linux常用命令速查手册——嘎嘎管用
- 【oracle11g,11】redo日志文件2 :日志恢复 (重点)
- 服务器信号有杂音怎么回事,直播有杂音是怎么回事?奉上原因及解决方法
- Swift UIImageView 相框
- 51单片机STC 89C52RC进阶 – 自制8x8点阵、点亮单颗LED、显示点阵汉字
- Ardunio开发实例-ISL29125 RGB彩色光传感器
- [程序人生]北大学生12年不回家,你怎么看?
热门文章
- ___73__OleDbDataAdapter读取Access数据__到DataSet中来
- leetcode 55 跳跃游戏
- [C语言]魔术师与3位数:在一种室内互动游戏中,魔术师要每位观众心里想一个3位数abc(a、b、c分别是百位、十位和个位数字),然后魔术师让观众心中记下acb、bac、bca、cab、cba五个数以及
- 某大型企业局域网安全解决方案
- Springboot中添加contextPath
- 凌云抒志 星海航帆 | 汇佳学校MYP社区设计展隆重举办
- MySQL中的distinct 用法
- Jquery 对div 先删除后恢复
- 关于人工智能造假的一点思考
- 网易游戏笔试题(1) 20171209