当前位置：首页 > 技术博客 > CSS > CSS3金色阴影文字

CSS3金色阴影文字

4年前 (2021-10-06)CSS880

主要使用了 CSS3 的线性渐变属性、滤镜属性、变形属性等等。由于这些都是高级属性，所以不兼容 IE 10 及以下的版本。

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="utf-8" />    
<title>CSS金色阴影文字演示</title>    
<style>
* {
    box-sizing: border-box;
}
:root {
    --gold: #ffb338;
    --light-shadow: #77571d;
    --dark-shadow: #3e2904;
}
body {
    margin: 0;
}
.liuzhixi_cn{
    background: radial-gradient(#272727, #1b1b1b);
    display: grid;
    grid-template-areas: 'overlap';
    place-content: center;
    height: 100vh;
}
.liuzhixi_cn> div {
    background-clip: text;
    -webkit-background-clip: text;
    color: #363833;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
        '微软雅黑', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(3em, 18vw, 15rem);
    grid-area: overlap;
    letter-spacing: 1px;
    -webkit-text-stroke: 4px transparent;
}
div.bg {
    background-image: repeating-linear-gradient(
        105deg,
        var(--gold) 0%,
        var(--dark-shadow) 5%,
        var(--gold) 12%
    );
    color: transparent;
    filter: drop-shadow(5px 15px 15px black);
    transform: scaleY(1.05);
    transform-origin: top;
}
div.fg {
    background-image: repeating-linear-gradient(
        5deg,
        var(--gold) 0%,
        var(--light-shadow) 23%,
        var(--gold) 31%
    );
    color: #1e2127;
    transform: scale(1);
}
</style>
</head>    
<body>    
 
<div class="liuzhixi_cn">    
<div class="bg">liuzhixi.cn</div>    
<div class="fg">liuzhixi.cn</div>    
</div>      
</body>    
</html>