量大管飽，這些 CSS 方案絕了......

作者：程序員Sunday 2025-06-03 04:10:00

當(dāng)各種框架以及復(fù)雜的 JS 知識開始充斥著我們的工作環(huán)境時。誰還能夠記得，以 CSS 來構(gòu)建更加良好的用戶體驗，也是前端的一個重要組成部分。

Hello，大家好，我是 Sunday。

所以說，今天咱們就來看看 css 的優(yōu)化方案-終極合集。一共一百條，有點多，適合收藏（點個贊和分享自然更好了????）

1. 啟動平滑滾動

添加scroll-behavior：smooth到元素中<html>，使整個頁面能夠平滑滾動。

html{  
    scroll-behavior: smooth;  
  }

2. 鏈接的屬性選擇器

此選擇器以href屬性以“https”開頭的鏈接為目標(biāo)。

a[href^="https"] {
    color: blue;
}

3. ~用于合并節(jié)點

選擇作為<h2>同級元素的所有<p>元素。

h2 ~ p {
    color: blue;
}

4. :not()偽類

此選擇器將樣式應(yīng)用于不具有類“Special”的 li。

li:not(.special) {
    font-style: italic;
}

5. 響應(yīng)式排版的視窗單位 vw

使用視區(qū)單位(vw, vh, vmin, vmax)可以使字體大小與視區(qū)大小相對應(yīng)。

h1 {
    font-size: 5vw;
}

6. :empty 對于空元素

此選擇器以空的<p>元素為目標(biāo)并隱藏它們。

p:empty {
    display: none;
}

7. 自定義特性(變量)

可以定義和使用自定義特性，以便更輕松地創(chuàng)建主題和進(jìn)行維護(hù)。

:root {
    --main-color: #3498db;
}

h1 {
    color: var(--main-color);
}

8. Object-fit 圖像控件的適配性

object-fit 控制替換元素(如<img>)的內(nèi)容應(yīng)該如何調(diào)整大小。

img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

9. 簡化布局的網(wǎng)格

Css網(wǎng)格提供了一種功能強大的方式來以更直接的方式創(chuàng)建布局。

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

10. :focus-within 偽類

如果一個元素包含任何帶有:focus的子元素，則:focus-Win會選擇該元素。

form:focus-within {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

11. 使用Flexbox垂直居中

使用FlexBox可輕松地將內(nèi)容在容器中水平和垂直居中。

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

12. 自定義選定內(nèi)容的突出顯示顏色

自定義在網(wǎng)頁上選擇文本時的突出顯示顏色。

::selection {
    background-color: #ffcc00;
    color: #333;
}

13. 設(shè)置占位符文本的樣式

設(shè)置輸入字段內(nèi)占位符文本的樣式。

::placeholder {
    color: #999;
    font-style: italic;
}

14. 漸變邊界

使用Backback-Clip屬性創(chuàng)建漸變邊框。

.element {
    border: 2px solid transparent;
    background-clip: padding-box;
    background-image: linear-gradient(to right, red, blue);
}

15. 使用vw實現(xiàn)可變字體大小

根據(jù)視口寬度調(diào)整字體大小，實現(xiàn)更加響應(yīng)式的排版。

body {
    font-size: calc(16px + 1vw);
}

16. 使用錐形漸變創(chuàng)建多彩元素

利用錐形漸變創(chuàng)建豐富多彩且動態(tài)的背景。

.element {
    background: conic-gradient(#ff5733, #33ff57, #5733ff);
}

17. 使用clamp()函數(shù)實現(xiàn)響應(yīng)式文本

使用clamp()函數(shù)設(shè)置字體大小的范圍，確保在不同屏幕尺寸下的可讀性。

.text {
    font-size: clamp(16px, 4vw, 24px);
}

18. 使用font-display: swap;優(yōu)化字體加載

使用font-display: swap;屬性提高網(wǎng)頁字體性能，讓自定義字體加載時顯示備用字體。

@font-face {
    font-family: 'YourFont';
    src: url('your-font.woff2') format('woff2');
    font-display: swap;
}

19. 自定義滾動吸附點

為了實現(xiàn)更順暢的滾動體驗，特別是在圖庫或滑塊中，實現(xiàn)自定義滾動吸附點。

.scroll-container {
    scroll-snap-type: y mandatory;
}

.scroll-item {
    scroll-snap-align: start;
}

20. 使用字體變體設(shè)置進(jìn)行可變字體樣式

利用可變字體和font-variation-settings屬性對字體的粗細(xì)、樣式等進(jìn)行精細(xì)調(diào)節(jié)。

.text {
    font-family: 'YourVariableFont', sans-serif;
    font-variation-settings: 'wght' 500, 'ital' 1;
}

21. 自定義下劃線樣式

使用border-bottom和text-decoration的組合來自定義鏈接的下劃線樣式。

a {
    text-decoration: none;
    border-bottom: 1px solid #3498db;
}

22. 隱藏?zé)o障礙文本

使用class sr-only來在視覺上隱藏元素，但保持其對屏幕閱讀器的可訪問性。

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

23. 保持元素縱橫比

通過使用padding來保持元素（如圖片或視頻）的縱橫比。

.aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* 根據(jù)需要調(diào)整 */
}

