不为人知的 CSS 技巧

什么是 CSS？

级联样式表 (CSS) 是一种样式表语言，用于描述以 HTML 等标记语言编写的文档的样式。CSS 是万维网的主要技术之一，与 HTML 和 JavaScript 并驾齐驱。

CSS 旨在实现样式和内容的分离，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在样式特性的规范中提供更多的灵活性和控制，通过在单独的 .css 文件中指定相关的 CSS 使多个网页能够共享样式，并降低结构内容的复杂性和重复性。

1. 打字效果

您知道吗？其实您可以使用零 JavaScript 来创建打字效果。

点击显示代码👇

<!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>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        /*This part is important for centering*/
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .typing-demo {
        width: 22ch;
        animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        font-family: monospace;
        font-size: 2em;
      }

      @keyframes typing {
        from {
          width: 0;
        }
      }

      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="typing-demo">这是一个打字演示。</div>
    </div>
  </body>
</html>

2. 图片非透明区域添加投影

当您使用透明图像时，您可以使用 drop-shadow() 过滤器函数在图像内容上创建阴影，而不是使用 box-shadow 属性在元素的整个框后面创建矩形阴影：filter: drop-shadow(2px 4px 8px #585858);

屏幕截图 2021-06-27 163331.png

点击显示代码👇

<!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>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .mr-2 {
        margin-right: 2em;
      }

      .mb-1 {
        margin-bottom: 1em;
      }

      .text-center {
        text-align: center;
      }

      .box-shadow {
        box-shadow: 2px 4px 8px #585858;
      }

      .drop-shadow {
        filter: drop-shadow(2px 4px 8px #585858);
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="mr-2">
        <div class="mb-1 text-center">box-shadow</div>

        <img
          class="box-shadow"
          src="https://markodenic.com/man_working.png"
          alt="Image with box-shadow"
        />
      </div>

      <div>
        <div class="mb-1 text-center">drop-shadow</div>

        <img
          class="drop-shadow"
          src="https://markodenic.com/man_working.png"
          alt="Image with drop-shadow"
        />
      </div>
    </div>
  </body>
</html>

3. 平滑滚动

不需要 JavaScript 就可以实现平滑滚动，只需一行 CSS。

点击显示代码👇

/* 喜欢的同学一定要点赞、转发、收藏啊! */
<!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>Document</title>
    <style>
      html {
        scroll-behavior: smooth;
      }

      nav {
        position: fixed;
        left: calc(50vw - 115px);
        top: 0;
        width: 200px;
        text-align: center;
        padding: 15px;
        background: #fff;
        box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
      }

      nav .link {
        padding: 5px;
        color: white;
      }

      .section {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 5em;
        text-shadow: 0px 2px 0px #b2a98f, 0px 4px 3px rgba(0, 0, 0, 0.15),
          0px 8px 1px rgba(0, 0, 0, 0.1);
      }

      .bg-red {
        background: #de5448;
      }

      .bg-blue {
        background: #4267b2;
      }

      .bg-green {
        background: #4caf50;
      }
    </style>
  </head>
  <body>
    <nav>
      Scroll to:
      <a href="#sectionA" class="link bg-red">A</a>
      <a href="#sectionB" class="link bg-blue">B</a>
      <a href="#sectionC" class="link bg-green">C</a>
    </nav>

    <div class="wrapper">
      <div id="sectionA" class="section bg-red">A</div>
      <div id="sectionB" class="section bg-blue">B</div>
      <div id="sectionC" class="section bg-green">C</div>
    </div>
  </body>
</html>

4. 光标

您知道如何使用自己的图像，甚至是表情符号作为光标吗？

点击显示代码👇

/* 喜欢的同学一定要点赞、转发、收藏啊! */
<!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>Document</title>
    <style>
      .wrapper {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        background: #4776e6;
        background: -webkit-linear-gradient(to right, #4776e6, #8e54e9);
        background: linear-gradient(to right, #4776e6, #8e54e9);
        padding: 0 10px;
      }

      .tile {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #de5448;
        margin-right: 10px;
        color: #fff;
        font-size: 1.4em;
        text-align: center;
      }

      .tile--image-cursor {
        background-color: #1da1f2;
        cursor: url(https://picsum.photos/20/20), auto;
      }

      .tile--emoji-cursor {
        background-color: #4267b2;
        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"),
          auto;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="tile">Default</div>
      <div class="tile tile--image-cursor">Image Cursor</div>
      <div class="tile tile--emoji-cursor">Emoji Cursor</div>
    </div>
  </body>
</html>

5. 文本保留特定行数其余内容省略

您可以使用“-webkit-line-clamp”属性将文本截断为特定的行数。文本被夹住的点将显示一个省略号。

屏幕截图 2021-06-27 171440.png

点击显示代码👇

<!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>Document</title>
    <style>
      body {
        padding: 20px;
        font-family: "Open Sans", sans-serif;
      }

      .tile {
        background: linear-gradient(to right, #2b32b2, #1488cc);
        padding: 15px;
        margin-bottom: 15px;
        padding: 15px;
        width: 300px;
        color: #fff;
      }

      .line-clamp {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* Change this line if you want. In this case it trimmed the text to 3 lines. */
        overflow: hidden;
      }

      .line-clamp--four {
        -webkit-line-clamp: 4; /* Trimmed the second tile to four lines. */
      }
    </style>
  </head>
  <body>
    文本保留 3 行
    <div class="tile">
      <p class="line-clamp">
        可以使用 <code>-webkit-line-clamp</code> 属性截断文本到特定行数。屏幕 3
        行显示不完全，将显示省略号。喜欢的同学一定要点赞、转发、收藏啊 !
        喜欢的同学一定要点赞、转发、收藏啊 !
      </p>
    </div>

    文本保留 4 行
    <div class="tile">
      <p class="line-clamp line-clamp--four">
        可以使用 <code>-webkit-line-clamp</code> 属性截断文本到特定行数。屏幕 4
        行显示不完全，将显示省略号。喜欢的同学一定要点赞、转发、收藏啊 !
        喜欢的同学一定要点赞、转发、收藏啊 !
      </p>
    </div>

    文本全部显示
    <div class="tile">
      <p>
        可以使用 <code>-webkit-line-clamp</code> 属性截断文本到特定行数。屏幕 4
        行显示不完全，将显示省略号。喜欢的同学一定要点赞、转发、收藏啊 !
        喜欢的同学一定要点赞、转发、收藏啊 !
      </p>
    </div>
  </body>
</html>

6. `::selection` CSS 伪元素

::selection CSS 伪元素可以自定义控制鼠标选中部分内容的样式。

点击显示代码👇

<!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>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      p {
        font-size: 2rem;
        font-family: sans-serif;
      }

      .custom-highlighting::selection {
        background-color: #8e44ad;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div>
        <p>这是默认高亮显示。鼠标选中试试看。</p>
        <p class="custom-highlighting">这是自定义高亮显示。鼠标选中试试看。</p>
      </div>
    </div>
  </body>
</html>

7. 万物皆可伸缩

你知道任何元素调整大小，都可以像 <textarea> 一样吗？

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      div {
        border: 2px solid;
        padding: 10px 40px;
        width: 300px;
        /* 核心代码 */
        resize: both;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
    <div>调整属性指定一个元素是否由用户可调整大小的。</div>
  </body>
</html>

8. CSS 模态框

你可以使用 :target 伪类来创建零 JavaScript 的模态。

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        /* This part is important for centering the content */
        display: flex;
        align-items: center;
        justify-content: center;
        /* End center */
        background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
        background: linear-gradient(to right, #834d9b, #d04ed6);
      }

      .wrapper a {
        display: inline-block;
        text-decoration: none;
        padding: 15px;
        background-color: #fff;
        border-radius: 3px;
        text-transform: uppercase;
        color: #585858;
        font-family: "Roboto", sans-serif;
      }

      .modal {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(77, 77, 77, 0.7);
        transition: all 0.4s;
      }

      .modal:target {
        visibility: visible;
        opacity: 1;
      }

      .modal__content {
        border-radius: 4px;
        position: relative;
        width: 500px;
        max-width: 90%;
        background: #fff;
        padding: 1em 2em;
      }

      .modal__footer {
        text-align: right;
      }
      .modal__close {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #585858;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <a href="#demo-modal">打开模态框</a>
    </div>

    <div id="demo-modal" class="modal">
      <div class="modal__content">
        <h1>CSS 实现模态框</h1>
        <p>
          您可以使用 :target 伪类创建零 JavaScript 的模态框。赶紧一起玩一玩啊！
        </p>
        <div class="modal__footer">
          Made with <i class="fa fa-heart"></i>, by
          <a href="https://juejin.cn/user/958429872534056/posts" target="_blank"
            >@gyx_这个杀手不太冷静</a
          >
        </div>
        <a href="#" class="modal__close">&times;</a>
      </div>
    </div>
  </body>
</html>

9. 您可以创建自定义样式滚动条

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      .wrapper {
        height: 100vh;
        /*This part is important for centering*/
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .mr-1 {
        margin-right: 1em;
      }

      .tile {
        overflow: auto;
        display: inline-block;
        background-color: #ccc;
        height: 200px;
        width: 180px;
      }

      .tile--custom-scrollbar::-webkit-scrollbar {
        width: 12px;
        background-color: #eff1f5;
      }

      .tile--custom-scrollbar::-webkit-scrollbar-track {
        border-radius: 3px;
        background-color: transparent;
      }

      .tile--custom-scrollbar::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #515769;
        border: 2px solid #eff1f5;
      }

      .tile-content {
        padding: 20px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div>
        <div class="tile mr-1">
          <div class="tile-content">默认滚动条</div>
        </div>
        <div class="tile tile--custom-scrollbar">
          <div class="tile-content">自定义滚动条</div>
        </div>
      </div>
    </div>
  </body>
</html>

10. position: sticky 吸顶效果

您可以使用 2 行 CSS 实现导航栏吸顶效果。

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      .section {
        font-size: 1.4em;
        letter-spacing: 0.05em;
        line-height: 1.5em;
      }

      .section h2,
      .section h3 {
        text-align: center;
        margin: 0;
        font-weight: normal;
      }

      .section__header {
        position: sticky;
        top: 0;
        padding: 1em;
        color: #a99160;
        background: #171717;
      }

      .section__content {
        padding: 1em;
        display: flex;
        justify-content: center;
      }

      .section__content > div {
        max-width: 992px;
      }
    </style>
  </head>
  <body>
    <section class="section">
      <div class="section__header">
        <h2>第 1 章导航条</h2>
      </div>
      <div class="section__content">
        <div>
          <h3>第 1 章</h3>
          <p>
            元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest
            scrolling ancestor）和 containing block (最近块级祖先 nearest
            block-level ancestor)，包括 table-related 元素，基于 top, right,
            bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
          </p>
          <p>
            该值总是创建一个新的层叠上下文（stacking context）。注意，一个
            sticky
            元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
            overflow 是 hidden, scroll, auto, 或 overlay
            时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见
            Github issue on W3C CSSWG）。
          </p>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section__header">
        <h2>第 2 章导航条</h2>
      </div>
      <div class="section__content">
        <div>
          <h3>第 2 章</h3>
          <p>
            元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest
            scrolling ancestor）和 containing block (最近块级祖先 nearest
            block-level ancestor)，包括 table-related 元素，基于 top, right,
            bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
          </p>
          <p>
            该值总是创建一个新的层叠上下文（stacking context）。注意，一个
            sticky
            元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
            overflow 是 hidden, scroll, auto, 或 overlay
            时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见
            Github issue on W3C CSSWG）。
          </p>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section__header">
        <h2>第 3 章导航条</h2>
      </div>
      <div class="section__content">
        <div>
          <h3>第 3 章</h3>
          <p>
            元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest
            scrolling ancestor）和 containing block (最近块级祖先 nearest
            block-level ancestor)，包括 table-related 元素，基于 top, right,
            bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
          </p>
          <p>
            该值总是创建一个新的层叠上下文（stacking context）。注意，一个
            sticky
            元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
            overflow 是 hidden, scroll, auto, 或 overlay
            时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见
            Github issue on W3C CSSWG）。
          </p>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="section__header">
        <h2>第 4 章导航条</h2>
      </div>
      <div class="section__content">
        <div>
          <h3>第 4 章</h3>
          <p>
            元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest
            scrolling ancestor）和 containing block (最近块级祖先 nearest
            block-level ancestor)，包括 table-related 元素，基于 top, right,
            bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。
          </p>
          <p>
            该值总是创建一个新的层叠上下文（stacking context）。注意，一个
            sticky
            元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的
            overflow 是 hidden, scroll, auto, 或 overlay
            时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见
            Github issue on W3C CSSWG）。
          </p>
        </div>
      </div>
    </section>
  </body>
</html>

11. CSS 滚动捕捉优化滚动体验

您可以控制 scroll-snap-type 值来获取良好的滚动体验：

这个可能要亲自体验，滚动鼠标，才可以感受到效果！

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      .wrapper {
        height: 100vh;
        overflow: auto;
        scroll-snap-type: y mandatory;
      }

      .section {
        scroll-snap-align: center;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #de5448;
        color: #fff;
        font-size: 3em;
      }

      .bg-blue {
        background: #4267b2;
      }

      .bg-green {
        background: #4caf50;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="section">Content 1</div>
      <div class="section bg-blue">Content 2</div>
      <div class="section bg-green">Content 3</div>
      <div class="section">Content 4</div>
      <div class="section bg-blue">Content 5</div>
    </div>
  </body>
</html>

12. CSS 动态文字提示

使用 attr() CSS 函数创建动态的仅用 CSS 实现文字提示。

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      body {
        padding: 20px;
      }

      .tooltip {
        position: relative;
        border-bottom: 1px dotted black;
      }

      /* Tooltip box */
      .tooltip:before {
        content: attr(data-tooltip);
        position: absolute;
        width: 100px;
        background-color: #062b45;
        color: #fff;
        text-align: center;
        padding: 10px;
        line-height: 1.2;
        border-radius: 6px;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.6s;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        font-size: 0.75em;
        visibility: hidden;
      }

      /* Tooltip arrow */
      .tooltip:after {
        content: "";
        position: absolute;
        bottom: 75%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        opacity: 0;
        transition: opacity 0.6s;
        border-color: #062b45 transparent transparent transparent;
        visibility: hidden;
      }

      .tooltip:hover:before,
      .tooltip:hover:after {
        opacity: 1;
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <h1>HTML/CSS 文字提示</h1>
    <p>
      鼠标移入<span class="tooltip" data-tooltip="这是一个文字提示">这里</span
      >显示文字提示。
    </p>
    <p>
      你也可以移入<span class="tooltip" data-tooltip="这是另一个文字提示"
        >这里</span
      >显示另一个文字提示。
    </p>
  </body>
</html>

13. 输入框光标颜色

您可以更改文本输入框光标的颜色。

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      input {
        caret-color: red;
      }
    </style>
  </head>
  <body>
    <input type="text" />
  </body>
</html>

14. `::in-range` 和 `::out-of-range` 伪类

使用 ::in-range 和 ::out-of-range 伪类来设置当前值超出 min 和 max 属性指定的范围限制的输入的样式。

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      input:in-range {
        background-color: rgba(0, 255, 0, 0.25);
        border: 1px solid green;
      }

      input:out-of-range {
        background-color: rgba(255, 0, 0, 0.25);
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="one">输入 1 - 10 之间的一个数值</label>
      <input type="number" id="one" name="one" min="1" max="10" />
      <br />
      <label for="two">输入 1 - 10 之间的一个数值</label>
      <input type="number" id="two" name="two" min="1" max="10" />
    </form>
  </body>
</html>

15. 花里胡哨的文字

使用 background-clip 属性创建漂亮的标题。

屏幕截图 2021-06-27 214239.png

点击显示代码👇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <style>
      h1 {
        background: blue url("https://picsum.photos/id/1015/200/300");
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        margin-top: 20px;
        font-size: 120px;
      }

      @media (max-width: 600px) {
        h1 {
          font-size: 45px;
        }
      }
    </style>
  </head>
  <body>
    <h1>揭秘 CSS</h1>
  </body>
</html>

代码都可以复制到编辑器直接运行哦~ 😘

参考文章

CSS Tips

不为人知的 CSS 技巧

什么是 CSS？

1. 打字效果

2. 图片非透明区域添加投影

3. 平滑滚动

4. 光标

5. 文本保留特定行数其余内容省略

6. ::selection CSS 伪元素

7. 万物皆可伸缩

8. CSS 模态框

9. 您可以创建自定义样式滚动条

10. position: sticky 吸顶效果

11. CSS 滚动捕捉优化滚动体验

12. CSS 动态文字提示

13. 输入框光标颜色

14. ::in-range 和 ::out-of-range 伪类

15. 花里胡哨的文字

相关推荐

参考文章

6. `::selection` CSS 伪元素

14. `::in-range` 和 `::out-of-range` 伪类