值得一试的 CSS 技巧

---

1. 利用border属性绘制三角形

在需要简单三角形的情况下，例如添加箭头指针到工具提示时，加载图像有点儿太过大费周章。

因为只使用CSS的border属性，我们就可以创建三角形。

这是一个惯用伎俩。理想情况下，我们可以在宽度和高度为0的元素上设置边框。所有边框颜色都是透明的，除了将形成箭头的颜色部分。例如，要创建指向上方的箭头，则底部边框是彩色的，而左边框和右边框是透明的。无需包含顶部边框。边框宽度决定了箭头的大小：

.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的背景。背景会在不干扰前景文本的情况下发生变化，如下图所示：

3. 居中元素

使用display: flex;以及display: grid;居中元素比较常见。还有一种在x轴居中元素的方法是使用text-align CSS属性。此属性开箱即用。若要在DOM中居中其他元素，子元素的display需要为inline，可以是inline-block或任何其他内联…

div.parent {
    text-align: center;
}

div.child {
    display: inline-block;
}

4. 药丸形状的按钮

我们可以通过设置按钮的边框半径值来制作药丸形按钮。其中，边框半径应大于按钮的高度。

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上。

地址：https://github.com/hane-smitter/react-loading-indicator

6. 简单的dark或light模式

只需几行CSS，我们即可在网站上启用dark/light模式。如下所示：

html {
    color-scheme: light dark;
}

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

然后设置变量来控制网站的背景颜色和文本颜色，并检查浏览器支持：

html {
    --bg-color: #ffffff;
    --txt-color: #000000;
}

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

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

下面是运行中的dark/light模式，模拟了用户在dark模式和light模式之间切换的效果。

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、right、bottom、left

使用定位元素时，很多时候我们会这样编写代码：

.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。这种简写方式与边距相同。

10.提供优化后的图像

在网速慢的时候访问高清图片网站的痛苦大家一定深有体会。

这里我们提供一种使用image-set的CSS补救技巧。

那就是为浏览器提供选项，让它来决定最适合用户设备的图像。例如：

.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>和<ol>之外的其他DOM元素。

12. 表单验证可视化提示

我们可以只使用CSS来向用户显示有关表单输入有效性的帮助可视化提示。在表单元素上使用:valid和:invalid CSS伪类，可在内容验证成功与否时应用合适的样式。

假设有以下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>

将用于显示验证结果。

下面的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的情况下实现了交互性。

13. 一键选择文本

此技巧侧重于改善网站用户的复制和粘贴体验。使用user-select: all即可一键启用文本选择。

此外，我们也可以使用user-select: none;禁用文本选择。禁用文本选择的另一种方法是将文本放在::before或::after CSS伪元素的content: '';属性中。

---

前端新世界