.aspect-ratio-box > iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

24. 選擇偶數(shù)和奇數(shù)元素

使用:nth-child偽類來為交替元素設(shè)置樣式。

li:nth-child(even) {
    background-color: #f2f2f2;
}

li:nth-child(odd) {
    background-color: #e6e6e6;
}

25. CSS計數(shù)器

使用counter-reset和counter-increment屬性在列表中創(chuàng)建自動編號。

ol {
    counter-reset: item;
}

li {
    counter-increment: item;
}

li::before {
    content: counter(item) ". ";
}

26. 多重背景圖片

使用不同屬性為元素應(yīng)用多個背景圖片。

.bg {
    background-image: url('image1.jpg'), url('image2.jpg');
    background-position: top left, bottom right;
    background-repeat: no-repeat, repeat-x;
}

27. 優(yōu)化文本流暢性的連字符

通過使用hyphens屬性允許自動連字符以提高文本的可讀性。

p {
    hyphens: auto;
}

28. 使用CSS變量進(jìn)行動態(tài)樣式

利用CSS變量創(chuàng)建動態(tài)且可重用的樣式。

:root {
    --main-color: #3498db;
}

.element {
    color: var(--main-color);
}

29. 鍵盤導(dǎo)航的焦點樣式

改善焦點樣式以提高鍵盤導(dǎo)航和可訪問性。

:focus {
    outline: 2px solid #27ae60;
}

30. 平滑漸變過渡

為漸變背景應(yīng)用平滑過渡效果，增強視覺效果。

