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。