2021 年需要掌握的 15 项高级 CSS 技术

CSS 用于描述 HTML 元素在网页上的呈现方式。CSS 不仅可以为 HTML 元素提供颜色、位置等属性，还可以创建动画并增强网页效果。开发人员和网页设计师对尝试高级 CSS 技术并为 CSS 的进步做出贡献充满热情。CSS 正变得越来越主流，现在为创建引人入胜且兼容浏览器的网站提供了许多机会。

本 CSS 高级技术教程将介绍一些高级 CSS 技巧和技术，帮助您在 2021 年掌握现代网页设计和网页开发技能。

让我们探索顶级高级 CSS 技巧和技术。

1. 背景重复

CSS 背景是最先进的 CSS 技术之一，但开发者却很少使用。使用多种背景技术尚未被所有开发者所熟知。

该background-repeat属性设置背景图像的重复方式。它与 background-image 属性一起使用。我们可以沿水平轴、垂直轴重复背景图像，或者完全不重复。

默认情况下，背景图像在垂直和水平方向上重复。

句法

background-repeat: value;

属性值

CSS 示例

body {
    background-image: url("images.png");
    background-repeat: repeat;
}

代码

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>background-repeat property</title>
    <link href="repeatCase.css" rel="stylesheet">
</head>
<body>
    <h2>background-repeat: repeat; </h2>
    <div id="repeat"></div>

    <h2>background-repeat: repeat-x;</h2>
    <div id="repeat-x"></div>

    <h2>background-repeat: repeat-y;</h2>
    <div id="repeat-y"></div>

    <h2>background-repeat: space;</h2>
    <div id="space"></div>

    <h2>background-repeat: round;</h2>
    <div id="round"></div>

    <h2>background-repeat: no-repeat;</h2>
    <div id="no-repeat"></div>

    <h2>background-repeat: initial;</h2>
    <div id=""></div>
</body>
</html>

让我们评估一下 background-repeat 属性在不同的桌面和移动浏览器上的浏览器兼容性。

2. 遮蔽

假设您想使用一张图片，但只想显示其中的某些部分。您可以使用mask-image属性来实现。CSS 蒙版是一种高级 CSS 技术，允许您定义应用于图片的蒙版形状。蒙版形状之外的所有内容都会被裁剪掉，其余部分则会显示出来。它的工作原理与 Photoshop 中的蒙版功能基本相同。

图像蒙版中 100% 黑色的任何内容都将完全显示，而 100% 透明的任何内容都将完全隐藏，而介于两者之间的任何内容都将被部分遮罩在图像中。

可以通过两种方式执行蒙版：使用渐变进行蒙版和使用图像进行蒙版。

CSS 示例 – 线性渐变遮罩

#masked{
-webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
mask-image: linear-gradient(to bottom, transparent 5%, black 75%); 
}

第一部分是图像的原始图像，第二部分是具有线性渐变的蒙版图像。

CSS 示例 – 径向渐变蒙版

#masked{
-webkit-mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
 }

在下图中，第一部分是原始图像，第二部分是带有径向渐变的蒙版图像。

CSS 示例 – 使用图像进行遮罩

