html文字加描边效果,【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);