.gradient-box {
    background: linear-gradient(45deg, #3498db, #2ecc71);
    transition: background 0.5s ease;
}

.gradient-box:hover {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
}

31. 文本描邊效果

為文本添加描邊，產(chǎn)生獨特的視覺效果。

h1 {
    color: #3498db;
    -webkit-text-stroke: 2px #2c3e50;
}

32. 純CSS漢堡菜單

創(chuàng)建一個簡單的漢堡菜單，無需使用JavaScript。

.menu-toggle {
    display: none;
}

.menu-toggle:checked + nav {
    display: block;
}
/* 在這里添加漢堡菜單圖標(biāo)和菜單樣式 */

33. CSS :is()選擇器

使用:is()偽類簡化復(fù)雜的選擇器。

:is(h1, h2, h3) {
    color: blue;
}

34. CSS變量中的計算

在CSS變量中進(jìn)行計算，實現(xiàn)動態(tài)樣式。

:root {
    --base-size: 16px;
    --header-size: calc(var(--base-size) * 2);
}

h1 {
    font-size: var(--header-size);
}

35. attr()函數(shù)用于內(nèi)容

使用attr

()函數(shù)檢索和顯示屬性值。

div::before {
    content: attr(data-custom-content);
}

36. CSS遮罩效果

為圖像應(yīng)用遮罩，創(chuàng)造出獨特的效果。

.masked-image {
    mask: url(mask.svg);
    mask-size: cover;
}

37. 混合模式

嘗試使用混合模式創(chuàng)建有趣的色彩效果。

.blend-mode {
    background: url(image.jpg);
    mix-blend-mode: screen;
}

38. 縱橫比屬性

使用縱橫比屬性簡化縱橫比盒子的創(chuàng)建。

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

39. shape-outside實現(xiàn)文本環(huán)繞

使用shape-outside屬性使文本圍繞指定形狀，實現(xiàn)更動態(tài)的布局。

.shape-wrap {
    float: left;
    width: 150px;
    height: 150px;
    shape-outside: circle(50%);
}

40. ch單位用于一致的尺寸

ch單位表示所選字體中字符“0”的寬度，可用于創(chuàng)建一致且響應(yīng)式的布局。

h1 {
    font-size: 2ch;
}

41. ::marker偽元素

使用::marker偽元素為列表項標(biāo)記設(shè)置樣式。

li::marker {
    color: blue;
}

42. element()函數(shù)用于背景

使用element()函數(shù)動態(tài)引用元素作為背景。

.background {
    background: element(#targetElement);
}

43. Flexbox實現(xiàn)粘性底部

使用Flexbox創(chuàng)建粘性底部布局。

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

44. scroll-padding實現(xiàn)平滑滾動

通過調(diào)整scroll padding來改善滾動行為。

html {
    scroll-padding: 20px;
}

45. 交互式高亮效果

使用CSS變量創(chuàng)建交互式高亮效果。

.highlight {
    --highlight-color: #e74c3c;
    background-image: linear-gradient(transparent 0%, var(--highlight-color) 0%);
    background-size: 100% 200%;
    transition: background-position 0.3s;
}

.highlight:hover {
    background-position: 0 100%;
}

46. 自定義單選框和復(fù)選框樣式

無需圖像，樣式化單選框和復(fù)選框。

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #3498db;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #e74c3c;
}

47. textarea的resize屬性

使用resize屬性控制textarea的調(diào)整大小行為。

textarea {
    resize: vertical;
}

48. 文本漸變效果

使用background-clip和text-fill-color屬性為文本創(chuàng)建漸變效果。

.gradient-text {
    background-image: linear-gradient(45deg, #3498db, #2ecc71);
    background-clip: text;
    color: transparent;
}

49. 對長單詞使用word-break屬性

使用word-break屬性控制長單詞或沒有空格的字符串的斷行和換行。

.long-words {
    word-break: break-all;
}

50. font-variation-settings用于可變字體

使用font-variation-settings屬性微調(diào)可變字體樣式。

.custom-font {
    font-family: 'MyVariableFont';
    font-variation-settings: 'wght' 600, 'ital' 1;
}

51. 混合模式用于創(chuàng)意疊加效果

使用混合模式為元素應(yīng)用疊加效果，創(chuàng)造出有趣的視覺效果。

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

52. 為損壞的圖像應(yīng)用樣式

使用:broken偽類為損壞的圖像應(yīng)用樣式。

img:broken {
    filter: grayscale(100%);
}

53. CSS形狀

使用CSS形狀為設(shè)計創(chuàng)建有趣的效果。

.shape {
    shape-outside: circle(50%);
}

54. 屬性選擇器用于子字符串匹配

使用*=操作符的屬性選擇器進(jìn)行子字符串匹配。

[data-attribute*="value"] {
    /* 樣式 */
}

55. backdrop-filter用于模糊背景

使用backdrop-filter為背景應(yīng)用模糊效果，實現(xiàn)毛玻璃效果。

.element {
    backdrop-filter: blur(10px);
}

56. CSS環(huán)境變量

使用env()函數(shù)在CSS中訪問環(huán)境變量。

.element {
    margin-top: env(safe-area-inset-top);
}

57. CSS屬性計數(shù)器

使用:nth-child選擇器計算特定屬性值的出現(xiàn)次數(shù)。

[data-category="example"]:nth-child(3) {
    /* 第三次出現(xiàn)的樣式 */
}

58. CSS形狀實現(xiàn)文本環(huán)繞

使用shape-outside結(jié)合polygon()函數(shù)精確地控制文本圍繞不規(guī)則形狀的布局。

.text-wrap {
    shape-outside: polygon(0 0, 100% 0, 100% 100%);
}

59. 自定義鼠標(biāo)樣式

使用cursor屬性更改鼠標(biāo)樣式。

.custom-cursor {
    cursor: pointer;
}

60. HSLA用于透明顏色

使用HSLA值表示透

明顏色，對alpha通道進(jìn)行更精細(xì)的控制。

.transparent-bg {
    background-color: hsla(120, 100%, 50%, 0.5);
}

61. text-orientation實現(xiàn)縱向文本

使用text-orientation屬性將文本垂直旋轉(zhuǎn)。

.vertical-text {
    text-orientation: upright;
}

62. font-variant用于小型大寫字母

使用font-variant屬性應(yīng)用小型大寫字母樣式。

.small-caps {
    font-variant: small-caps;
}

63. box-decoration-break用于背景分割

使用box-decoration-break屬性控制跨多行斷開的元素的背景，實現(xiàn)更靈活的文本環(huán)繞。

.split-background {
    box-decoration-break: clone;
}

64. :focus-visible用于特定焦點樣式

僅在元素處于焦點且焦點不是由鼠標(biāo)單擊提供時應(yīng)用樣式。

input:focus-visible {
    outline: 2px solid blue;
}

65. text-rendering實現(xiàn)最佳字體呈現(xiàn)

通過text-rendering屬性改善文本呈現(xiàn)效果。

.optimized-text {
    text-rendering: optimizeLegibility;
}

66. initial-letter用于大寫字母

使用initial-letter為塊級元素的第一個字母應(yīng)用樣式。

p::first-letter {
    font-size: 2em;
}

67. overscroll-behavior用于滾動過度

控制用戶滾動超出滾動容器邊界時的行為。

.scroll-container {
    overscroll-behavior: contain;
}

68. writing-mode實現(xiàn)縱向布局

使用writing-mode屬性創(chuàng)建縱向布局。

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

69. ::cue用于HTML5標(biāo)題樣式

使用::cue偽元素為HTML5字幕文本應(yīng)用樣式。

::cue {
    color: blue;
}

70. line-clamp截斷多行文本

使用line-clamp屬性限制元素中顯示的行數(shù)。

.truncated-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

71. scroll-snap-align

scroll-snap-align屬性控制滾動容器內(nèi)滾動捕捉點的對齊方式，確保對滾動行為進(jìn)行精確控制，提升用戶體驗。

.container {
    scroll-snap-type: x mandatory;
}

.item {
    scroll-snap-align: center;
}

72. overscroll-behavior

overscroll-behavior使您可以定義瀏覽器在滾動超出范圍時的處理方式，從而避免不必要的滾動效果，提升整體滾動體驗。

.scrollable {
    overscroll-behavior: contain;
}

73. font-kerning

font-kerning允許對字符間距進(jìn)行微調(diào)，通過調(diào)整文本元素中字符之間的間距，確保最佳的可讀性。

p {
    font-kerning: auto;
}

74. shape-margin

與CSS形狀一起使用時，shape-margin指定浮動元素形狀周圍的邊距，可以更精確地控制文本環(huán)繞和布局。

.shape {
    shape-margin: 20px;
}

75. scroll-margin

scroll-margin設(shè)置滾動容器邊緣與滾動內(nèi)容開始之間的邊距，提升用戶體驗，為滾動提供緩沖空間。

.container {
    scroll-margin-top: 100px;
}

76. tab-size

tab-size屬性控制文本區(qū)域中制表符的寬度，確保在不同用戶代理中一致的顯示。

pre {
    tab-size: 4;
}

77. text-align-last

text-align-last決定塊級元素中最后一行文本的對齊方式，為多行塊文本提供對齊控制。

p {
    text-align-last: justify;
}

78. text-justify

此屬性控制文本兩端對齊的行為，指定是使用單詞間還是字符間距進(jìn)行文本對齊。

p {
    text-align: justify;
    text-justify: inter-word;
}

79. column-fill

column-fill決定如何在多列布局中分配內(nèi)容，允許內(nèi)容依次或平衡分布在列中。

.container {
    column-count: 3;
    column-fill: auto;
}

80. outline-offset

outline-offset調(diào)整輪廓與元素邊緣之間的空間，不影響布局，為輪廓的外觀提供更細(xì)致的控制。

button {
    outline: 2px solid blue;
    outline-offset: 4px;
}

81. font-variant-numeric

此屬性允許精細(xì)控制數(shù)字字體渲染，啟用特性如數(shù)字大小寫和分?jǐn)?shù)、序數(shù)指示器等。

