作为前端开发者，这些CSS技巧你还不知道吗！！！

墨蓝 2024-03-17 14:35 108阅读 0赞

### 背景混合模式 ###

在CSS中可以使用 `background-blend-mode` 来实现元素背景的混合：

.box1{
        background-image:url('../public/img/bg/cloud.jpg');
        width:800px;
        height:500px;
        background-size:cover;
    }
    
    .box2{
        background-image: url("../public/img/bg/cloud.jpg");
        width:800px;
        height:500px;
        background-color:green;
        background-size:cover;
        background-blend-mode:overlay;
    }

实现的效果如下：

![8da79b3d14ff41b6b53542f25d41eae6.png][]

上面的图片是单纯的一张图片背景，下面的图片是背景图片和背景颜色混合而成的。`background-blend-mode` 属性就用于定义了背景层的混合模式（图片与颜色）。支持的背景混合模式：正常|乘法|屏幕|叠加|变暗|变亮|颜色减淡|饱和度|颜色|亮度；

### 图像填充文字效果 ###

要想实现图像填充文字效果，可以设置 `background-clip: text` 以使文字背景作为整个区域的背景，文字之外的区域将被裁掉。配合透明的文字颜色，就可以实现图像填充文字效果了：

h1 {
      background-image: url('./flower.jpg');
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-color: white;
    }

效果如下：

![0ffcf077386f4de28f9e9bdf9acaf694.png][]

注意，在使用此技术时可以指定一个背景颜色来作为后备值，以防图像因为某种原因而无法加载。

### 文字描边效果 ###

在 CSS 中可以使用 text-stroke 属性使文本更易读，它会向文本添加轮廓效果。

h1 {
     color: #fff;
     font-size: 80px;
      -webkit-text-stroke: 2px crimson;
      text-stroke: 2px crimson;
    }

效果如下：

![aa8606775ac34ec7b1e9b86adef93622.png][]

注意，`text-stroke` 属性值中有两部分，第一部分是文字描边的宽度，第二部分是文字描边的颜色。

### 将文本设为大写或小写 ###

大写或小写字母可以不必在 HTML中设置。可以在 CSS 中使用`text-transform`熟悉来强制任何文本为大写或小写。

/* 大写 */
    .upper {
      text-transform: uppercase;
    }
    
    /* 小写 */
    .lower {
      text-transform: lowercase;
    }

效果如下：

![dedc7218d2a10d10067cdb8bab343492.png][]

`text-transform` 属性专门用于控制文本的大小写，当值为`uppercase`时会将文本转为大写，当值为`capitalize`时会将文本转化为小写，当值为`capitalize`时会将每个单词以大写字母开头。

### 暂停/播放伪类 ###

使用 `:paused` 伪类可以为处于暂停状态的媒体元素设置样式，那自然就还有 `:playing` 伪类，它可以为处于播放状态的媒体元素设置样式。

video:paused {
      opacity: 0.6;
    }

效果如下：

![1baa1b88882591e168a4a074c3e37bca.gif][]

需要注意，目前仅 Safari 支持该伪类`:paused`：

![3baedf6df5154c44cb1467a57ac77915.png][]

###  ###

### 自定义光标 ###

我们可以通 CSS 中的`cursor`属性来自定义光标的样式，只需要指定自定义光标的图片路径即可：

body{  
       cursor: url("path-to-image.png"), auto;
    }

除此之外， `cursor`还内置了很多鼠标样式供我们选择：

![d1028f3893f02a4eb7ff26604be3613c.png][]

### 文本强调效果 ###

可以使用 `text-emphasis` 属性将强调标记应用于文本元素。可以指定包括表情符号在内的任何字符串作为强调标记。

h1 {
      text-emphasis: "⭐️";
    }

效果如下：

![65ff81b74ca84781ae07a554173d3ed5.png][]

注意，`text-emphasis` 是一个简写属性，用于在一个声明中设置 `text-emphasis-style` 和 `text-emphasis-color`。强调装饰符的字号是主文字内容字号的一半，例如假设文字是`20px`，则上方的强调字符的大小是`10px`。

### 更写书写方向 ###

通常我们常见的网页文字是从左向右布局的，在CSS中可以使用 `writing-mode` 属性来指定文本在网页上的布局方式，即水平或垂直。该属性有多个属性值：

*  `horizontal-tb`：水平方向自上而下的书写方式。即 left-right-top-bottom
 *  `vertical-rl`：垂直方向自右而左的书写方式。即 top-bottom-right-left
 *  `vertical-lr`：垂直方向内内容从上到下，水平方向从左到右
 *  `sideways-rl`：内容垂直方向从上到下排列
 *  `sideways-lr`：内容垂直方向从下到上排列

h1 {
      writing-mode: sideways-lr;
    }

效果如下：

