你不知道的10个 CSS 属性

半壳椰子
175 阅读9分钟

css-bg.jpg

前言

在当今的Web开发世界里，CSS不仅仅是构建网站的基础工具，更是塑造网站视觉效果和布局的艺术画笔。尽管CSS的基础属性为大多数开发者所熟知，但在这个领域中，仍然蕴藏着许多鲜为人知的精妙特性，它们正静待着有识之士的探索。

本文将为您揭开10个不为人熟知的CSS属性的神秘面纱。这些属性虽然鲜少进入开发者的视野，但它们对于提升网页设计的层次和效果具有不可小觑的作用。在JavaScript的光环下，CSS似乎逐渐被边缘化，但它的重要性从未减弱。让我们一起深入探索CSS的深层魅力，挖掘那些被忽视的宝藏，以赋予我们的网页设计以更加丰富和精致的生命力。

1.clip-path

是 CSS3 的属性，它能够在网页元素上定义裁剪区域，实现只展示元素的特定部分。这个属性支持多种形状，如矩形、圆形、多边形，甚至SVG路径，从而为网页设计提供了丰富的视觉效果和创意展示方式。

<div class="box">
  <img class="element" src="1.jpg" alt="">
</div>

.element {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

效果图：

polygon.png

2.mix-blend-mode

是一个 CSS 属性，它定义了一个元素的内容（通常是图像或文本）如何与其父元素的内容以及它自己的背景进行混合。这个属性可以创建多种视觉效果，使得元素能够通过不同的混合模式与背景发生交互，例如改变颜色、调整亮度或对比度等。通过这种方式，可以实现图像与背景色的有机结合或者创造出特殊的视觉效果，增强页面的视觉层次和艺术感。常用的混合模式包括 normal、multiply、screen、overlay 等，每种模式都有其独特的混合效果。

<div class="box">
  <img class="element" src="1.jpg" alt="">
</div>

.box {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  background: #FFBB00;
}
.element {
  width: 200px;
  /* mix-blend-mode: normal; // 正常 */
  mix-blend-mode: multiply; // 正片叠底
  /* mix-blend-mode: screen; 滤色 */
  /* mix-blend-mode: overlay; 叠加 */
}

效果图：

mix-blend-mode.gif

3.shape-outside

是一个强大的CSS属性，它使得文本能够沿着不规则形状的元素进行环绕布局。这一特性极大地丰富了页面设计的灵活性，为创意布局提供了更多的空间。通过这个属性，设计师可以打破传统的矩形框架限制，探索更多元和动态的文本排版效果。

<div class="box">
  <img class="element" src="1.jpg" alt="">
  <div>
    是一个强大的CSS属性，它使得文本能够沿着不规则形状的元素进行环绕布局，
    这一特性极大地丰富页面设计的灵活性，为创意布局提供了更多的空间。
    通过这个属性，设计师可以打破传统的矩形框架限制，
    探索更多元和动态的文本排版效果。是一个强大的CSS属性，
    它使得文本能够沿着不规则形状的元素进行环绕布局。
    这一特性极大地丰富了页面设计的灵活性，为创意布局提供了更多的空间。
    通过这个属性，设计师可以打破传统的矩形框架限制，
    探索更多元和动态的文本排版效果。是一个强大的CSS属性，
    它使得文本能够沿着不规则形状的元素进行环绕布局。这一特性极大地丰富了页面设计的灵活性，
    为创意布局提供了更多的空间。通过这个属性，设计师可以打破传统的矩形框架限制，
    探索更多元和动态的文本排版效果。
  </div>
</div>

.box {
  width: 600px;
  margin: 0 auto;
  text-align: justify;
}
.element {
  width: 400px;
  clip-path: circle(45% at 37% 50%);
  shape-outside: circle(35%); /* 半径为元素宽度 */
  float: left;
}

效果图：

shape-outside.png

4.backdrop-filter

该属性能够在元素后方区域添加图形效果，如模糊或色彩偏移，使得背景内容经过滤镜处理后展现出来，常用于打造类似磨砂玻璃的视觉效果，或对元素背景进行细腻的视觉美化。

<div class="box">
  <img src="1.jpg" alt="">
  <div class="element">
    是一个强大的CSS属性，它使得文本能够沿
  </div>
</div>

.box {
  width: 800px;
  padding-top: 50px;
  margin: 0 auto;
  position: relative;
}
.element {
    position: absolute;
    top: 50%;
    left: 50%;
    height:50px;
    line-height: 50px;
    backdrop-filter:blur(10px);
    transform:translate(-50%,-50%);
    padding:0 20px;
}

效果图：

backdrop-filter.jpg

5.scroll-behavior

该属性用于指定溢出元素的滚动方式，通过一条简单的声明，便能实现流畅的滚动效果。

<div class="element">
  <div id="top">
    <a href="#A">锚点A</a>
    <a href="#B">锚点B</a>
    <a href="#C">锚点C</a>
  </div>
  <div id="A">
    <a href="#B">锚点B</a>
    <a href="#C">锚点C</a>
  </div>
  <div id="B">
    <a href="#A">锚点A</a>
    <a href="#C">锚点C</a>
  </div>
  <div id="C">
    <a href="#A">锚点A</a>
    <a href="#B">锚点B</a>
  </div>
  <a class="scrollToTopBtn" href="#top" title="返回顶部">回到顶部☝️</a>
</div>

#A, #B, #C {
  height: 100vh;
}
a {
  color: #fff;
}
.element {
  scroll-behavior: smooth;
  height: 100%;
  overflow: auto;
}
#A {
  background:pink;
}
#B {
  background: blueviolet;
}

