CSS 新特性

撰写时间：2025-03-14

修订时间：2025-03-14

details

将多个details的name属性都设置为一个相同的值，则这些details立即自动变身为一个自动排他折叠的accordion。

HTML

HTML用于编写网页内容。

CSS

CSS是网页高级化妆师。

JavaScript

JavaScript用于生成灵动的内容。

details { border: 0.5px solid #666; } details > summary { color: rgb(245, 169, 233); background-color: #333; cursor: pointer; padding: 0.3em; font-weight: bold; } details > p { text-indent: 2em; }

该特性已于2024年9月转变为Baseline 2024。

align-content

在普通的块级标签中使用align-content来设置子标签在垂直方向上的排列方式。

div#container { width: 100px; height: 150px; border: 1px solid gray; align-content: center; } div#container > div { border: 1px solid #999; padding: 0.2em; background-color: hsla(160, 50%, 50%, 0.2); }

可设置的属性值

normal
first
last
baseline
space-between
space-around
space-evenly
stretch
unsafe
safe
center
start
end
flex-start
flex-end

但类如space-*、stretch的属性值还是不如CSS Grid支持得好。

该特性已于2024年4月转变为Baseline 2024。

aspect-ratio

aspect-ratio用以设置块级标签的宽高比。

div { width: 200px; aspect-ratio: 16 / 9; background-color: hsl(230, 20%, 35%); }

可设置的属性值

w / h
num
auto
revert
revert-layer

该特性已于2024年3月转变为Baseline Widely available。

CSS 新特性

details

align-content

aspect-ratio

参考资源