CSS技巧总结 - 技术栈

效果相关

网站置灰

CSS滤镜 -webkit-filter

一行代码足以

css 复制代码

body{
  filter: grayscale(1);
}
//或者
html.gray-mode { 
    filter: grayscale(.95); 
    -webkit-filter: grayscale(.95); 
}

css 复制代码

blur 模糊-webkit-filter:blur(2px);

brightness 亮度-webkit-filter:brightness(25%);

contrast 对比度-webkit-filter: contrast(50%);

drop-shadow 阴影-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度-webkit-filter: opacity(50%);

grayscale 灰度-webkit-filter: grayscale(80%);

sepia 褐色-webkit-filter: sepia(100%);

invert 反色-webkit-filter: invert(100%);

hue-rotate 色相旋转-webkit-filter:hue-rotate(180deg);

saturate 饱和度-webkit-filter: saturate(1000%);

毛玻璃效果

CSS 中实现玻璃效果通常使用的是 backdrop-filter 属性。这个属性可以在元素背景和内容之间创建一个视觉效果，使背景模糊或以其他方式被处理，以便更好地突出元素的内容。

以下是一个简单的示例，演示如何在一个元素上应用玻璃效果：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glass Effect</title>
    <style>
      .content {
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.7);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        text-align: center;
      }
      .glass-effect {
        -webkit-backdrop-filter: blur(6.2px);
        backdrop-filter: blur(6.2px);
        background: rgba(255, 255, 255, 0.4);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.24);
      }
    </style>
  </head>
  <body>
    <div>
      <div class="content glass-effect">
        <h2>Glass Effect</h2>
        <p>
          This is a simple example of glass effect using CSS backdrop-filter
          property.
        </p>
      </div>
    </div>
  </body>
</html>

带背景的文字效果

background-clip: text 是一个 CSS 属性，用于控制背景的绘制方式，让背景只显示在文本内容的区域内。

当你将 background-clip 设置为 text 时，背景会被限制在文本的轮廓内部，而不是整个元素的边界框内。这样可以创建一种有趣的效果，将背景图像或颜色填充到文本内容的形状中，而不是元素的整个区域。实例:

html 复制代码

  <div class="clip">clip</div>

css 复制代码

.clip {
    border: 1px solid red;
    font-size: 200px;
    font-weight: 900;
    width: 400px;
    height: 300px;
    background: url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c905db2376f34a78be75b8f1a674d51c~tplv-k3u1fbpfcp-zoom-1.image)
      center center no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    color: transparent;
}

效果如下:

抖动效果

这个"摇晃"动画效果会在用户输入无效内容时晃动输入框。它简单而优雅。例如，如果用户在文本框中输入数字而不是字母，输入框将会摇晃。

css 复制代码

<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>
input:invalid{
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.4em red;
}
@keyframes shake {
  0% { margin-left: 0rem; }
  25% { margin-left: 0.5rem; }
  75% { margin-left: -0.5rem; }
  100% { margin-left: 0rem; }
}

自定义光标

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

css 复制代码

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

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

文本相关

文本溢出

文字单行溢出

css 复制代码

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行
word-wrap: break-word;       // 允许长单词换行
/* 或者 */
word-break: break-all;       // 允许任意位置换行

多行文字溢出

css 复制代码

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

全英文数字换行失效

使用 word-wrap 或者 word-break 属性：这两个属性用于控制文本在需要换行时的行为。可以尝试将其中一个属性应用于包含文本的元素，以确保文本在需要换行时能够正确地换行。

css 复制代码

cssCopy Code.example {
    word-wrap: break-word; /* 允许长单词换行 */
    /* 或者 */
    word-break: break-all; /* 允许任意位置换行 */
}

实现首字下沉

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

css 复制代码

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

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

文本是否能被选中

在样式开发中，有可被选中，和不可被用户选中的元素。这时候就用到了今天介绍的user-select属性。

user-select的属性值

属性值	说明
all	当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素
auto	文本将根据浏览器的默认属性进行选择
contain	选择该元素范围内的文本，只支持(Explorer未测试)
none	元素和子元素的文本将无法被选中
text	文本可以被选中
inherit	继承父元素的此属性
initial	设置为初始的样式属性
revert	样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按用户定义的设置否则，按照浏览器默认的的样式设置在否则，等价于unset
unset	如果该属性可以被继承，则是继承的值，不可以被继承(initial),则是默认的值

例如，如果你想要禁止用户选择某个元素中的文本内容，你可以这样设置：

css 复制代码

.element {
    user-select: none;
}

这会阻止用户选择和复制 .element 元素中的文本。这在一些特定情况下很有用，比如在拖放操作或可拖动元素上，你可能不希望用户选择文本。

需要注意的是，user-select 属性的兼容性并不是很好，不同浏览器支持程度不同。因此，在使用时应当谨慎考虑兼容性和用户体验。

文本强调效果

text-emphasis 用于为文本添加强调效果。它可以用来在文本上方或下方添加装饰性的标记，以突出显示特定的文本内容。这个属性主要用于美化文本，为其增加一些视觉上的效果。

text-emphasis 属性有以下几个可能的值：

none：默认值。不对文本应用任何强调效果。
accent：在文本上方或下方添加一个小的重点标记。
dot：在文本上方或下方添加一个小的圆点。
circle：在文本上方或下方添加一个小的空心圆。
double-circle：在文本上方或下方添加一个小的双层空心圆。
triangle：在文本上方或下方添加一个小的三角形。
sesame：在文本上方或下方添加一个小的芝麻形状。
filled：在文本上方或下方添加一个填充的矩形。

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

css 复制代码

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

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

