CSS 有什么奇技淫巧？

.no-select { user-select: none }

/* Fixed minimum value below the minimum breakpoint */ .fluid { font-size: 32px; } /* Fluid value from 568px to 768px viewport width */ @media screen and (min-width: 568px) { .fluid { font-size: calc(32px + 16 * ((100vw - 568px) / (768 - 568)); } } /* Fixed maximum value above the maximum breakpoint */ @media screen and (min-width: 768px) { .fluid { font-size: 48px; } }

clamp(minimum size, preferred size, maximum size)

.aspect-ratio { aspect-ratio: 16 / 9 }

<div class='box'> <div class='content'> content </div> </div>

.box{ position: relative; width: 50%; /* desired width */ } .box:before{ content: ""; display: block; padding-top: 100%; /* 1:1* / } .content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* Other ratios */ .ratio2_1:before{ padding-top: 50%; /* 2:1 */ } .ratio1_2:before{ padding-top: 200%; /* 1:2 */ } .ratio4_3:before{ padding-top: 75%; /* 4:3 */ } .ratio16_9:before{ padding-top: 56.25%; /* 16:9 */ }

html { scroll-behavior: smooth }

@media (prefers-color-scheme: dark) { body { background-color: #333; color: #fff; } }

.cover-img { object-fit: cover }

.no-pointer { pointer-events: none }

.blur { filter: blur(20px) }

.dynamic-content::before { content: attr(class) }

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

.gradient-text { background: linear-gradient(to top, red 0%, blue 100%); color: transparent; -webkit-background-clip: text; }

p::first-letter { font-weight: bold; color: #333; }

.element:empty { display: none }

@media (orientation: landscape) { body { background-color: #333 } }

background: radial-gradient(circle at 50% 50%, rgba(243, 196.3, 96.5, 1) 0%,rgba(238.8, 34.6, 122.1, 0.2) 80%) 50% 50%, linear-gradient(0deg, rgba(170.2, 106.8, 238.7, 1) 0%,rgba(162.6, 112.6, 178.8, 1) 100%) 50% 50%;

p { background: white; } p:has(img) { background: grey; } form:has(input:invalid) { background: red; } form:not(:has(input:invalid)) { background: green }

body { font-size: calc(100% * env(browser-zoom-level)); }

// 不可见，不占据空间，辅助设备无法访问，不渲染 <script type="text/html"> element </script> // 不可见，不占据空间，辅助设备无法访问，但有资源载入，DOM可访问。 .dn{ display: none; } // 不可见，不占据空间，辅助设备无法访问，但显隐可以有transition淡入淡出效果 .hidden{ position: absolute; visibility: hidden; } // 不可见，不可点击，不占据空间，键盘无法访问 .clip{ position: absolute; clip: rect(0 0 0); } .out{ position: relative; left: -999em; } // 不可见，不能点击，但占据空间，键盘可访问。 .lower{ position: relative; z-index: -1; } // 不可见，但可以点击，不占据空间。 .opcity{ position: absolute; opacity: 0; filter: Alpha(opacity=0); } // 元素不可见，位置保留，依然可以点可以选，直接透明度为0 .opacity{ opacity: 0; filter: Alpha(opacity=0); } // 标签受限的情况下，隐藏某文字，可以使用text-indent缩进可能更友好，如果希望显示的时候添加动画，就可以使用max-height进行隐藏。 .hidden{ max-height: 0; overflow: hidden; }

.icon-clear{ width: 16px; height: 16px; border: 11px solid transparent }

input{ caret-color:#ff0000; }

.input-radio{ accent-color:#ff00bf }

div{ hyphens: auto; }

q{ quotes:"“" "”"; }

<! - Radio buttons → <input type="radio" id="tab1" name="tabs" checked> <label for="tab1">Tab 1</label> <input type="radio" id="tab2" name="tabs"> <label for="tab2">Tab 2</label> <input type="radio" id="tab3" name="tabs"> <label for="tab3">Tab 3</label> <! - Content → <div class="tab-content" id="content1"> <h2>Content for Tab 1</h2> <p>This is the content for the first tab.</p> </div> <div class="tab-content" id="content2"> <h2>Content for Tab 2</h2> <p>This is the content for the second tab.</p> </div> <div class="tab-content" id="content3"> <h2>Content for Tab 3</h2> <p>This is the content for the third tab.</p> </div>

/* Hide radio buttons */ input[type="radio"] { display: none; } /* Style labels as tabs */ label { display: inline-block; padding: 10px 20px; margin: 0; cursor: pointer; background-color: #eee; border: 1px solid #ccc; border-bottom: none; transition: background-color 0.3s ease; } /* Style active tab */ input[type="radio"]:checked + label { background-color: #fff; border-bottom: 1px solid #fff; font-weight: bold; } /* Style content areas */ .tab-content { display: none; padding: 20px; border: 1px solid #ccc; border-top: none; background-color: #fff; } /* Show active content */ #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3 { display: block; }

.container{ background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); }