p {
    font-variant-numeric: lining-nums;
}

82. font-optical-sizing

啟用或禁用字體光學(xué)大小調(diào)整，以調(diào)整字符的間距和比例，實現(xiàn)在不同字體大小下更好的視覺和諧。

p {
    font-optical-sizing: auto;
}

83. text-decoration-thickness

精確控制文本裝飾（如下劃線、上劃線和刪除線）的粗細(xì)，實現(xiàn)精細(xì)化定制。

p {
    text-decoration-thickness: 2px;
}

84. text-decoration-skip-ink

text-decoration-skip-ink屬性控制文本裝飾（如下劃線）在被墨水遮擋的情況下是否繼續(xù)繪制，提升可讀性。

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

85. word-spacing

word-spacing屬性控制字詞間距，調(diào)整文本的緊湊度和可讀性。

p {
    word-spacing: 2px;
}

86. hyphenation

通過調(diào)整斷字點和斷字行為，提高文本在窄列中的美觀度和可讀性。

p {
    hyphens: auto;
}

87. background-blend-mode

background-blend-mode屬性允許背景圖像與其下方的背景顏色進(jìn)行混合，產(chǎn)生出獨特的視覺效果。

.element {
    background-image: url('image.jpg');
    background-color: #3498db;
    background-blend-mode: multiply;
}

