div+css实现文字段落圆形遮罩效果代码-html代码-BFW代码库

div+css实现文字段落圆形遮罩效果代码

代码语言：html

代码描述：div+css实现文字段落圆形遮罩效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&display=swap');
:root{
    --color-all:#020617;
    --color-text:#fafafa;
}

body{
    background-color: var(--color-all);
    width: auto;
    height: 100vh;
    display: grid;
    grid-template: repeat(6, 1fr)/ 1fr 1fr 1fr;
}

.container{
    grid-area: 1/2/-1/3;
    display: grid;
    grid-template: repeat(6, 1fr)/ 1fr;
}

.sphere{
    font-family: 'Bruno Ace SC', cursive;
    color: var(--color-text);
    grid-area: 2/ 1/ 6 / 2;
    font-size: 1rem;
    border-radius: 100%;
    /* font-stretch: extra-expanded; */
    overflow: hidden;
}
</style>


  
  
</head>

<body >
  <div class="container">
        <div class="sphere">
Achieve
Adventure
Appreciation
Attitude
Believe
Build
Challenge
Achieve.........完整代码请登录后点击上方下载按钮下载查看