你不知道的css

图片文字环绕

shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域：

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

shape-outside 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

:where() 简化代码

当对多个元素应用相同的样式时，CSS 可能如下：

.parent div,
.parent .title,
.parent #article {
  color: red;
}

这样代码看起来可读性不是很好，:where() 伪类这时就派上用场了。:where() 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

上面的代码使用:where()就可以这么写：

.parent :where(div, .title, #article) {
  color: red;
}

将文本设为大写或小写

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

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

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

效果如下：

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