一个有趣的css背景效果

CSS
CSS
发布日期:   2022-10-13
更新日期:   2023-02-18
文章字数:   586
阅读时长:   3 分
阅读次数:  

一个背景镂空虚化的背景效果

镂空虚化背景效果1
镂空虚化背景效果2

演示代码

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>短文两篇</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .content {
      height: 200px;
      width: 500px;
      overflow-y: scroll;
      overflow-x: hidden;
      position: relative;
      border-bottom: 1px solid #dcdfe6;
    }

    .head {
      position: fixed;
      text-align: center;
      left: 0;
      top: 0;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      width: 500px;
      border-bottom: 1px solid #dcdfe6;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
      background-image: radial-gradient(transparent 1px, #fff 1px);
      background-size: 4px 4px;
      backdrop-filter: saturate(50%) blur(4px);
    }

    p {
      text-indent: 2em;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="head">
      《短文两篇》
    </div>
    <div>
      <div style="height: 50px;"></div>
      <h1>1.渔夫买马</h1>
      <p>
        二渔夫居海滨久矣，欲上岸而从商。既从商，需马也。然二人不知马之贵贱优劣，请于乡间布衣，布衣言“困马之黑屋三日，断水粮，肆出，泥水干草饲之。”言已毕，布衣急远矣。二渔夫依之，然两马待出，一马立食之，一不食，再困三日，仍不食，非净水精粮不食之。二惑。一言“前食者，乃能屈能伸，耐劳吃苦可活于困境，从商路途艰险，此乃好马也”。一言“非净水精粮不食着，血统贵也，有原则而守，忠烈之性，从商路途艰险，此乃好马也”问何马可为良驹也？问于伯乐，伯乐曰“马如人也”，遂止。今世，能抉之者难也。
      </p>
      <div style="height: 50px;"></div>
      <h1>2.10 of the most legendary rulers from ancient history</h1>
      <p>A lot of people can be rather dismissive of ancient history, even using the term to refer to past events so
        remote as to be irrelevant. Nothing could be further from the truth, as the events and decisions made in
        antiquity continue to influence us to this day. To explore this, we’ll look at 10 of the most legendary rulers
        of ancient history, what they did, and why their decisions still matter.</p>
      <p>For our purposes, “legendary” means “awesome” rather than “potentially not real.” A few kings and queens of old
        who may not have been real people, such as Gilgamesh, The Yellow Emperor, and the Queen of Sheba, are not
        included.</p>
      <p>Additionally, what passes for “ancient” varies based on what area you’re talking about, so while all of the
        people on our list are long dead, a few of them were on the scene much more recently than others.</p>
      <div style="height: 200px;"></div>
    </div>
  </div>
</body>

</html>
CSS
赏
  目录