如果你想在文本下方添加强调效果，可以结合使用 text-emphasis-position 属性。这个属性用于指定强调标记的位置，可以是在文本上方、下方，或者两者皆有。

以下是一个例子，演示了如何在文本下方添加一个小的圆点作为强调效果：

css 复制代码

.element {
    text-emphasis: dot;
    text-emphasis-position: under;
}

这将在 .element 元素的文本下方添加一个小的圆点作为强调效果。

将文本设为大写或小写

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

css 复制代码

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

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

文字描边效果

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

css 复制代码

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

效果如下：

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

渐变

普通渐变

渐变分为线性渐变、径向渐变，这里笔者直接记录的使用方式，也是为了使用的时候更加的直观，这里说下，在使用线性渐变的时候，使用角度以及百分比去控制渐变，会更加的灵活

使用方式:

css 复制代码

//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));

//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

边框渐变

border有个border-image的属性，类似background也有个background-image一样,通过为其设置渐变颜色后，实现的渐变，后面的数字4为x方向偏移量

使用方式:

css 复制代码

.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

CSS伪类

伪类三角形

首先来看下示例

html 复制代码

<!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>css-三角形</title>
  <style>
    .triangle {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}
  </style>
</head>
<body>
  <div class="triangle">
  </div>
</body>
</html>

如果想要一个下的三角形，可以让border的上边框可见，其他边框颜色都设置为透明

css 复制代码

.down-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

:where

:where() CSS 伪类函数接受选择器列表作为它的参数，，将会选择所有能被该选择器列表中任何一条规则选中的元素。

以下代码，文本都会变成 yellow 颜色

css 复制代码

:where(div p) span {
    color: yellow;
}

<div class="test-div">
    <span>哈哈</span>
</div>
<p class="test-p">
    <span>哈哈</span>
</p>

使用场景

其实 :where() 的功能本来就有，只不过有了它之后，实现起这些功能来就更加方便快捷~接下来就来讲讲它的组合/叠加功能

我们来看下面的这段 css 代码

css 复制代码

div a:hover,
li a:hover,
.cla a:hover,
.aa .bb a:hover,
[class^='bold'] a:hover{
  color: yellow;
}

我们可以使用 :where()来简化这个写法，使用它找出 div li .cla 这三种选择器，选择器可以是标签，也可以是类名，也可以是选择器表达式

css 复制代码

:where(div, li, .cla, .a .b, [class^='bold']) a:hover {
    color: yellow;
}

再来看看使用 :where() 的组合，完成一些功能，我们看以下的代码

css 复制代码

.dark-theme button,
.dark-theme a,
.light-theme button,
.light-theme a{
 color: pink;
}

我们完全可以使用 :where() 简化这个写法

css 复制代码

:where(.dark-theme, light-theme) :where(button, a) {
    color: pink;
}

优先级

:where()的优先级是 0，我们可以看下面代码

css 复制代码

.test {
    color: yellow;
}
:where(.test) {
    color: pink
}

最后字体颜色是 yellow

:is

:is()跟:where()可以说一模一样，区别就是 :is()的优先级不是0，而是由传入的选择器来决定的，拿刚刚的代码来举个例子

css 复制代码

div {
    color: yellow;
}
:where(.test) {
    color: pink
}

<div class="test">哈哈</div>

这要是 :where()，那么字体颜色会是 yellow，因为它的优先级是 0

但是如果是 :is()的话，字体颜色会是 pink，因为类选择器优先级比标签选择器优先级高~

css 复制代码

:is(.test) {
    color: pink
}
div {
    color: yellow;
}

<div class="test">哈哈</div>

:has

:has() 伪类是用于选择包含特定后代元素的父元素的一个选择器。它的语法如下：

css 复制代码

selector:has(selector-list)

其中，selector 是要选择的父元素的选择器，而 selector-list 是要包含在父元素内的后代元素的选择器列表。

然而，需要注意的是，:has() 伪类在 CSS 中并不是标准的选择器，目前仅有少数浏览器支持它，而且通常只在 JavaScript 库（如 jQuery）中使用。这是因为它的实现相对复杂，涉及到对文档结构进行递归查询，这在 CSS 选择器中并不常见。

例如，如果要选择所有包含至少一个 <span> 后代元素的 <div> 元素，可以使用如下的 CSS 选择器：

css 复制代码

div:has(span) {
    /* 样式 */
}

然而，因为目前大多数浏览器并不支持 :has() 伪类，你可能需要使用 JavaScript 来实现类似的功能。

现在又有两个场景

判断容器有没有子img，有的话字体设置为 12px（上面的例子是后代选择器，不是子选择器）
判断容器有没有一个小相邻的img，有的话设置字体颜色为 red

我们可以这么去实现：

css 复制代码

.container:has(>img) {
    font-size: 12px;
}

.container:has(+img) {
    color: red;
}

再来一个场景，当我 hover 到子img 上时，我想要让 container 的字体变粗，可以这么去使用~

css 复制代码

.container:has(>img:hover) {
    color: red;
}

自定义选定的文本样式::selection

在样式开发中，有可被选中，和不可被用户选中的元素。这时候就用到了今天介绍的user-select属性。可以通过样式自定义文本选择的颜色和样式，关键样式如下：

css 复制代码

::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

除了最后一个元素 :not

除了最后一个元素之外的所有元素都需要一些样式，使用 :not 选择器可以非常容易实现。

例如实现一个列表，最后一个元素不需要下划线，如下：

css 复制代码

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

参考文章

工作中学到三个CSS伪类，直接少些几百行CSS代码~

每个前端开发需要了解的15个强大的CSS属性

18个很有用的 CSS 技巧