CSS属性：fit-content

1. <div class="content">
2.   <img src="src\assets\404_images\xxmLogo.png" alt="">
3.   <div class="frosted-glass">
4.     <p>This is a frosted glass effect.</p>
5.   </div>
6. </div>

复制代码

1. .frosted-glass {
2.   position: absolute;
3.   top: 10vh;
4.   left: 0;
5.   right: 0;
6.   margin: auto;
8.   width: fit-content;
10.   background: rgba(0, 0, 0, 0.3);
11.   font-size: 28px;
12.   color: #fff;
13.   border-radius: 40px;
14.   padding: 8px 28px;
15.   backdrop-filter: blur(10px);
16. }
18. .content {
19.   position: relative;
20.   width: 800px;
21.   height: 800px;
22. }
24. img {
25.   width: 100%;
26.   height: 100%;
27. }

复制代码

效果图：

fit-content 是 CSS 中用于动态调解元素宽度或高度的一个值。它根据内容的尺寸和容器的可用空间来盘算元素的巨细。fit-content 告急用于相应式筹划场景下，当你渴望元素尺寸根据内容自顺应，但又不超出特定限定时。
fit-content 可以用于 width、height、max-width 和 max-height 等属性。
fit-content 盘算出的宽度便是内容所需的最小宽度，除非被容器的束缚条件（如最大宽度或可用空间）限定。
拓展

margin: 0 auto; 不能使 .frosted-glass 元素程度居中的缘故原由是元素的 position: absolute; 属性使其离开了文档流。在这种环境下，margin: 0 auto; 无法正常工作，由于绝对定位元素不受通例的主动边距影响。
方法一：利用 left: 0; right: 0; 团结 margin: auto;

方法二：利用 left: 50%; 团结 transform: translate(-50%);