13 个让你肾上腺素飙升的 CSS 技巧

随着近年来 Web 的发展，CSS 的功能也日益强大。它巧妙地运用了那些早已存在或新近出现的技巧。或许这里分享的技巧能让你领略到一些你尚未探索过的 CSS 技巧。

让我们开始探索吧。

动图

1. 使用边框绘制三角形

   当您需要简单的三角形时（例如，向工具提示添加箭头指针时），加载图像可能会有些过度。

   仅使用 CSS，您就可以使用边框创建三角形。
   
   这是一个相当古老的技巧。理想情况下，在宽度和高度为零的元素上设置边框。除了构成箭头的颜色外，所有边框颜色都是透明的。例如，要创建一个向上的箭头，底部边框需要着色，而左右边框需要透明。无需包含顶部边框。边框宽度决定了箭头的大小：
   

   .upwards-arrow {
       width: 0;
       height: 0;
       border-left: 20px solid transparent;
       border-right: 20px solid transparent;
   
       border-bottom: 20px solid crimson;
   }
   

   这将创建一个向上的箭头，如下所示：

   

   如果创建心理图像比较困难，您可以查看这个可视化概念的代码笔。

2. 元素的交换背景

   z-index属性决定了元素如何堆叠在其他定位元素上。有时，你可能会将z-index子元素的属性设置为较低的位置，最终导致子元素隐藏在其父元素的背景之后。为了防止这种情况，你可以在父元素上创建一个新的堆叠上下文，以防止子元素位于其后面。创建堆叠上下文的一种方法是使用isolation: isolateCSS 样式声明。
   
   我们可以使用此堆叠上下文技术来创建可互换按钮背景的悬停效果。例如：
   

   button.join-now {
       cursor: pointer;
       border: none;
       outline: none;
       padding: 10px 15px;
   
       position: relative;
       background-color: #5dbea3;
       isolation: isolate; /* If ommitted, child pseudo element will be stacked behind */
   }
   
   button.join-now::before {
       content: "";
       position: absolute;
       background-color: #33b249;
       top: 0;
       left: 100%;
       right: 0;
       bottom: 0;
       transition: left 500ms ease-out;
   
       z-index: -1;
   }
   
   button.join-now:hover::before {
       left: 0;
   }
   

   上面的代码在鼠标悬停时切换了背景button。背景变化不会干扰前景上的文本，如下面的 gif 所示：

   动图

3. 使元素居中

   您可能已经知道如何使用display: flex;和 使元素居中display: grid;。另一种不太常用的使元素沿 x 轴居中的方法是使用text-alignCSS 属性。此属性在居中文本时开箱即用。为了使 DOM 中的其他元素也居中，子元素需要具有 的显示inline。它可以是inline-block或任何其他内联...
   

   div.parent {
       text-align: center;
   }
   
   div.child {
       display: inline-block;
   }
   

4. 药丸💊形状按钮

   你可以通过将按钮的 border-radius 设置为非常大的值来制作药丸形状的按钮。当然，border-radius 应该大于按钮的高度。
   

   button.btn {
       border-radius: 80px; /* value higher than height of the button */
       padding: 20px 30px;
       background-color: #fdd835;
       border: none;
       color: black;
       font-size: 20px;
   }
   

   结果：

   

   按钮的高度可能会随着设计的变化而增加。因此，你通常会发现设置border-radius一个非常高的值会很方便，这样无论按钮是否增长，你的 CSS 都能正常工作。

5. 轻松为您的网站添加漂亮的加载指示器

   对于开发人员来说，将精力转移到为网站创建漂亮的加载指示器上通常是一项无聊的任务。最好将精力集中在构建项目中其他值得关注的重要部分上。

   在您阅读的过程中，您很可能也会觉得这是一个令人烦恼的障碍。因此，我花时间为您解决了这个障碍，并准备了精心设计的加载指示器，打包成一个库，以便您在梦想项目中“即插即用” 。这是一个完整的库，您只需选择最吸引您的那个💖即可。只需查看这个库的简单用法，源代码可在Github上找到。别忘了留下一颗星⭐。

6. 轻松实现暗模式或亮模式

   只需几行 CSS 代码即可在您的网站上启用暗/亮模式。您只需让浏览器知道您的网站可以在系统暗/亮模式下正确显示：
   

   html {
       color-scheme: light dark;
   }
   

   注意： color-scheme除了 之外的任何 DOM 元素上都可以设置属性html。

   然后通过您的网站设置控制背景颜色和文本颜色的变量，通过检查浏览器支持使其更加可靠：
   

   html {
       --bg-color: #ffffff;
       --txt-color: #000000;
   }
   
   @supports (background-color: Canvas) and (color: CanvasText) {
       :root {
           --bg-color: Canvas;
           --txt-color: CanvasText;
       }
   }
   

   注意：如果您未background-color在元素上设置，它将继承浏览器定义的与深色/浅色主题相匹配的系统颜色。这些系统颜色在不同的浏览器之间可能有所不同。

   明确设置可以与提供与浏览器设置的默认颜色不同的颜色色调background-color结合使用。prefers-color-scheme

   以下是暗/亮模式的实际效果。在暗/亮模式之间模拟用户的偏好。

   动图