#masked{
-webkit-mask-image: url(https://images.png);
mask-image: url(https://images.png);
}

在下面的示例中，背景图像用于掩盖所选相机切口形状中的图像。

让我们评估不同桌面和移动浏览器上 mask-image 属性的浏览器兼容性。

3. 悬停时放大

悬停缩放是一种高级 CSS 技术，可用于提升网页的吸引力。悬停缩放效果可用于画廊、产品销售等需要放大图片才能获得更佳浏览效果的场景。

CSStransform属性用于按照您选择的比例放大图像。

句法

transform: scale [transition-duration] [transition-timing-function] [transition-delay];

CSS 示例

img:hover {
   transform: scale(1.1);
}

在上面的例子中，图像在悬停时放大。

4. 滚动捕捉

CSS scroll-snap-type 是一种高级 CSS 技术，允许开发者创建控制良好的滚动体验。此属性可用于网页的图库部分。CSS 中的页面滚动是通过scroll-snap-type在容器元素上设置属性来控制的。scroll-snap-type 决定了滚动的方向，即 x 轴还是 y 轴。

句法

scroll-snap-type: [none | x | y] [mandatory | proximity];

强制意味着每当用户停止滚动时，浏览器都必须捕捉到一个捕捉点。接近度规则则不那么严格。它允许浏览器在合适的情况下捕捉到一个捕捉点。

CSS 示例

.y-scrolling {
     scroll-snap-type: y mandatory;
 }

上面的例子显示了沿 Y 轴的 scroll-snap-type 具有强制值。

代码

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Scroll-snap-type</title>
        <link href="snap.css" rel="stylesheet">
    </head>
   <style>
     .y-scrolling {
      scroll-snap-type: y mandatory;
    }
  </style>
    <body>
        <div class="box y-scrolling">
            <div>Eat</div>
            <div>Sleep</div>
            <div>Code</div>
            <div>Repeat</div>
          </div>
    </body>
</html>

让我们评估一下 scroll-snap-type 属性在不同的桌面和移动浏览器上的浏览器兼容性。

5. 外部形状

Shape-outside 是一种高级 CSS 技术，可让您更改其周围包裹的项目的形状，而不受矩形框的限制。

shape-outside属性允许调整内容的形状以适应图像。shape-outside 属性采用基本形状，并对项目应用形状函数。此属性仅适用于浮动元素。

句法

shape-outside: values;

CSS 示例

<section class="shape-outside">
  <div class="shape-outside__circle">
  </div>
  <h2>Shape Outside CSS Property</h2>
  <p>
  Morbi tincidunt lectus non feugiat tristique. In blandit ornare odio sit amet cursus. In mollis dictum mollis. Suspendisse sed sagittis sem. Morbi euismod ligula id purus ornare, id gravida augue vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu consectetur neque, a commodo arcu. Vivamus lorem ante, pulvinar eu cursus nec, congue ut tellus. Mauris sit amet risus auctor, dignissim ligula vel, commodo purus. Ut sapien nunc, dignissim eu diam quis, tempor scelerisque leo.
  </p>
</section>

body {
  display: flex;
}

.shape-outside {
  padding-right: 10px;
  width: 50%;
}

.shape-outside__circle {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color:     #DC143C;
  margin: 25px 25px 5px 0;
  float: left;
  shape-outside: circle();
}

让我们评估一下 shape-outside 属性在不同的桌面和移动浏览器上的浏览器兼容性。

6.可变字体

可变字体是最新的内置功能。它是一个单独的文件，包含用户查看设计所需的所有字体版本。虽然目前可用的可变字体列表并不多，但它正在不断壮大，而这正是我们在网页字体设计中的未来发展方向。

要实现可变字体，我们必须选择支持该功能的字体和已实现 font-variation-settings 属性的浏览器。

句法

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
      url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

代码

h1>variable<span>fonts</span></h1>
$green: #ff0080;
$purple: #6e1f58;
$pink: #ff8c00;
body {
    background: #23074d;
    overflow: hidden;
}
@font-face {
    font-family: "Gingham Variable";
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff2")
            format("woff2"),
        url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff")
            format("woff");
    font-weight: 300 700;
    font-stretch: 1% 150%;
}
h1 {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    margin: 0;
    width: 100%;
    font-size: 18vw;
    font-family: "Gingham Variable", BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-stretch: 150%;
    color: $pink;
    white-space: nowrap;
    text-align: center;
    transition: font-weight 250ms ease-out, font-stretch 250ms ease-out;
    text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple,
        1px 1px 0 $purple, 1px 0px 0px $green, 0px 1px 0px $green, 2px 1px 0px $green,
        1px 2px 0px $green, 3px 2px 0px $green, 2px 3px 0px $green, 4px 3px 0px $green,
        3px 4px 0px $green, 5px 4px 0px $green, 3px 5px 0px $purple,
        6px 5px 0px $purple, -1px 2px 0 black, 0 3px 0 $purple, 1px 4px 0 $purple,
        2px 5px 0px $purple, 2px -1px 0 $purple, 3px 0 0 $purple, 4px 1px 0 $purple,
        5px 2px 0px $purple, 6px 3px 0 $purple, 7px 4px 0 $purple;

    span {

        font-weight: 300;
        font-stretch: 1%;
        transition: all 250ms ease-out;
    }
    &:hover {   
        font-weight: 300;
        font-stretch: 1%;

        span {
            font-weight: 700;
            font-stretch: 150%;

        }
    }
}

让我们评估一下可变字体在不同桌面和移动浏览器上的浏览器兼容性。

7. 首字母

首字母是一种高级 CSS 技术，它选取段落的首字母并标明该字母所占的行数。它通常用于吸引印刷媒体、信息网站和新闻网站的注意力，因为这些网站的段落首字母通常比其余内容大得多或更高。

首字母 CSS 属性会自动调整创建风格化字体所需的行数和字体大小。

首字母属性使用以下值：

<number>：指该信件使用的行数，不接受负值。
正常：仅当您想重置该值（如果它可以从级联继承并且没有对首字母应用缩放效果）时才有用。
<integer>：确定预设字母大小时应下沉的行数。该值必须大于零，如果未指定该值，则复制大小值，并向下取整为最接近的正整数。

句法

initial-letter: normal | <number> | <integer>;

$body-fontsize: calc(80% + 0.35vw);
$cap-fallback: calc(1100% + 0.35vw);
.intro::first-letter {
    font-size: $cap-fallback;
    float: left;
    line-height: 1;
    margin-top: .2rem;
    margin-left: -.5rem;
    @supports (initial-letter: 7) or (-webkit-initial-letter: 7) {
        -webkit-initial-letter: 7;
        initial-letter: 7;      
        color: hsl(41, 68%, 51%);

        margin-left: unset;
    }
}
main,
header {
    margin: 0 auto;
    max-width: 68vw;
}

main {
    column-count: 2;
    column-gap: 3vw;
}

.excerpt {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.8;
    margin: 0 0 1.5rem;
}

h1 {
    font-size: 6.4rem;
    font-weight: 200;
    line-height: 1.1;
    margin: 0 0 .4rem;
    padding: 0;
}

p {
    margin: 0 0 1.5rem;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css?family=Martel:200,600" rel="stylesheet');

body {
    font-family: 'Martel', serif;       
    font-size: $body-fontsize;
    font-weight: 200;
    line-height: 2;
    margin: 2rem auto;
    padding: 2rem;

    &:before {
        background: linear-gradient(90deg, hsl(105, 0%, 100%) 0%, hsl(45, 100%, 70%) 35%, hsl(45, 100%, 70%) 65%, hsl(105, 0%, 100%) 100%);
        text-transform: none;
    }
}

让我们评估一下 initial-letter 属性在不同的桌面和移动浏览器上的浏览器兼容性。

8. 逻辑属性和值

逻辑属性和值是一种高级 CSS 技巧和技术，它引入了逻辑属性和值，有助于通过逻辑方向和维度映射来管理外观。逻辑属性和值使用诸如“块”和“内联”之类的术语来表达它们的流动方向。

逻辑属性和值规范标识了物理值在其逻辑关系中的映射。

行内维度沿着文本行定义，并以所使用的书写方式书写。因此，在任何英文文件中，叙述都是水平的。在阿拉伯语文档中，书写也是水平的，但从左到右。如果我们考虑一个日语文件，行内维度现在是垂直的，书写模式也是垂直的。

字块尺寸与字块在页面上的显示顺序有关。在英语和阿拉伯语中，字块是垂直排列的；而在任何垂直书写模式下，字块都是水平排列的。

句法

Block-size: values;
Inline-size: values;

代码

<div class="controls">
<select id="writingMode">
  <option value="horizontal-tb">horizontal-tb</option>
  <option value="vertical-lr">vertical-lr</option>
  <option value="vertical-rl">vertical-rl</option>
</select>
</div>

<div id="container">
<div class="box logical">
  The block-size is 100 pixels, and inline-size 200px.
</div>
<div class="box physical">
  The block height is 100 pixels,and width is  200px.
</div>
</div>
* { box-sizing: border-box; }

html {
  font: 1.2em Helvetica, sans-serif;
}

body {
  padding: 40px;
  background-color: #fff;
  color: rgb(108,91,123);
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}

#container {
  writing-mode: horizontal-tb;
}
.box {
  border: 5px solid rgb(108,91,123);
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

.logical {
  block-size: 100px;
  inline-size: 200px;
}
.physical {
  height: 100px;
  width: 200px;
}

让我们评估一下逻辑属性在不同的桌面和移动浏览器上的浏览器兼容性。

9. CSS子网格

CSS 子网格意味着，除了网格容器的直接子元素可以成为网格项之外，我们还可以在网格项上创建网格，并使其使用父元素的列和行路径。例如，这意味着您可以为页面创建一个多列网格，并使用它来排列嵌套在标记中的项目。

句法

.grid 
{
    display: grid; grid-template-columns: 1fr 2fr 1fr 2fr; } 
.item { grid-column: 2 / 5; display: grid; grid-template-columns: subgrid; 
}

在上面的 CSS 语法中，父元素设置为 display: grid，这意味着存在一个四列网格。带有 item 类的子项位于网格的第 2 列到第 5 列的位置，这意味着它占据了父网格的三个轨道。通过在子项上使用 subgrid 值代替 grid-template-columns 的轨道列表，我们告诉其网格使用父网格的轨道。因此，子项的任何子项都将使用父网格中定义的列轨道大小。

代码

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box g">G</div>
  </div>
</div>

body {
  margin: 40px;
}

    .wrapper {
        display: grid;
    grid-gap: 10px;
        grid-template-columns: repeat(4, 1fr ) ;
    grid-template-rows: repeat(3, auto);
        background-color: #fff;
        color: #444;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

    .box .box {
        background-color: #ccc;
        color: #444;
    }

    .a {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .b {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    .c {
        grid-column: 1 / 3;
        grid-row: 2 /4;
    }

    .d{
        grid-column: 3 / 5;
        grid-row: 2 /4;
        display: subgrid;
    }

    .e {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .f {
        grid-column: 1;
        grid-row: 2;
    }

    .g {
        grid-column: 2;
        grid-row: 2;
    }

让我们评估 CSS Subgrids 在不同的桌面和移动浏览器上的浏览器兼容性。

10. 响应式 CSS 网格

在进行响应式网页设计时，我们需要确保网格具有响应性。响应式 CSS 网格是一种高级 CSS 技巧和技术，它提供了多种创建可自定义网格的方式，不受设备限制。最可靠的是，CSS 网格可以处理相等或不相等的列大小。

代码

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr); 
  grid-auto-columns: calc((100vh - 3em) / 4);
  grid-auto-flow: column;
  grid-gap: 1em;
  height: 100vh;
}

.grid-item:nth-child(3n) {
  background-color: green;
}

.grid-item:nth-child(3n + 2) {
  background-color: yellow;
}

使 CSS 网格具备响应式布局后，您可以利用LT 浏览器测试 CSS 网格的响应能力，以确保其在各种视口中均能响应。使用 LT 浏览器，您可以在 50 多种预装设备（例如手机、平板电脑、台式机和笔记本电脑）上测试 CSS 网格的响应能力。

11. 使用 Flexbox 垂直对齐

在 CSS 中，用于垂直居中元素的技术非常少。这一直是许多开发者的痛点。使用 Flexbox 垂直对齐是一种高级 CSS 技巧和技术，开发者可以使用 align-items、align-self 和 justify-content 属性轻松地实现元素对齐。

代码

<div class="align-vertically">
  Demonstrating Vertically Align CSS Property!
</div>

.align-vertically {
  background:black;
  color: #eff542;
  display: flex;
  align-items: center;
  height: 200px;
}

让我们评估垂直对齐属性在不同的桌面和移动浏览器上的浏览器兼容性。

12. SVG

由于所有新浏览器都支持 SVG，并且可以跨所有分辨率缩放，因此建议不要将 PNG 图像合并到图标和徽标中。

SVG 的全称是“可缩放矢量图形”，是一种基于 XML 的 Web 矢量图形格式。SVG 支持除 IE9 及更早版本和旧版 Android 设备 (V3) 之外的所有浏览器。SVG 是一种高级 CSS 技巧和技术，相比 PNG 图像，它具有更高的分辨率、更快的速度和更佳的动画质量。

句法

.element
  background-image: url(/images/image.svg);
}

代码

<img src="https://cdn.lambdatest.com/assets_black_theme/images/logo.svg" alt="LambdaTest" width="400" height="112">

让我们评估一下 SVG 在不同的桌面和移动浏览器上的浏览器兼容性。

13. HTML/CSS 中的智能引号

智能引号是一种先进的 CSS 技术，它有助于现代网页设计，提高可读性并提供出色的用户体验。

代码

<q>Smart quotes is the new trend in 2021!</q>

q {
    quotes: "“" "”";
    font-size: 2rem;
}

你知道吗？DOM 范围表示 Document、DocumentFragment 或 Attr 中连续的内容范围。此接口用于操作两个位置之间的内容，指定位置的字符以及受操作影响的范围的长度。

14. 逗号分隔列表

逗号分隔列表是一种高级 CSS 技巧和技术，用于以项目符号格式表示数据，从而有助于以有组织的方式显示内容。如今，许多开发人员都在使用它。

下面的 CSS 代码将在无序列表的每个项目（最后一个项目除外）上添加逗号。可以使用来:not(:last-child)确保逗号不会应用于最后一个元素。

句法

ul > li:not(:last-child)::after 
{
 content: ",";
}

代码

<ul>
  <li>Lambda Test</li>
  <li>CSS Tricks</li>
  <li>in 2021</li>
</ul>

body{ 
  font-family: Nurito;
  font-size:22px;
}

ul > li:not(:last-child)::after {
  content: ",";
}

你知道吗？功能策略是一种控制功能和 API 访问权限的机制。此规范已弃用，并已被权限策略和文档策略取代。

15. 使用功能查询来测试浏览器支持情况

CSS 甚至创建了一种使用“功能查询”来测试浏览器对 CSS 功能的支持情况的方法。功能查询是一种高级 CSS 技巧和技术，其作用通常与媒体查询相同，但有一些不同之处，例如，它不会询问浏览器与用于访问网站的设备相关的信息。功能查询会询问浏览器是否支持特定的 CSS 功能。从而更容易地以更好、更强大的方式使用新功能。

让我们评估不同桌面和移动浏览器对 CSS 功能查询的浏览器兼容性。

LambdaTest使您能够通过执行跨浏览器兼容性测试在桌面和移动设备上无缝地检查跨浏览器的 CSS。

在下面的屏幕截图中，我们将在 Netlify 平台上实现不同的 CSS 属性，并尝试在不同的浏览器上访问它们。

Google Chrome（不兼容）

Firefox（兼容）

总结！

这就是我们 CSS 高级技巧教程的总结。体验 CSS 并学习新的高级技巧和技术真是太棒了，我希望这些高级 CSS 技巧和技术能够帮助你创建令人惊叹的网站。如果你喜欢这些技巧或想与他人分享，欢迎在下面的评论区与我们分享。

文章来源：https://dev.to/nimritee12/15-advanced-css-techniques-to-master-in-2021-1g9d