css3实现的彩色渐变描边文字效果
作者:admin 时间:2021-8-6 10:55:27 浏览:前面曾介绍过不少有关纯CSS实现文字样式的文章，如CSS实现文字颜色渐变效果。本文继续介绍一个有点酷的彩色渐变描边文字效果，仍然是用纯CSS来实现。
css实现的彩色渐变描边文字
CSS文字样式属性其实没有很多，但要用这些属性去设计漂亮的字体样式，需要细心琢磨，灵活运用这些CSS属性。
虽然同样是文章描边效果，但跟前面那些文章介绍的案例相比，代码却有所不同，这代表设计思路的不同。
我们先来看看完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Gradient Stroke</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
--color-background: #000119;
--stroke-width: calc(1em / 16);
--font-size: 20vmin;
--font-weight: 700;
--letter-spacing: calc(1em / 8);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #000119;
background-color: var(--color-background);
display: grid;
font-family: Poppins, sans-serif;
margin: 0;
min-height: 100vh;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-items: center;
place-items: center;
padding: 5vmin;
}
h1 {
-webkit-background-clip: text;
background-clip: text;
background-image: -webkit-gradient(linear, left top, right top, from(#09f1b8), color-stop(#00a2ff), color-stop(#ff00d2), to(#fed90f));
background-image: -o-linear-gradient(left, #09f1b8, #00a2ff, #ff00d2, #fed90f);
background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
color: #000119;
color: var(--color-background);
font-size: 20vmin;
font-size: var(--font-size);
font-weight: 700;
font-weight: var(--font-weight);
letter-spacing: calc(1em / 8);
letter-spacing: var(--letter-spacing);
padding: calc(--stroke-width / 2);
-webkit-text-stroke-color: transparent;
-webkit-text-stroke-width: calc(1em / 16);
-webkit-text-stroke-width: var(--stroke-width);
}
</style>
</head>
<body>
<h1>Stroke</h1>
</body>
</html>
其实关键代码只有一段，就是 h1 。这里面用了很多CSS3属性，如background-clip，linear-gradient等，用的属性比较多，也比较细，把这些属性放在一起，共同构造出想要的文字效果。
我们看到CSS代码开头用了 :root ，这里简单说一说。
:root 这个 CSS 伪类匹配文档树的根元素。
对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
在声明全局 CSS 变量时 :root 会很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}设置 HTML 文档的背景色：
:root
{
background:#ff0000;
}
我们还注意到，:root 的 --font-size 属性值，用的是 20vmin 。还有 body 的 min-height 属性值，用的是 100vh 。这些单位是不是看起来比较陌生？我们可以看看这篇文章了解一下CSS单位PX、EM、REM、%、VW 和 VH 有什么区别。
css的var()函数
h1 样式里，看到一个比较新颖的写法，font-size: var(--font-size); ，这是什么意思？我们就得了解一下css的var()函数了。
随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。
使用方法
通过-- + 字段名：值（这个值可以是任何我们在css输入的值）进行定义类似的js的定义，调用时候通过var()函数进行对应的调用，如下面代码一样var(--字段名)进行调用。
body {
--size: 20px;
font-size: var(--size); // 20px
padding:var(--size); // 20px
}如上面代码一样通过定义--size为20px，然后font-size和padding同时通过var()函数进行复用，同时将font-size和padding设置为20px。当然如果不一定是20px，也是可以通过计算进行对应的如calc(var(--size) * 2)，这样的话就相当于变成40px。但是这样写也是会有一点不好的就是，类似js的块级元素，在body{}里定义的的--size是无法在其他样式类名中进行调用的。
.test{
--size: 20px;
font-size: var(--size); // 20px
padding:calc(var(--size) * 2) // 40rpx
}
.test2{
font-size: var(--size); // 无法识别
}我们在使用var的时候会发现，在样式中定义的字段只能在某个样式中使用。
通过在:root定义的字段，就相当于css中的全局变量，可以在css中任意的样式中进行使用。
:root{
--size:20px;
}
.test{
font-size: var(--size); // 20px
}
.test2{
font-size: var(--size); // 20px
}
- 站长推荐