#C {
  background: gray;
}
#top {
  height: 100vh;
  background: plum;
}
.scrollToTopBtn {
  padding: 10px;
  background: #000;
  border-radius: 50px;
}

效果图：

scroll-behavior.gif

6.user-select

该属性用于控制页面上的文本是否可以被用户选择。这个属性主要影响到用户的交互体验，因为它可以定义哪些文本内容是可以被复制的，哪些是不可以被复制的。通过合理地应用这个属性，可以提升用户界面的可用性和设计的整体效果。

.element {
    user-select: none;
    /* user-select: all; */
    /* all：用户可以一次性选择元素内的所有文本，通常用于一些需要一键复制的场景。 */
}

效果图：

user-select.gif

7.mask-image

该属性在CSS中用于通过图像定义一个遮罩层，这个遮罩层能够控制元素内容的可见区域。通过这种方式，可以创造出独特的视觉效果，使得某些部分显示，而其他部分则被隐藏，从而实现更加丰富和吸引人的设计效果。

<div class="box">
  <img class="element" src="1.jpg" alt="">
  <svg viewBox="0 0 200 180">
    <defs>
      <mask id="mask">
        <path fill="white" d="M 20,60
        A 40,40 0,0,1 100,60
        A 40,40 0,0,1 180,60
        Q 180,120 100,180
        Q 20,120 20,60 z">
        </path>
      </mask>
    </defs>
  </svg>
</div>

.element {
    width: 100%;
    mask-image: url(#mask);
}

效果图：

mask-image.gif

8.column-count

该属性用于将网页上的内容分割成多个列。通过设置这个属性的值，可以指定元素内的内容应该分成多少列显示。

<div class="element">
  在当今的Web开发世界里，CSS不仅仅是构建网站的基础工具，
  更是塑造网站视觉效果和布局的艺术画笔。
  尽管CSS的基础属性为大多数开发者所熟知，
  但在这个领域中，仍然蕴藏着许多鲜为人知的精妙特性，
  它们正静待着有识之士的探索。本文将为您揭开10个不为
  人熟知的CSS属性的神秘面纱。这些属性虽然鲜少进入开发者的视野，
  但它们对于提升网页设计的层次和效果具有不可小觑的作用。
  在JavaScript的光环下，CSS似乎逐渐被边缘化，
  但它的重要性从未减弱。让我们一起深入探索CSS的深层魅力，
  挖掘那些被忽视的宝藏，以赋予我们的网页设计以更加丰富和精致的生命力。
</div>

.element {
  column-count: 3;
  column-gap: 50px;
  column-rule: 1px solid #eee;
}

效果图：

column-count.png

9.overscroll-behavior

该属性允许开发者精确控制页面元素在滚动至顶部或底部边界时的行为，从而定制更细致的滚动交互体验。

<div class="box">
  <div class="element">
    在当今的Web开发世界里，CSS不仅仅是构建网站的基础工具，
    更是塑造网站视觉效果和布局的艺术画笔。
    尽管CSS的基础属性为大多数开发者所熟知，
    但在这个领域中，仍然蕴藏着许多鲜为人知的精妙特性，
    它们正静待着有识之士的探索。本文将为您揭开10个不为
    人熟知的CSS属性的神秘面纱。这些属性虽然鲜少进入开发者的视野，
    但它们对于提升网页设计的层次和效果具有不可小觑的作用。
    在JavaScript的光环下，CSS似乎逐渐被边缘化，
    但它的重要性从未减弱。让我们一起深入探索CSS的深层魅力，
    挖掘那些被忽视的宝藏，以赋予我们的网页设计以更加丰富和精致的生命力。
    在当今的Web开发世界里，CSS不仅仅是构建网站的基础工具，
    更是塑造网站视觉效果和布局的艺术画笔。
    尽管CSS的基础属性为大多数开发者所熟知，
    但在这个领域中，仍然蕴藏着许多鲜为人知的精妙特性，
    它们正静待着有识之士的探索。本文将为您揭开10个不为
    人熟知的CSS属性的神秘面纱。这些属性虽然鲜少进入开发者的视野，
    但它们对于提升网页设计的层次和效果具有不可小觑的作用。
    在JavaScript的光环下，CSS似乎逐渐被边缘化，
    但它的重要性从未减弱。让我们一起深入探索CSS的深层魅力，
    挖掘那些被忽视的宝藏，以赋予我们的网页设计以更加丰富和精致的生命力。
  </div>
</div>

.box {
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
  height: 2000px;
  overflow: auto;
}
.element {
  height: 150px;
  padding: 10px;
  border: 1px solid blue;
  text-align: justify;
  overflow: auto;
  overscroll-behavior: contain;
}

效果图：

overscroll-behavior.gif

10.object-fit

该属性用于调整元素内容尺寸以适配容器，同时维持内容的原始纵横比，并管理内容的溢出方式。

<div class="box">
  <img class="element" src="1.jpg" alt="">
</div>

.element {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

效果图：

object-fit.gif

结论

通过掌握这些CSS属性，您将打开创意的大门，实现对网页设计的精细操控。

无论是追求视觉艺术的丰富性、提升用户体验的互动性，还是简化操作的直观性，这些不为人知的属性都能助您在Web开发的道路上更进一步。

愿您在编程的旅途中，不断探索、创新，享受每一次代码构建的乐趣。

avatar
文章
阅读
粉丝