15个但是非常哇塞的css！你肯定不知道全部！

鲨鱼辣椒king
96 阅读4分钟

caret-color

文本插入位置的闪烁直线颜色

image.png

    <style>
      input {
        caret-color: red;
      }
    </style>
    <body>
    <input />
  </body>

accent-color

单选框和复选框的选中颜色

image.png

    <style>
      input {
        accent-color: red;
      }
    </style>
    <body>
     <input type="radio" />红色
  </body>

pointer-events

不相应鼠标事件，例如hover效果

image.png

    <style>
      .box {
        display: flex;
      }
      .child1 {
        width: 50px;
        height: 50px;
        background-color: aqua;
      }
      .child1:hover,
      .child2:hover {
        background-color: blue;
      }
      .child2 {
        width: 50px;
        height: 50px;
        background-color: aquamarine;
        pointer-events: none; /* 不响应鼠标事件 */
      }
    </style>
<div class="box">
      <div class="child1"></div>
      <div class="child2"></div>
</div>

user-select

决定元素内文本的可选择性

image.png

 <style>
      .noselect {
        user-select: none;
      }
    </style>
<span>可以选择</span>
<span class="noselect">不可以选择</span>

hyphens

在行尾断开长单词，提高文本的可读性

image.png

      .hyphens {
        width: 100px;
        hyphens: auto;
        background-color: #ccc;
      }

    <div class="hyphens">
        Why don't scientists trust atoms? Because they make up everything!
    </div>

quotes

自定义引号并添加在网页上引用的文本或者q元素的周围

image.png

      q {
        quotes: "》" "！";
      }
    <q >
        都看到这了，点个赞吧
    </q>

text-emphasis

用于强调文本块中的某些字符

image.png

      div {
      text-emphasis: "😀";
      }
    <div>
        都看到这了，点个赞吧
    </div>

backdrop-filter

允许对元素后面的内容应用效果，通常用于阴影，颜色

image.png

        body{
            background-image: url("https://img0.baidu.com/it/u=605794972,739579999&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500");
        }
      div {
       backdrop-filter:blur(100px) ;
      }

    <div>
        都看到这了，点个赞吧
    </div>

backface-visibility

可以让元素在3D空间中旋转时是否可见，如果背景不可见，浏览器不会渲染它，可以提高性能

可以看到我的代码中设置属性后鼠标放到红色块中时，方块旋转180度后相当于隐藏了

      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
      }
      #rotated-box {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: transform 2s;
        /* 默认情况下，背面可见 */
        backface-visibility: visible;
        /* 当鼠标悬停时，旋转元素并隐藏背面 */
        backface-visibility: hidden;
      }
      #rotated-box:hover {
        transform: rotateY(180deg);
      }
<div id="rotated-box"></div>

image.png

image.png

background-clip

裁剪方式，可以控制背景是否延伸到内容框的边缘，或者是否裁切到填充和边框区域

image.png

      .boxes {
        margin: 20px;
        padding: 20px;
        border: 5px solid #333;
        text-align: center;
      }
      .clip-text {
        color: white;
        font-size: 24px;
        margin: 0;
      }
      .background-clip {
        background-color: #007bff;
        background-image: linear-gradient(135deg, #7f5a83 0%, #0d324d 100%);
        background-clip: content-box;
      }
      .background-clip::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit;
        border: inherit;
        background-clip: padding-box;
        z-index: -1;
      }
      .background-clip-border {
        background-color: #28a745;
        background-image: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        background-clip: border-box;
      }
      .background-clip-text {
        color: #000;
        background-color: #ffc107;
        background-image: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        background-clip: text;
        -webkit-background-clip: text; /* 针对WebKit/Blink 浏览器 */
        color: transparent; /* 使文本颜色透明，以便看到背景 */
      }
    <div class="boxes background-clip">
      <div class="clip-text">Content Box</div>
    </div>
    <div class="boxes background-clip-border">
      <div class="clip-text">Border Box</div>
    </div>
    <div class="boxes background-clip-text">
      <div class="clip-text">Text</div>
    </div>

mix-blend-mode

mix-blend-mode 属性在 CSS 中用于定义一个元素如何将其颜色与背后的元素颜色混合。

下方可以看到两个蓝色块中的其中一个融合与背景了

image.png

      body,
      html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f7f7f7;
      }
      .container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 80%;
        max-width: 600px;
      }
      .box {
        width: 100px;
        height: 100px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
      }
      .blend-normal {
        background-color: blue;
        mix-blend-mode: normal; /* 标准混合模式 */
      }
      .blend-screen {
        background-color: blue;
        mix-blend-mode: screen; /* 屏幕混合模式 */
        position: relative;
      }
      .blend-screen::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: yellow;
        mix-blend-mode: multiply;
      }
    <div class="container">
      <div class="box blend-normal">Normal</div>
      <div class="box blend-screen">Screen</div>
    </div>

image-rendering

它可以告诉浏览器在缩放或者调整图像大小时使用哪种算法，对开发人员在放大或者缩小图像时保持质量特别有用

image.png

.image{
image-rendering: pixelated;
}

scroll-snap-type

属性用于定义滚动时元素的停靠点。当设置为 y mandatory 时，滚动将会强制在垂直方向的停靠点处停止。

image.png

      section {
        scroll-snap-type: y mandatory; /* 设置滚动停靠点为强制垂直停靠 */
      }

shape-outside

文本环绕HTML元素

      img {
        shape-outside: circle(50%);
      }

image.png

counter

使用 CSS 计数器（counters），你可以在列表项或特定的 HTML 元素前自动添加数字或其他计数标识。

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        counter-reset: section; /* 初始化计数器 */
      }
      h2 {
        counter-reset: subsection; /* 每个 h2 下的计数器 */
      }
      h2:before {
        counter-increment: subsection; /* 增加 subsection 计数器 */
        content: "Section " counter(subsection) ". "; /* 显示计数器 */
      }
      li:before {
        counter-increment: section; /* 增加 section 计数器 */
        content: counter(section) ". "; /* 显示计数器 */
      }
      ul {
        list-style-type: none; /* 移除默认的列表标记 */
        padding-left: 0;
      }
      li {
        margin-bottom: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Chapter 1: Introduction</h2>
    <ul>
      <li>Item 1 of Chapter 1</li>
      <li>Item 2 of Chapter 1</li>
      <li>Item 3 of Chapter 1</li>
    </ul>

    <h2>Chapter 2: Main Content</h2>
    <ul>
      <li>Item 1 of Chapter 2</li>
      <li>Item 2 of Chapter 2</li>
      <li>Item 3 of Chapter 2</li>
    </ul>
  </body>
</html>
avatar
文章
阅读
粉丝