css实现饼干形文字字母填充效果代码-html代码-BFW代码库

css实现饼干形文字字母填充效果代码

代码语言：html

代码描述：css实现饼干形文字字母填充效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");
        
        body {
          background-color: #333;
          height: 100vh;
          display: grid;
          justify-content: center;
          align-content: center;
        }
        
        h1 {
          font-family: "Rubik", sans-serif;
          font-size: 8em;
          line-height: 0.8em;
          display: inline; /* SAFARI */
          background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Lager_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF9933;%7D .st1%7Bfill:none;stroke:%23ED7300;stroke-width:2;stroke-miterlimit:10;%7D .st2%.........完整代码请登录后点击上方下载按钮下载查看