88. text-decoration-color

text-decoration-color屬性控制文本裝飾的顏色，為鏈接和裝飾文本提供更靈活的樣式。

a {
    text-decoration: underline;
    text-decoration-color: red;
}

89. overflow-anchor

overflow-anchor屬性指定了在容器的滾動范圍內(nèi)滾動時哪些內(nèi)容應(yīng)保持可見，提升用戶體驗。

.container {
    overflow-anchor: none;
}

90. contain-intrinsic-size

contain-intrinsic-size屬性定義了內(nèi)聯(lián)大小計算函數(shù)的大小，實現(xiàn)更精確的布局控制。

img {
    contain-intrinsic-size: 200px 300px;
}

91. line-gap

line-gap屬性定義了元素的行間距，可以為文字和其他行內(nèi)元素提供更大的空間。

p {
    line-gap: 1.5;
}

92. text-underline-offset

text-underline-offset屬性控制文本下劃線相對于基線的垂直偏移量，實現(xiàn)更加精確的下劃線定位。

a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

93. text-decoration-line

text-decoration-line屬性指定要繪制的裝飾線的類型，可用于單獨控制上劃線、下劃線、刪除線等。

a {
    text-decoration-line: underline overline;
}

94. text-emphasis

text-emphasis屬性為文本設(shè)置強調(diào)標(biāo)志，用于提高關(guān)鍵字的可讀性。

em {
    text-emphasis: filled circle;
}

95. text-orientation

text-orientation屬性控制文本的方向，適用于縱向文本和日文排版等情況。

.vertical-text {
    text-orientation: sideways-right;
}

96. background-origin

background-origin屬性確定背景圖片的起始位置，影響背景圖片與邊框的相對位置。

.element {
    background-image: url('image.jpg');
    background-origin: content-box;
}

97. counter-set

counter-set屬性在使用counter-reset創(chuàng)建的計數(shù)器值基礎(chǔ)上，顯式設(shè)置一個新的值。

ol {
    counter-set: section 1;
}

98. hanging-punctuation

hanging-punctuation屬性控制標(biāo)點符號是否在行框之外懸掛，以提高排版的美觀度和可讀性。

p {
    hanging-punctuation: last allow-end;
}

99. line-break

line-break屬性控制文本換行行為，確保在指定的斷點處進(jìn)行斷行。

p {
    line-break: anywhere;
}

100. text-justify

text-justify屬性指定如何分配額外的空間，以便充分利用容器的寬度。

p {
    text-align: justify;
    text-justify: inter-word;
}

責(zé)任編輯：武曉燕來源：程序員Sunday

CSS 框架 JS