![6a4ed8ced9dbb93ea0c76ea39f4a9331.png][]

### 悬停缩放效果 ###

.img-container {
       height: 250px;
       width: 250px;
       overflow: hidden;
    }
    
    .img-container img {
       height: 100%;
       width: 100%;
       object-fit: cover; 
       transition: transform 200m ease-in;
     }
    
     img:hover {
       transform: scale(1.2);
     }

效果如下：

![b66cdd03f87a4afbfed32fc1d6d2f8b3.gif][]

`transform` 属性应用于元素的2D或3D转换。这个属性允许将元素旋转，缩放，移动，倾斜等。当值为scale就可以实现元素的 2D 缩放转换。

### 裁剪各种形状 ###

可以使用 `clip-path` 属性来创建各种有趣的视觉效果，例如将元素剪裁成自定义形状，如三角形或六边形。

div {
      height: 150px;
      width: 150px;
      background-color: crimson;
    }

三角形如下：

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

![dd11118dbb445b31ead7ed3fca9f7ccb.png][]

六边形如下：

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

![6fd57254d57a9c5506ab1b6f9a7ad65a.png][]

可以使用 `clip-path` 在线工具在制作各种图形：https://bennettfeely.com/clippy/

![b8a7ed57fdf796ba197c6e550babf966.png][]

### 检测属性支持 ###

在 CSS 中可以使用 `@support` 规则来检测对 CSS 特性的支持：

@supports (accent-color: #74992e) {
      blockquote {
        color: crimson;
      }
    }

如果支持该属性将运行内容定义的样式。

### 可选项样式 ###

在 CSS 中可以使用 `:optional` 伪类来设置没有 `required` 属性的表单字段的样式，例如 `input`、`select` 和 `textarea`。

*:optional{
      background-color: green;
    }

### 实现首字下沉 ###

我们可以使用`::first-letter`来实现文本首字母的下沉：

p.texts:first-letter {
      font-size: 200%;
      color: #8A2BE2;
    }

`:first-letter`选择器用来指定元素第一个字母的样式，它仅适用于在块级元素中。效果如下：

![00bdcf685091c67d43c1fb823a8ec091.png][]

### 实现正方形 ###

我们可以通过CSS中的纵横比来实现一个正方形，这样只需要设置一个宽度即可：

.square {
      background: #8A2BE2;
      width: 25rem;
      aspect-ratio: 1/1;
    }

`aspect-ratio` 媒体属性可以用来测试视口的宽高比。当然上述例子比较简单，来看看MDN中给出的纵横比的示例：

/* 最小宽高比 */
    @media (min-aspect-ratio: 8/5) {
      div {
        background: #9af; /* blue */
      }
    }
    
    /* 最大宽高比 */
    @media (max-aspect-ratio: 3/2) {
      div {
        background: #9ff;  /* cyan */
      }
    }
    
    /* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
    @media (aspect-ratio: 1/1) {
      div {
        background: #f9a; /* red */
      }
    }

这里通过媒体查询在页面视口不同纵横比时，显示不同的背景颜色。

[8da79b3d14ff41b6b53542f25d41eae6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/0e583e05dc8c4614abee16394471c5b7.png
[0ffcf077386f4de28f9e9bdf9acaf694.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/a3490d544fa349a3a31feb91be774a3d.png
[aa8606775ac34ec7b1e9b86adef93622.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/6e08a315899c4824be84f4921c994ef8.png
[dedc7218d2a10d10067cdb8bab343492.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/0c000004612840f4bfc85266b2abfa71.png
[1baa1b88882591e168a4a074c3e37bca.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c3d68bb834f64fa99ee097d72e9111fc.png
[3baedf6df5154c44cb1467a57ac77915.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/0a01620b56ab4c2d8cef3945371ef3b8.png
[d1028f3893f02a4eb7ff26604be3613c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/5e35f2b36f4d44d5a5555c32bdf3e65d.png
[65ff81b74ca84781ae07a554173d3ed5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/5e7fd12c785e421d89259c9a4fa901b6.png
[6a4ed8ced9dbb93ea0c76ea39f4a9331.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/30294c1c9ac5455b826a5d6f1f459dce.png
[b66cdd03f87a4afbfed32fc1d6d2f8b3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c520e94e882b43d48fb4e97bab42b3a5.png
[dd11118dbb445b31ead7ed3fca9f7ccb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/36b63baa75824fb1b090e5dcad0a58d6.png
[6fd57254d57a9c5506ab1b6f9a7ad65a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/04196be0e5504919bf83bdc7aa454a62.png
[b8a7ed57fdf796ba197c6e550babf966.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/305f9442f4b945209b7f950eed3de329.png
[00bdcf685091c67d43c1fb823a8ec091.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/cd2c555003f54122babd11f28d92dcf9.png