7. 使用省略号 ( ...)截断溢出的文本

   这个技巧已经存在一段时间了，它可以让你的长文本看起来更美观。但你可能还是没注意到。
   
   你只需要以下 CSS：
   

   p.intro {
       width: 300px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   

   只需执行以下规则：

   • 明确的宽度，因此剪辑的界限将永远达到。
   • 当长文本超出元素宽度时，浏览器会换行。因此，您需要防止这种情况发生white-space: nowrap;：
   • 溢出的内容应被剪辑：overflow: hidden;。
   • ...当文本即将被剪切时，用省略号（）填充字符串： text-overflow: ellipsis;。

   结果如下：

   

8. 将长文本截断为多行

   这与上面的技巧略有不同。这次，文本被截断，内容被限制在几行以内。
   

   p.intro {
       width: 300px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3; /* Truncate when no. of lines exceed 3 */
       overflow: hidden;
   }
   

   输出如下：

   

9. 不要再过度劳累写作了top，，，rightbottomleft

   当使用定位元素时，你经常会编写如下代码：
   

   .some-element {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
   }
   

   这可以使用inset属性来简化：
   

   .some-element {
       position: absolute;
       inset: 0;
   }
   

   top或者，如果、right和有不同的值bottom，left您可以按如下顺序分别设置它们：inset: -10px 0px -10px 0px。这种简写方式与 margin 相同。

10. 提供优化的图像

    尝试在浏览器的开发工具中限制网速，然后访问像unsplash这样由高清图片组成的网站。这样就能体会到网站访问者在网速较慢的地区访问高清内容的痛苦了。
    
    不过，你可以提供一些补救措施，尤其是使用image-setCSS 技巧。

    您可以为浏览器提供选项，让它决定最适合用户设备的图片。例如：
    

    .banner {
        background-image: url("elephant.png"),
        background-image: -webkit-image-set(
            url("elephant.webp") type("image/webp") 1x,
            url("elephantHD.webp") type("image/webp") 2x,
            url("elephant.png") type("image/png") 1x,
            url("elephantHD.png") type("image/png") 2x
        );
    }
    

    上述代码将设置元素的背景图像。
    
    如果-webkit-image-set支持，则背景图像将是经过优化的图像，即支持 MIME 类型且更适合用户设备分辨率的图像。
    
    例如：由于更高质量的图像与更大的尺寸成正比，因此，如果用户拥有高分辨率设备但网络状况不佳，浏览器将决定提供支持的低分辨率图像。因此，不让用户等待高清图像加载是合乎逻辑的。

    注意：浏览器认为最适合的图像将被下载

11. 计数器

    你不必纠结于浏览器如何渲染编号列表。你可以利用 实现自己的设计counters()。方法如下：
    

    ul {
        margin: 0;
        font-family: sans-serif;
    
        /* Define & Initialize Counter */
        counter-reset: list 0;
    }
    
    ul li {
        list-style: none;
    }
    
    ul li:before {
        padding: 5px;
        margin: 0 8px 5px 0px;
        display: inline-block;
        background: skyblue;
        border-radius: 50%;
        font-weight: 100;
        font-size: 0.75rem;
    
        /* Increment counter by 1 */
        counter-increment: list 1;
        /* Show incremented count padded with `.` */
        content: counter(list) ".";
    }
    

    输出如下：

    

    这适用于除<ul>和 之外的任何其他 DOM 元素<ol>。

12. 表单验证视觉提示

    仅使用 CSS，您就可以向用户显示有关表单输入有效性的视觉提示。我们可以在表单元素上使用:validCSS:invalid伪类，以便在其内容验证成功或失败时应用适当的样式。

    考虑以下 HTML 页面结构：
    

    <!-- Regex in pattern attribute means input can accept `firstName Lastname` (whitespace sepearated names) -->
    <!-- And invalidates any other symbols like `*` -->
    <input
        type="text"
        pattern="([a-zA-Z0-9]\s?)+"
        placeholder="Enter full name"
        required
    />
    <span></span>
    

    <span>将用于显示验证结果。

    下面的 CSS 根据验证结果设置输入样式：
    

    input + span {
        position: relative;
    }
    
    input + span::before {
        position: absolute;
        right: -20px;
        bottom: 0;
    }
    
    input:not(:placeholder-shown):invalid {
        border: 2px solid red;
    }
    
    input:not(:placeholder-shown):invalid + span::before {
        content: "✖";
        color: red;
    }
    
    input:not(:placeholder-shown):valid + span::before {
        content: "✓";
        color: green;
    }
    

    这样，我们就无需参考任何 JavaScript 代码就能实现交互了。完整的 Codepen 实现如下：

13. 单击即可选择文本

    此技巧旨在提升网站用户的复制粘贴体验。使用user-select: all，您可以一键轻松选择文本。该元素下方的所有文本节点均会被选中。

    另一方面，您可以使用 禁用文本选择user-select: none;。禁用文本选择的另一种方法是将文本放置在或CSS 伪元素content: '';的属性内。::before::after

感谢阅读。下篇文章再见。请在 Dev 上关注我，以便收到通知。

施密特跟随

开发人员・ Linux 狂热者・ 痴迷于技术・ 喝点咖啡 ☕ - https://ko-fi.com/smitter

也可以通过twitter与我联系。