【前端入门】CSS中有许多不太为人知但非常有用的属性和技巧

CSS可以在特定场景下发挥独特的效果。但是这些属性却经常被遗忘。

下面简单介绍20个这样的CSS样式示例，包括它们的用途和代码示例。

1. all 属性

重置所有元素的样式。

.reset {
    all: unset;
}

2. resize 属性

控制文本区域或任何块级元素的可调整大小行为。

textarea { resize: both; /* 可以在两个方向上调整大小 */ }

3. will-change 属性

提醒浏览器优化指定元素的变化。

.animate { will-change: transform, opacity; }

4. clip-path 属性

创建剪裁路径来隐藏部分元素。

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

5. shape-outside 属性

定义浮动元素周围文本环绕的形状。

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

6. break-inside 属性

防止分页符或列中断出现在元素内部。

.avoid-break {
    break-inside: avoid;
}

7. writing-mode 属性

改变文本的方向。

.vertical-text { writing-mode: vertical-rl; }

8. perspective 属性

给子元素添加3D空间效果。

.parent {
    perspective: 1000px;
}
.child {
    transform: rotateY(45deg);
}

9. backface-visibility 属性

设置元素背面是否可见。

.card { backface-visibility: hidden; }

10. filter 属性

应用图形效果如模糊或颜色偏移。

img {
    filter: blur(5px);
}

11. object-fit 属性

控制替换元素内容如何适应其容器尺寸。

img { object-fit: cover; }

12. mix-blend-mode 属性

指定背景图像应如何与背景颜色混合。

.blend {
    mix-blend-mode: multiply;
}

13. columns 属性

自动将内容分成多列。

.multi-column {
    columns: 3;
}

14. hyphens 属性

控制单词内连字符的位置。

p {
    hyphens: auto;
}

15. grid-gap 属性

在网格布局中创建间距。

.grid-container {
    grid-gap: 10px;
}

16. justify-items 和 align-items 属性

控制网格项目在单元格中的对齐方式。

.grid-container {
    justify-items: center;
    align-items: center;
}

17. place-content 属性

同时设置justify-content和align-content。

.grid-container {
    place-content: space-around;
}

18. font-variant-ligatures 属性

控制字体中的连接符使用。

p {
    font-variant-ligatures: none;
}

19. text-decoration-skip-ink 属性

控制下划线如何跨越字母。

a {
    text-decoration-skip-ink: none;
}

20. caret-color 属性

更改文本输入光标的颜色。

input {
    caret-color: red;
}