CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>使用 CSS 渐变 - CSS：层叠样式表 | MDN</title><link rel="alternate" title="Using CSS gradients" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients" hrefLang="en"/><link rel="alternate" title="Verwendung von CSS-Verläufen" href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_images/Using_CSS_gradients" hrefLang="de"/><link rel="alternate" title="Usando degradados con CSS" href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_images/Using_CSS_gradients" hrefLang="es"/><link rel="alternate" title="Utilisation de dégradés CSS" href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_images/Using_CSS_gradients" hrefLang="fr"/><link rel="alternate" title="CSS グラデーションの使用" href="https://developer.mozilla.org/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients" hrefLang="ja"/><link rel="alternate" title="CSS 그라디언트 사용하기" href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_images/Using_CSS_gradients" hrefLang="ko"/><link rel="alternate" title="Использование CSS-градиентов" href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_images/Using_CSS_gradients" hrefLang="ru"/><link rel="alternate" title="使用 CSS 渐变" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients" hrefLang="zh"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="CSS 渐变由 <gradient> 数据类型表示，它是 <image> 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。你可以选择三种类型的渐变：线性（由 linear-gradient() 函数创建）、径向（由 radial-gradient() 函数创建）和锥形（由 conic-gradient() 函数创建）。你还可以使用 repeating-linear-gradient() 和 repeating-conic-gradient() 函数创建重复渐变。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients"/><meta property="og:title" content="使用 CSS 渐变 - CSS：层叠样式表 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="CSS 渐变由 <gradient> 数据类型表示，它是 <image> 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。你可以选择三种类型的渐变：线性（由 linear-gradient() 函数创建）、径向（由 radial-gradient() 函数创建）和锥形（由 conic-gradient() 函数创建）。你还可以使用 repeating-linear-gradient() 和 repeating-conic-gradient() 函数创建重复渐变。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.06414919.js"></script><link href="/static/css/main.4634a21c.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-css document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/zh-CN/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/zh-CN/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/zh-CN/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/zh-CN/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/zh-CN/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/zh-CN/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/zh-CN/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/zh-CN/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/zh-CN/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/zh-CN/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/zh-CN/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FCSS_images%2FUsing_CSS_gradients" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FCSS_images%2FUsing_CSS_gradients" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">面向开发者的 Web 技术</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web/CSS" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS：层叠样式表</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/CSS/CSS_images" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS images</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">使用 CSS 渐变</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>中文 (简体)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Web/CSS/CSS_images/Using_CSS_gradients" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="es" href="/es/docs/Web/CSS/CSS_images/Using_CSS_gradients" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Web/CSS/CSS_images/Using_CSS_gradients" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Web/CSS/CSS_images/Using_CSS_gradients" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Web/CSS/CSS_images/Using_CSS_gradients" class="button submenu-item"><span>Русский</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content#活跃语言">此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#使用线性渐变">使用线性渐变</a></li><li class="document-toc-item "><a class="document-toc-link" href="#声明颜色和创建效果">声明颜色和创建效果</a></li><li class="document-toc-item "><a class="document-toc-link" href="#使用径向渐变">使用径向渐变</a></li><li class="document-toc-item "><a class="document-toc-link" href="#使用锥形渐变">使用锥形渐变</a></li><li class="document-toc-item "><a class="document-toc-link" href="#使用重复渐变">使用重复渐变</a></li><li class="document-toc-item "><a class="document-toc-link" href="#参见">参见</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/zh-CN/docs/Web/CSS">CSS</a></li><li class="section"><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">初学者教程</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">你的第一个网站：样式化内容</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">CSS 样式基础</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">CSS 如何运行</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started">让我们开始 CSS 的学习之旅</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">运用你的新知识</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">CSS 选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">属性选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">伪类和伪元素</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators">关系选择器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model">盒模型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">层叠、优先级与继承</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS 值和单位</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing">在 CSS 中调整大小</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">背景与边框</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow">溢出的内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">图像、媒体和表单元素</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables">样式化表格</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">调试 CSS</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">基本的 CSS 理解</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">创建精美的信纸</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">一个漂亮的盒子</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling">CSS 文本样式</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals">基本文本和字体样式</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists">为列表添加样式</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links">样式化链接</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts">Web 字体</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">作业：排版社区大学首页</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout">CSS 布局概述</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction">介绍 CSS 布局</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Floats">浮动</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning">定位</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox">弹性盒子</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids">网格</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">响应式设计</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Media_queries">媒体查询入门指南</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">作业：基本布局理解</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Web/CSS/Reference">CSS 参考</a></li><li class="toggle"><details><summary>模块</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_anchor_positioning" class="only-in-en-us">CSS anchor positioning</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_animations">CSS 动画</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders">CSS 背景和边框</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_basic_user_interface">CSS Basic User Interface</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_box_alignment">CSS 盒子对齐</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_box_model">CSS 基础框盒模型</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_sizing" class="only-in-en-us">CSS box sizing</a></li><li><a href="/en-US/docs/Web/CSS/CSS_cascade" class="only-in-en-us">CSS cascading and inheritance</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_color_adjustment">CSS 颜色调整</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_colors">CSS Color</a></li><li><a href="/en-US/docs/Web/CSS/CSS_compositing_and_blending" class="only-in-en-us">CSS compositing and blending</a></li><li><a href="/en-US/docs/Web/CSS/CSS_conditional_rules" class="only-in-en-us">CSS conditional rules</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_containment">CSS 局限</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_counter_styles">CSS 计数器样式</a></li><li><a href="/en-US/docs/Web/CSS/CSS_cascading_variables" class="only-in-en-us">CSS custom properties for cascading variables</a></li><li><a href="/en-US/docs/Web/CSS/CSS_display" class="only-in-en-us">CSS display</a></li><li><a href="/en-US/docs/Web/CSS/CSS_filter_effects" class="only-in-en-us">CSS filter effects</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout">CSS 弹性盒子布局</a></li><li><a href="/en-US/docs/Web/CSS/CSS_font_loading" class="only-in-en-us">CSS font loading</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_fonts">CSS 字体</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_fragmentation">CSS 片段</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_generated_content">CSS 生成内容</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout">网格布局</a></li><li><a href="/en-US/docs/Web/CSS/CSS_images" class="only-in-en-us">CSS images</a></li><li><a href="/en-US/docs/Web/CSS/CSS_inline_layout" class="only-in-en-us">CSS inline layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_lists" class="only-in-en-us">CSS lists and counters</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values">CSS 逻辑属性与逻辑值</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_masking">CSS Masking</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_media_queries">媒体查询</a></li><li><a href="/en-US/docs/Web/CSS/CSS_motion_path" class="only-in-en-us">CSS motion path</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_multicol_layout">CSS 多列布局</a></li><li><a href="/en-US/docs/Web/CSS/CSS_namespaces" class="only-in-en-us">CSS namespaces</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_nesting">CSS 嵌套</a></li><li><a href="/en-US/docs/Web/CSS/CSS_overflow" class="only-in-en-us">CSS overflow</a></li><li><a href="/en-US/docs/Web/CSS/CSS_overscroll_behavior" class="only-in-en-us">CSS overscroll behavior</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_paged_media">CSS 分页媒体</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_positioned_layout">CSS Positioning</a></li><li><a href="/en-US/docs/Web/CSS/CSS_properties_and_values_API" class="only-in-en-us">CSS properties and values API</a></li><li><a href="/en-US/docs/Web/CSS/CSS_pseudo-elements" class="only-in-en-us">CSS pseudo-elements</a></li><li><a href="/en-US/docs/Web/CSS/CSS_ruby_layout" class="only-in-en-us">CSS ruby layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_scoping" class="only-in-en-us">CSS scoping</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_scroll_snap">CSS 滚动吸附</a></li><li><a href="/en-US/docs/Web/CSS/CSS_scroll-driven_animations" class="only-in-en-us">CSS scroll-driven animations</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_scrollbars_styling">CSS Scrollbars</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_selectors">CSS 选择器</a></li><li><a href="/en-US/docs/Web/CSS/CSS_shadow_parts" class="only-in-en-us">CSS shadow parts</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_shapes">CSS 形状</a></li><li><a href="/en-US/docs/Web/CSS/CSS_syntax" class="only-in-en-us">CSS syntax</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_table">CSS Table</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_text">CSS Text</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_text_decoration">CSS 文本装饰</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_transforms">CSS Transforms</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_transitions">CSS 过渡</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_Values_and_Units">CSS 值和单位</a></li><li><a href="/en-US/docs/Web/CSS/CSS_view_transitions" class="only-in-en-us">CSS view transitions</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_writing_modes">CSS Writing Modes CSS 写入模式</a></li><li><a href="/zh-CN/docs/Web/CSS/CSSOM_view">CSSOM View</a></li></ol></details></li><li class="toggle"><details><summary>属性</summary><ol><li class="toggle"><details><summary>-moz-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/-moz-float-edge">-moz-float-edge</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/-moz-force-broken-image-icon">-moz-force-broken-image-icon</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-moz-image-region" class="only-in-en-us">-moz-image-region</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-moz-orient" class="only-in-en-us">-moz-orient</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-moz-user-focus" class="only-in-en-us">-moz-user-focus</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/-moz-user-input">-moz-user-input</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>-webkit-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/-webkit-border-before">-webkit-border-before</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/-webkit-box-reflect">-webkit-box-reflect</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-box-image" class="only-in-en-us">-webkit-mask-box-image</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-composite" class="only-in-en-us">-webkit-mask-composite</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-position-x" class="only-in-en-us">-webkit-mask-position-x</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-position-y" class="only-in-en-us">-webkit-mask-position-y</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-repeat-x" class="only-in-en-us">-webkit-mask-repeat-x</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/-webkit-mask-repeat-y" class="only-in-en-us">-webkit-mask-repeat-y</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/-webkit-tap-highlight-color">-webkit-tap-highlight-color</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/-webkit-text-fill-color">-webkit-text-fill-color</a></li><li><a href="/en-US/docs/Web/CSS/-webkit-text-security" class="only-in-en-us">-webkit-text-security</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/-webkit-text-stroke">-webkit-text-stroke</a></li><li><a href="/zh-CN/docs/Web/CSS/-webkit-text-stroke-color">-webkit-text-stroke-color</a></li><li><a href="/zh-CN/docs/Web/CSS/-webkit-text-stroke-width">-webkit-text-stroke-width</a></li><li><a href="/zh-CN/docs/Web/CSS/-webkit-touch-callout">-webkit-touch-callout</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/--*">自定义属性（--*）：CSS 变量</a></li><li><a href="/zh-CN/docs/Web/CSS/accent-color">accent-color</a></li><li class="toggle"><details><summary>align-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/align-content">align-content</a></li><li><a href="/zh-CN/docs/Web/CSS/align-items">align-items</a></li><li><a href="/zh-CN/docs/Web/CSS/align-self">align-self</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/alignment-baseline" class="only-in-en-us">alignment-baseline</a></li><li><a href="/zh-CN/docs/Web/CSS/all">all</a></li><li><a href="/en-US/docs/Web/CSS/anchor-name" class="only-in-en-us">anchor-name</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li class="toggle"><details><summary>animation-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/animation">animation</a></li><li><a href="/en-US/docs/Web/CSS/animation-composition" class="only-in-en-us">animation-composition</a></li><li><a href="/zh-CN/docs/Web/CSS/animation-delay">animation-delay</a></li><li><a href="/zh-CN/docs/Web/CSS/animation-direction">animation-direction</a></li><li><a href="/zh-CN/docs/Web/CSS/animation-duration">animation-duration</a></li><li><a href="/zh-CN/docs/Web/CSS/animation-fill-mode">animation-fill-mode</a></li><li><a href="/zh-CN/docs/Web/CSS/animation-iteration-count">animation-iteration-count</a></li><li><a href="/zh-CN/docs/Web/CSS/animation-name">animation-name</a></li><li><a href="/zh-CN/docs/Web/CSS/animation-play-state">animation-play-state</a></li><li><a href="/en-US/docs/Web/CSS/animation-range" class="only-in-en-us">animation-range</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/animation-range-end" class="only-in-en-us">animation-range-end</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/animation-range-start" class="only-in-en-us">animation-range-start</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/animation-timeline" class="only-in-en-us">animation-timeline</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/animation-timing-function">animation-timing-function</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/appearance">appearance</a></li><li><a href="/zh-CN/docs/Web/CSS/aspect-ratio">aspect-ratio</a></li><li><a href="/zh-CN/docs/Web/CSS/backdrop-filter">backdrop-filter</a></li><li><a href="/zh-CN/docs/Web/CSS/backface-visibility">backface-visibility</a></li><li class="toggle"><details><summary>background-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/background">background</a></li><li><a href="/zh-CN/docs/Web/CSS/background-attachment">background-attachment</a></li><li><a href="/zh-CN/docs/Web/CSS/background-blend-mode">background-blend-mode</a></li><li><a href="/zh-CN/docs/Web/CSS/background-clip">background-clip</a></li><li><a href="/zh-CN/docs/Web/CSS/background-color">background-color</a></li><li><a href="/zh-CN/docs/Web/CSS/background-image">background-image</a></li><li><a href="/zh-CN/docs/Web/CSS/background-origin">background-origin</a></li><li><a href="/zh-CN/docs/Web/CSS/background-position">background-position</a></li><li><a href="/zh-CN/docs/Web/CSS/background-position-x">background-position-x</a></li><li><a href="/zh-CN/docs/Web/CSS/background-position-y">background-position-y</a></li><li><a href="/zh-CN/docs/Web/CSS/background-repeat">background-repeat</a></li><li><a href="/zh-CN/docs/Web/CSS/background-size">background-size</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/block-size">block-size</a></li><li class="toggle"><details><summary>border-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/border">border</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block">border-block</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-color">border-block-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-end">border-block-end</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-end-color">border-block-end-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-end-style">border-block-end-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-end-width">border-block-end-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-start">border-block-start</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-start-color">border-block-start-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-start-style">border-block-start-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-start-width">border-block-start-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-style">border-block-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-block-width">border-block-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-bottom">border-bottom</a></li><li><a href="/zh-CN/docs/Web/CSS/border-bottom-color">border-bottom-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-bottom-left-radius">border-bottom-left-radius</a></li><li><a href="/en-US/docs/Web/CSS/border-bottom-right-radius" class="only-in-en-us">border-bottom-right-radius</a></li><li><a href="/zh-CN/docs/Web/CSS/border-bottom-style">border-bottom-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-bottom-width">border-bottom-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-collapse">border-collapse</a></li><li><a href="/zh-CN/docs/Web/CSS/border-color">border-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-end-end-radius">border-end-end-radius</a></li><li><a href="/zh-CN/docs/Web/CSS/border-end-start-radius">border-end-start-radius</a></li><li><a href="/zh-CN/docs/Web/CSS/border-image">border-image</a></li><li><a href="/zh-CN/docs/Web/CSS/border-image-outset">border-image-outset</a></li><li><a href="/zh-CN/docs/Web/CSS/border-image-repeat">border-image-repeat</a></li><li><a href="/zh-CN/docs/Web/CSS/border-image-slice">border-image-slice</a></li><li><a href="/zh-CN/docs/Web/CSS/border-image-source">border-image-source</a></li><li><a href="/zh-CN/docs/Web/CSS/border-image-width">border-image-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline">border-inline</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-color">border-inline-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-end">border-inline-end</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-end-color">border-inline-end-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-end-style">border-inline-end-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-end-width">border-inline-end-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-start">border-inline-start</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-start-color">border-inline-start-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-start-style">border-inline-start-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-start-width">border-inline-start-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-style">border-inline-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-inline-width">border-inline-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-left">border-left</a></li><li><a href="/zh-CN/docs/Web/CSS/border-left-color">border-left-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-left-style">border-left-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-left-width">border-left-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-radius">border-radius</a></li><li><a href="/zh-CN/docs/Web/CSS/border-right">border-right</a></li><li><a href="/zh-CN/docs/Web/CSS/border-right-color">border-right-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-right-style">border-right-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-right-width">border-right-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-spacing">border-spacing</a></li><li><a href="/zh-CN/docs/Web/CSS/border-start-end-radius">border-start-end-radius</a></li><li><a href="/zh-CN/docs/Web/CSS/border-start-start-radius">border-start-start-radius</a></li><li><a href="/zh-CN/docs/Web/CSS/border-style">border-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-top">border-top</a></li><li><a href="/zh-CN/docs/Web/CSS/border-top-color">border-top-color</a></li><li><a href="/zh-CN/docs/Web/CSS/border-top-left-radius">border-top-left-radius</a></li><li><a href="/zh-CN/docs/Web/CSS/border-top-right-radius">border-top-right-radius</a></li><li><a href="/zh-CN/docs/Web/CSS/border-top-style">border-top-style</a></li><li><a href="/zh-CN/docs/Web/CSS/border-top-width">border-top-width</a></li><li><a href="/zh-CN/docs/Web/CSS/border-width">border-width</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/bottom">bottom</a></li><li class="toggle"><details><summary>box-*</summary><ol><li><a href="/en-US/docs/Web/CSS/box-align" class="only-in-en-us">box-align</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/box-decoration-break">box-decoration-break</a></li><li><a href="/en-US/docs/Web/CSS/box-direction" class="only-in-en-us">box-direction</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-flex" class="only-in-en-us">box-flex</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-flex-group" class="only-in-en-us">box-flex-group</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-lines" class="only-in-en-us">box-lines</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-ordinal-group" class="only-in-en-us">box-ordinal-group</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/box-orient">box-orient</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/box-pack" class="only-in-en-us">box-pack</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/box-shadow">box-shadow</a></li><li><a href="/zh-CN/docs/Web/CSS/box-sizing">box-sizing</a></li></ol></details></li><li class="toggle"><details><summary>break-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/break-after">break-after</a></li><li><a href="/en-US/docs/Web/CSS/break-before" class="only-in-en-us">break-before</a></li><li><a href="/zh-CN/docs/Web/CSS/break-inside">break-inside</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/caption-side">caption-side</a></li><li><a href="/zh-CN/docs/Web/CSS/caret-color">caret-color</a></li><li><a href="/zh-CN/docs/Web/CSS/clear">clear</a></li><li class="toggle"><details><summary>clip-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/clip">clip</a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/clip-path">clip-path</a></li><li><a href="/en-US/docs/Web/CSS/clip-rule" class="only-in-en-us">clip-rule</a></li></ol></details></li><li class="toggle"><details><summary>color-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/color">color</a></li><li><a href="/en-US/docs/Web/CSS/color-interpolation" class="only-in-en-us">color-interpolation</a></li><li><a href="/en-US/docs/Web/CSS/color-interpolation-filters" class="only-in-en-us">color-interpolation-filters</a></li><li><a href="/zh-CN/docs/Web/CSS/color-scheme">color-scheme</a></li></ol></details></li><li class="toggle"><details><summary>column-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/column-count">column-count</a></li><li><a href="/zh-CN/docs/Web/CSS/column-fill">column-fill</a></li><li><a href="/zh-CN/docs/Web/CSS/column-gap">column-gap</a></li><li><a href="/zh-CN/docs/Web/CSS/column-rule">column-rule</a></li><li><a href="/zh-CN/docs/Web/CSS/column-rule-color">column-rule-color</a></li><li><a href="/zh-CN/docs/Web/CSS/column-rule-style">column-rule-style</a></li><li><a href="/zh-CN/docs/Web/CSS/column-rule-width">column-rule-width</a></li><li><a href="/zh-CN/docs/Web/CSS/column-span">column-span</a></li><li><a href="/en-US/docs/Web/CSS/column-width" class="only-in-en-us">column-width</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/columns">columns</a></li><li class="toggle"><details><summary>contain-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/contain">contain</a></li><li><a href="/zh-CN/docs/Web/CSS/contain-intrinsic-block-size">contain-intrinsic-block-size</a></li><li><a href="/zh-CN/docs/Web/CSS/contain-intrinsic-height">contain-intrinsic-height</a></li><li><a href="/zh-CN/docs/Web/CSS/contain-intrinsic-inline-size">contain-intrinsic-inline-size</a></li><li><a href="/zh-CN/docs/Web/CSS/contain-intrinsic-size">contain-intrinsic-size</a></li><li><a href="/zh-CN/docs/Web/CSS/contain-intrinsic-width">contain-intrinsic-width</a></li></ol></details></li><li class="toggle"><details><summary>container-*</summary><ol><li><a href="/en-US/docs/Web/CSS/container" class="only-in-en-us">container</a></li><li><a href="/en-US/docs/Web/CSS/container-name" class="only-in-en-us">container-name</a></li><li><a href="/en-US/docs/Web/CSS/container-type" class="only-in-en-us">container-type</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/content">content</a></li><li><a href="/zh-CN/docs/Web/CSS/content-visibility">content-visibility</a></li><li class="toggle"><details><summary>counter-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/counter-increment">counter-increment</a></li><li><a href="/zh-CN/docs/Web/CSS/counter-reset">counter-reset</a></li><li><a href="/zh-CN/docs/Web/CSS/counter-set">counter-set</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/cursor">cursor</a></li><li><a href="/en-US/docs/Web/CSS/cx" class="only-in-en-us">cx</a></li><li><a href="/en-US/docs/Web/CSS/cy" class="only-in-en-us">cy</a></li><li><a href="/en-US/docs/Web/CSS/d" class="only-in-en-us">d</a></li><li><a href="/zh-CN/docs/Web/CSS/direction">direction</a></li><li><a href="/zh-CN/docs/Web/CSS/display">display</a></li><li><a href="/en-US/docs/Web/CSS/dominant-baseline" class="only-in-en-us">dominant-baseline</a></li><li><a href="/zh-CN/docs/Web/CSS/empty-cells">empty-cells</a></li><li><a href="/en-US/docs/Web/CSS/field-sizing" class="only-in-en-us">field-sizing</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li class="toggle"><details><summary>fill-*</summary><ol><li><a href="/en-US/docs/Web/CSS/fill" class="only-in-en-us">fill</a></li><li><a href="/en-US/docs/Web/CSS/fill-opacity" class="only-in-en-us">fill-opacity</a></li><li><a href="/en-US/docs/Web/CSS/fill-rule" class="only-in-en-us">fill-rule</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/filter">filter</a></li><li class="toggle"><details><summary>flex-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/flex">flex</a></li><li><a href="/zh-CN/docs/Web/CSS/flex-basis">flex-basis</a></li><li><a href="/zh-CN/docs/Web/CSS/flex-direction">flex-direction</a></li><li><a href="/zh-CN/docs/Web/CSS/flex-flow">flex-flow</a></li><li><a href="/zh-CN/docs/Web/CSS/flex-grow">flex-grow</a></li><li><a href="/zh-CN/docs/Web/CSS/flex-shrink">flex-shrink</a></li><li><a href="/zh-CN/docs/Web/CSS/flex-wrap">flex-wrap</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/float">float</a></li><li><a href="/en-US/docs/Web/CSS/flood-color" class="only-in-en-us">flood-color</a></li><li><a href="/en-US/docs/Web/CSS/flood-opacity" class="only-in-en-us">flood-opacity</a></li><li class="toggle"><details><summary>font-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/font">font</a></li><li><a href="/zh-CN/docs/Web/CSS/font-family">font-family</a></li><li><a href="/zh-CN/docs/Web/CSS/font-feature-settings">font-feature-settings</a></li><li><a href="/zh-CN/docs/Web/CSS/font-kerning">font-kerning</a></li><li><a href="/zh-CN/docs/Web/CSS/font-language-override">font-language-override</a></li><li><a href="/en-US/docs/Web/CSS/font-optical-sizing" class="only-in-en-us">font-optical-sizing</a></li><li><a href="/zh-CN/docs/Web/CSS/font-palette">font-palette</a></li><li><a href="/zh-CN/docs/Web/CSS/font-size">font-size</a></li><li><a href="/zh-CN/docs/Web/CSS/font-size-adjust">font-size-adjust</a></li><li><a href="/zh-CN/docs/Web/CSS/font-smooth">font-smooth</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/font-stretch">font-stretch</a></li><li><a href="/zh-CN/docs/Web/CSS/font-style">font-style</a></li><li><a href="/zh-CN/docs/Web/CSS/font-synthesis">font-synthesis</a></li><li><a href="/en-US/docs/Web/CSS/font-synthesis-position" class="only-in-en-us">font-synthesis-position</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/font-synthesis-small-caps" class="only-in-en-us">font-synthesis-small-caps</a></li><li><a href="/en-US/docs/Web/CSS/font-synthesis-style" class="only-in-en-us">font-synthesis-style</a></li><li><a href="/en-US/docs/Web/CSS/font-synthesis-weight" class="only-in-en-us">font-synthesis-weight</a></li><li><a href="/zh-CN/docs/Web/CSS/font-variant">font-variant</a></li><li><a href="/zh-CN/docs/Web/CSS/font-variant-alternates">font-variant-alternates</a></li><li><a href="/zh-CN/docs/Web/CSS/font-variant-caps">font-variant-caps</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-east-asian" class="only-in-en-us">font-variant-east-asian</a></li><li><a href="/en-US/docs/Web/CSS/font-variant-emoji" class="only-in-en-us">font-variant-emoji</a></li><li><a href="/zh-CN/docs/Web/CSS/font-variant-ligatures">font-variant-ligatures</a></li><li><a href="/zh-CN/docs/Web/CSS/font-variant-numeric">font-variant-numeric</a></li><li><a href="/zh-CN/docs/Web/CSS/font-variant-position">font-variant-position</a></li><li><a href="/zh-CN/docs/Web/CSS/font-variation-settings">font-variation-settings</a></li><li><a href="/zh-CN/docs/Web/CSS/font-weight">font-weight</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/forced-color-adjust">forced-color-adjust</a></li><li><a href="/zh-CN/docs/Web/CSS/gap">gap</a></li><li class="toggle"><details><summary>grid-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/grid">grid</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-area">grid-area</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-column">grid-column</a></li><li><a href="/en-US/docs/Web/CSS/grid-column-end" class="only-in-en-us">grid-column-end</a></li><li><a href="/en-US/docs/Web/CSS/grid-column-start" class="only-in-en-us">grid-column-start</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-row">grid-row</a></li><li><a href="/en-US/docs/Web/CSS/grid-row-end" class="only-in-en-us">grid-row-end</a></li><li><a href="/en-US/docs/Web/CSS/grid-row-start" class="only-in-en-us">grid-row-start</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-template">grid-template</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li><li><a href="/zh-CN/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/hanging-punctuation">hanging-punctuation</a></li><li><a href="/zh-CN/docs/Web/CSS/height">height</a></li><li><a href="/en-US/docs/Web/CSS/hyphenate-character" class="only-in-en-us">hyphenate-character</a></li><li><a href="/en-US/docs/Web/CSS/hyphenate-limit-chars" class="only-in-en-us">hyphenate-limit-chars</a></li><li><a href="/zh-CN/docs/Web/CSS/hyphens">hyphens</a></li><li class="toggle"><details><summary>image-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/image-orientation">image-orientation</a></li><li><a href="/zh-CN/docs/Web/CSS/image-rendering">image-rendering</a></li><li><a href="/en-US/docs/Web/CSS/image-resolution" class="only-in-en-us">image-resolution</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/initial-letter">initial-letter</a></li><li><a href="/zh-CN/docs/Web/CSS/inline-size">inline-size</a></li><li class="toggle"><details><summary>inset-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/inset">inset</a></li><li><a href="/zh-CN/docs/Web/CSS/inset-block">inset-block</a></li><li><a href="/zh-CN/docs/Web/CSS/inset-block-end">inset-block-end</a></li><li><a href="/zh-CN/docs/Web/CSS/inset-block-start">inset-block-start</a></li><li><a href="/zh-CN/docs/Web/CSS/inset-inline">inset-inline</a></li><li><a href="/zh-CN/docs/Web/CSS/inset-inline-end">inset-inline-end</a></li><li><a href="/zh-CN/docs/Web/CSS/inset-inline-start">inset-inline-start</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/interpolate-size" class="only-in-en-us">interpolate-size</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/isolation">isolation</a></li><li class="toggle"><details><summary>justify-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/justify-content">justify-content</a></li><li><a href="/zh-CN/docs/Web/CSS/justify-items">justify-items</a></li><li><a href="/zh-CN/docs/Web/CSS/justify-self">justify-self</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/left">left</a></li><li><a href="/zh-CN/docs/Web/CSS/letter-spacing">letter-spacing</a></li><li><a href="/en-US/docs/Web/CSS/lighting-color" class="only-in-en-us">lighting-color</a></li><li class="toggle"><details><summary>line-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/line-break">line-break</a></li><li><a href="/zh-CN/docs/Web/CSS/line-clamp">line-clamp</a></li><li><a href="/zh-CN/docs/Web/CSS/line-height">line-height</a></li><li><a href="/en-US/docs/Web/CSS/line-height-step" class="only-in-en-us">line-height-step</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>list-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/list-style">list-style</a></li><li><a href="/zh-CN/docs/Web/CSS/list-style-image">list-style-image</a></li><li><a href="/zh-CN/docs/Web/CSS/list-style-position">list-style-position</a></li><li><a href="/zh-CN/docs/Web/CSS/list-style-type">list-style-type</a></li></ol></details></li><li class="toggle"><details><summary>margin-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/margin">margin</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-block">margin-block</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-block-end">margin-block-end</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-block-start">margin-block-start</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-bottom">margin-bottom</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-inline">margin-inline</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-inline-end">margin-inline-end</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-inline-start">margin-inline-start</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-left">margin-left</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-right">margin-right</a></li><li><a href="/zh-CN/docs/Web/CSS/margin-top">margin-top</a></li><li><a href="/en-US/docs/Web/CSS/margin-trim" class="only-in-en-us">margin-trim</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>marker-*</summary><ol><li><a href="/en-US/docs/Web/CSS/marker" class="only-in-en-us">marker</a></li><li><a href="/en-US/docs/Web/CSS/marker-end" class="only-in-en-us">marker-end</a></li><li><a href="/en-US/docs/Web/CSS/marker-mid" class="only-in-en-us">marker-mid</a></li><li><a href="/en-US/docs/Web/CSS/marker-start" class="only-in-en-us">marker-start</a></li></ol></details></li><li class="toggle"><details><summary>mask-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/mask">mask</a></li><li><a href="/zh-CN/docs/Web/CSS/mask-border">mask-border</a></li><li><a href="/zh-CN/docs/Web/CSS/mask-border-mode">mask-border-mode</a></li><li><a href="/en-US/docs/Web/CSS/mask-border-outset" class="only-in-en-us">mask-border-outset</a></li><li><a href="/zh-CN/docs/Web/CSS/mask-border-repeat">mask-border-repeat</a></li><li><a href="/zh-CN/docs/Web/CSS/mask-border-slice">mask-border-slice</a></li><li><a href="/en-US/docs/Web/CSS/mask-border-source" class="only-in-en-us">mask-border-source</a></li><li><a href="/zh-CN/docs/Web/CSS/mask-border-width">mask-border-width</a></li><li><a href="/en-US/docs/Web/CSS/mask-clip" class="only-in-en-us">mask-clip</a></li><li><a href="/en-US/docs/Web/CSS/mask-composite" class="only-in-en-us">mask-composite</a></li><li><a href="/zh-CN/docs/Web/CSS/mask-image">mask-image</a></li><li><a href="/zh-CN/docs/Web/CSS/mask-mode">mask-mode</a></li><li><a href="/en-US/docs/Web/CSS/mask-origin" class="only-in-en-us">mask-origin</a></li><li><a href="/en-US/docs/Web/CSS/mask-position" class="only-in-en-us">mask-position</a></li><li><a href="/zh-CN/docs/Web/CSS/mask-repeat">mask-repeat</a></li><li><a href="/en-US/docs/Web/CSS/mask-size" class="only-in-en-us">mask-size</a></li><li><a href="/en-US/docs/Web/CSS/mask-type" class="only-in-en-us">mask-type</a></li></ol></details></li><li class="toggle"><details><summary>math-*</summary><ol><li><a href="/en-US/docs/Web/CSS/math-depth" class="only-in-en-us">math-depth</a></li><li><a href="/en-US/docs/Web/CSS/math-shift" class="only-in-en-us">math-shift</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/math-style" class="only-in-en-us">math-style</a></li></ol></details></li><li class="toggle"><details><summary>max-*</summary><ol><li><a href="/en-US/docs/Web/CSS/max-block-size" class="only-in-en-us">max-block-size</a></li><li><a href="/zh-CN/docs/Web/CSS/max-height">max-height</a></li><li><a href="/zh-CN/docs/Web/CSS/max-inline-size">max-inline-size</a></li><li><a href="/zh-CN/docs/Web/CSS/max-width">max-width</a></li></ol></details></li><li class="toggle"><details><summary>min-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/min-block-size">min-block-size</a></li><li><a href="/zh-CN/docs/Web/CSS/min-height">min-height</a></li><li><a href="/zh-CN/docs/Web/CSS/min-inline-size">min-inline-size</a></li><li><a href="/zh-CN/docs/Web/CSS/min-width">min-width</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/mix-blend-mode">mix-blend-mode</a></li><li><a href="/zh-CN/docs/Web/CSS/object-fit">object-fit</a></li><li><a href="/zh-CN/docs/Web/CSS/object-position">object-position</a></li><li class="toggle"><details><summary>offset-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/offset">offset</a></li><li><a href="/en-US/docs/Web/CSS/offset-anchor" class="only-in-en-us">offset-anchor</a></li><li><a href="/en-US/docs/Web/CSS/offset-distance" class="only-in-en-us">offset-distance</a></li><li><a href="/en-US/docs/Web/CSS/offset-path" class="only-in-en-us">offset-path</a></li><li><a href="/en-US/docs/Web/CSS/offset-position" class="only-in-en-us">offset-position</a></li><li><a href="/en-US/docs/Web/CSS/offset-rotate" class="only-in-en-us">offset-rotate</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/opacity">opacity</a></li><li><a href="/zh-CN/docs/Web/CSS/order">order</a></li><li><a href="/en-US/docs/Web/CSS/orphans" class="only-in-en-us">orphans</a></li><li class="toggle"><details><summary>outline-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/outline">outline</a></li><li><a href="/zh-CN/docs/Web/CSS/outline-color">outline-color</a></li><li><a href="/zh-CN/docs/Web/CSS/outline-offset">outline-offset</a></li><li><a href="/zh-CN/docs/Web/CSS/outline-style">outline-style</a></li><li><a href="/zh-CN/docs/Web/CSS/outline-width">outline-width</a></li></ol></details></li><li class="toggle"><details><summary>overflow-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/overflow">overflow</a></li><li><a href="/zh-CN/docs/Web/CSS/overflow-anchor">overflow-anchor</a></li><li><a href="/zh-CN/docs/Web/CSS/overflow-block">overflow-block</a></li><li><a href="/en-US/docs/Web/CSS/overflow-clip-margin" class="only-in-en-us">overflow-clip-margin</a></li><li><a href="/zh-CN/docs/Web/CSS/overflow-inline">overflow-inline</a></li><li><a href="/zh-CN/docs/Web/CSS/overflow-wrap">overflow-wrap</a></li><li><a href="/zh-CN/docs/Web/CSS/overflow-x">overflow-x</a></li><li><a href="/zh-CN/docs/Web/CSS/overflow-y">overflow-y</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/overlay" class="only-in-en-us">overlay</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li class="toggle"><details><summary>overscroll-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/overscroll-behavior">overscroll-behavior</a></li><li><a href="/en-US/docs/Web/CSS/overscroll-behavior-block" class="only-in-en-us">overscroll-behavior-block</a></li><li><a href="/en-US/docs/Web/CSS/overscroll-behavior-inline" class="only-in-en-us">overscroll-behavior-inline</a></li><li><a href="/zh-CN/docs/Web/CSS/overscroll-behavior-x">overscroll-behavior-x</a></li><li><a href="/zh-CN/docs/Web/CSS/overscroll-behavior-y">overscroll-behavior-y</a></li></ol></details></li><li class="toggle"><details><summary>padding-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/padding">padding</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-block">padding-block</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-block-end">padding-block-end</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-block-start">padding-block-start</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-bottom">padding-bottom</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-inline">padding-inline</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-inline-end">padding-inline-end</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-inline-start">padding-inline-start</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-left">padding-left</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-right">padding-right</a></li><li><a href="/zh-CN/docs/Web/CSS/padding-top">padding-top</a></li></ol></details></li><li class="toggle"><details><summary>page-*</summary><ol><li><a href="/en-US/docs/Web/CSS/page" class="only-in-en-us">page</a></li><li><a href="/zh-CN/docs/Web/CSS/page-break-after">page-break-after</a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/page-break-before" class="only-in-en-us">page-break-before</a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/page-break-inside" class="only-in-en-us">page-break-inside</a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/paint-order">paint-order</a></li><li><a href="/zh-CN/docs/Web/CSS/perspective">perspective</a></li><li><a href="/zh-CN/docs/Web/CSS/perspective-origin">perspective-origin</a></li><li class="toggle"><details><summary>place-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/place-content">place-content</a></li><li><a href="/zh-CN/docs/Web/CSS/place-items">place-items</a></li><li><a href="/en-US/docs/Web/CSS/place-self" class="only-in-en-us">place-self</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/pointer-events">pointer-events</a></li><li class="toggle"><details><summary>position-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/position">position</a></li><li><a href="/en-US/docs/Web/CSS/position-anchor" class="only-in-en-us">position-anchor</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-area" class="only-in-en-us">position-area</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-try" class="only-in-en-us">position-try</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-try-fallbacks" class="only-in-en-us">position-try-fallbacks</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-try-order" class="only-in-en-us">position-try-order</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/position-visibility" class="only-in-en-us">position-visibility</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/print-color-adjust">print-color-adjust</a></li><li><a href="/zh-CN/docs/Web/CSS/quotes">quotes</a></li><li><a href="/en-US/docs/Web/CSS/r" class="only-in-en-us">r</a></li><li><a href="/zh-CN/docs/Web/CSS/resize">resize</a></li><li><a href="/zh-CN/docs/Web/CSS/right">right</a></li><li><a href="/zh-CN/docs/Web/CSS/rotate">rotate</a></li><li><a href="/zh-CN/docs/Web/CSS/row-gap">row-gap</a></li><li><a href="/en-US/docs/Web/CSS/ruby-align" class="only-in-en-us">ruby-align</a></li><li><a href="/en-US/docs/Web/CSS/ruby-position" class="only-in-en-us">ruby-position</a></li><li><a href="/en-US/docs/Web/CSS/rx" class="only-in-en-us">rx</a></li><li><a href="/en-US/docs/Web/CSS/ry" class="only-in-en-us">ry</a></li><li><a href="/zh-CN/docs/Web/CSS/scale">scale</a></li><li class="toggle"><details><summary>scroll-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/scroll-behavior">scroll-behavior</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin">scroll-margin</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-block">scroll-margin-block</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-block-end">scroll-margin-block-end</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-block-start">scroll-margin-block-start</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-bottom">scroll-margin-bottom</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-inline">scroll-margin-inline</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-inline-end">scroll-margin-inline-end</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-inline-start">scroll-margin-inline-start</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-left">scroll-margin-left</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-right">scroll-margin-right</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-margin-top">scroll-margin-top</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding">scroll-padding</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-block">scroll-padding-block</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-block-end">scroll-padding-block-end</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-block-start">scroll-padding-block-start</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-bottom">scroll-padding-bottom</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-inline">scroll-padding-inline</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-inline-end">scroll-padding-inline-end</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-inline-start">scroll-padding-inline-start</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-left">scroll-padding-left</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-right">scroll-padding-right</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-padding-top">scroll-padding-top</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-snap-align">scroll-snap-align</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-snap-stop">scroll-snap-stop</a></li><li><a href="/zh-CN/docs/Web/CSS/scroll-snap-type">scroll-snap-type</a></li><li><a href="/en-US/docs/Web/CSS/scroll-timeline" class="only-in-en-us">scroll-timeline</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/scroll-timeline-axis" class="only-in-en-us">scroll-timeline-axis</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/scroll-timeline-name" class="only-in-en-us">scroll-timeline-name</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>scrollbar-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/scrollbar-color">scrollbar-color</a></li><li><a href="/en-US/docs/Web/CSS/scrollbar-gutter" class="only-in-en-us">scrollbar-gutter</a></li><li><a href="/zh-CN/docs/Web/CSS/scrollbar-width">scrollbar-width</a></li></ol></details></li><li class="toggle"><details><summary>shape-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/shape-image-threshold">shape-image-threshold</a></li><li><a href="/zh-CN/docs/Web/CSS/shape-margin">shape-margin</a></li><li><a href="/zh-CN/docs/Web/CSS/shape-outside">shape-outside</a></li><li><a href="/en-US/docs/Web/CSS/shape-rendering" class="only-in-en-us">shape-rendering</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/stop-color" class="only-in-en-us">stop-color</a></li><li><a href="/en-US/docs/Web/CSS/stop-opacity" class="only-in-en-us">stop-opacity</a></li><li class="toggle"><details><summary>stroke-*</summary><ol><li><a href="/en-US/docs/Web/CSS/stroke" class="only-in-en-us">stroke</a></li><li><a href="/en-US/docs/Web/CSS/stroke-dasharray" class="only-in-en-us">stroke-dasharray</a></li><li><a href="/en-US/docs/Web/CSS/stroke-dashoffset" class="only-in-en-us">stroke-dashoffset</a></li><li><a href="/en-US/docs/Web/CSS/stroke-linecap" class="only-in-en-us">stroke-linecap</a></li><li><a href="/en-US/docs/Web/CSS/stroke-linejoin" class="only-in-en-us">stroke-linejoin</a></li><li><a href="/en-US/docs/Web/CSS/stroke-miterlimit" class="only-in-en-us">stroke-miterlimit</a></li><li><a href="/en-US/docs/Web/CSS/stroke-opacity" class="only-in-en-us">stroke-opacity</a></li><li><a href="/en-US/docs/Web/CSS/stroke-width" class="only-in-en-us">stroke-width</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/tab-size">tab-size</a></li><li><a href="/zh-CN/docs/Web/CSS/table-layout">table-layout</a></li><li class="toggle"><details><summary>text-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/text-align">text-align</a></li><li><a href="/zh-CN/docs/Web/CSS/text-align-last">text-align-last</a></li><li><a href="/en-US/docs/Web/CSS/text-anchor" class="only-in-en-us">text-anchor</a></li><li><a href="/en-US/docs/Web/CSS/text-combine-upright" class="only-in-en-us">text-combine-upright</a></li><li><a href="/zh-CN/docs/Web/CSS/text-decoration">text-decoration</a></li><li><a href="/zh-CN/docs/Web/CSS/text-decoration-color">text-decoration-color</a></li><li><a href="/zh-CN/docs/Web/CSS/text-decoration-line">text-decoration-line</a></li><li><a href="/zh-CN/docs/Web/CSS/text-decoration-skip">text-decoration-skip</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/text-decoration-skip-ink" class="only-in-en-us">text-decoration-skip-ink</a></li><li><a href="/zh-CN/docs/Web/CSS/text-decoration-style">text-decoration-style</a></li><li><a href="/zh-CN/docs/Web/CSS/text-decoration-thickness">文本装饰线厚度 (粗细)</a></li><li><a href="/zh-CN/docs/Web/CSS/text-emphasis">text-emphasis</a></li><li><a href="/zh-CN/docs/Web/CSS/text-emphasis-color">text-emphasis-color</a></li><li><a href="/zh-CN/docs/Web/CSS/text-emphasis-position">text-emphasis-position</a></li><li><a href="/zh-CN/docs/Web/CSS/text-emphasis-style">text-emphasis-style</a></li><li><a href="/zh-CN/docs/Web/CSS/text-indent">text-indent</a></li><li><a href="/zh-CN/docs/Web/CSS/text-justify">text-justify</a></li><li><a href="/zh-CN/docs/Web/CSS/text-orientation">text-orientation</a></li><li><a href="/zh-CN/docs/Web/CSS/text-overflow">text-overflow</a></li><li><a href="/zh-CN/docs/Web/CSS/text-rendering">文本渲染</a></li><li><a href="/zh-CN/docs/Web/CSS/text-shadow">text-shadow</a></li><li><a href="/zh-CN/docs/Web/CSS/text-size-adjust">text-size-adjust</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/text-spacing-trim" class="only-in-en-us">text-spacing-trim</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/text-transform">text-transform</a></li><li><a href="/zh-CN/docs/Web/CSS/text-underline-offset">text-underline-offset</a></li><li><a href="/zh-CN/docs/Web/CSS/text-underline-position">text-underline-position</a></li><li><a href="/en-US/docs/Web/CSS/text-wrap" class="only-in-en-us">text-wrap</a></li><li><a href="/en-US/docs/Web/CSS/text-wrap-mode" class="only-in-en-us">text-wrap-mode</a></li><li><a href="/en-US/docs/Web/CSS/text-wrap-style" class="only-in-en-us">text-wrap-style</a></li></ol></details></li><li><a href="/en-US/docs/Web/CSS/timeline-scope" class="only-in-en-us">timeline-scope</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/top">top</a></li><li><a href="/zh-CN/docs/Web/CSS/touch-action">touch-action</a></li><li class="toggle"><details><summary>transform-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/transform">transform</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-box">transform-box</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-origin">transform-origin</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-style">transform-style</a></li></ol></details></li><li class="toggle"><details><summary>transition-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/transition">transition</a></li><li><a href="/en-US/docs/Web/CSS/transition-behavior" class="only-in-en-us">transition-behavior</a></li><li><a href="/zh-CN/docs/Web/CSS/transition-delay">transition-delay</a></li><li><a href="/zh-CN/docs/Web/CSS/transition-duration">transition-duration</a></li><li><a href="/zh-CN/docs/Web/CSS/transition-property">transition-property</a></li><li><a href="/zh-CN/docs/Web/CSS/transition-timing-function">transition-timing-function</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/translate">translate</a></li><li><a href="/zh-CN/docs/Web/CSS/unicode-bidi">unicode-bidi</a></li><li><a href="/en-US/docs/Web/CSS/user-modify" class="only-in-en-us">user-modify</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/user-select">user-select</a></li><li><a href="/en-US/docs/Web/CSS/vector-effect" class="only-in-en-us">vector-effect</a></li><li><a href="/zh-CN/docs/Web/CSS/vertical-align">vertical-align</a></li><li class="toggle"><details><summary>view-*</summary><ol><li><a href="/en-US/docs/Web/CSS/view-timeline" class="only-in-en-us">view-timeline</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/view-timeline-axis" class="only-in-en-us">view-timeline-axis</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/view-timeline-inset" class="only-in-en-us">view-timeline-inset</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/view-timeline-name" class="only-in-en-us">view-timeline-name</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/view-transition-name">view-transition-name</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/visibility">visibility</a></li><li><a href="/zh-CN/docs/Web/CSS/white-space">white-space</a></li><li><a href="/en-US/docs/Web/CSS/white-space-collapse" class="only-in-en-us">white-space-collapse</a></li><li><a href="/zh-CN/docs/Web/CSS/widows">widows</a></li><li><a href="/zh-CN/docs/Web/CSS/width">width</a></li><li><a href="/zh-CN/docs/Web/CSS/will-change">will-change</a></li><li><a href="/zh-CN/docs/Web/CSS/word-break">word-break</a></li><li><a href="/zh-CN/docs/Web/CSS/word-spacing">word-spacing</a></li><li><a href="/zh-CN/docs/Web/CSS/writing-mode">writing-mode</a></li><li><a href="/en-US/docs/Web/CSS/x" class="only-in-en-us">x</a></li><li><a href="/en-US/docs/Web/CSS/y" class="only-in-en-us">y</a></li><li><a href="/zh-CN/docs/Web/CSS/z-index">z-index</a></li><li><a href="/en-US/docs/Web/CSS/zoom" class="only-in-en-us">zoom</a></li></ol></details></li><li class="toggle"><details><summary>选择器</summary><ol><li><a href="/zh-CN/docs/Web/CSS/Nesting_selector">& 嵌套选择器</a></li><li><a href="/zh-CN/docs/Web/CSS/Attribute_selectors">属性选择器</a></li><li><a href="/zh-CN/docs/Web/CSS/Class_selectors">类选择器</a></li><li><a href="/zh-CN/docs/Web/CSS/ID_selectors">ID 选择器</a></li><li><a href="/zh-CN/docs/Web/CSS/Type_selectors">类型选择器</a></li><li><a href="/zh-CN/docs/Web/CSS/Universal_selectors">通配选择器</a></li></ol></details></li><li class="toggle"><details><summary>关系选择器</summary><ol><li><a href="/zh-CN/docs/Web/CSS/Child_combinator">子组合器</a></li><li><a href="/zh-CN/docs/Web/CSS/Column_combinator">列组合器</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/Descendant_combinator">后代选择器</a></li><li><a href="/en-US/docs/Web/CSS/Namespace_separator" class="only-in-en-us">Namespace separator</a></li><li><a href="/zh-CN/docs/Web/CSS/Next-sibling_combinator">接续兄弟组合器</a></li><li><a href="/zh-CN/docs/Web/CSS/Selector_list">选择器列表</a></li><li><a href="/zh-CN/docs/Web/CSS/Subsequent-sibling_combinator">后续兄弟选择器</a></li></ol></details></li><li class="toggle"><details><summary>伪类</summary><ol><li class="toggle"><details><summary>:-moz-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/:-moz-broken">:-moz-broken</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/:-moz-drag-over">:-moz-drag-over</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/:-moz-first-node">:-moz-first-node</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-handler-blocked" class="only-in-en-us">:-moz-handler-blocked</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-handler-crashed" class="only-in-en-us">:-moz-handler-crashed</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-handler-disabled" class="only-in-en-us">:-moz-handler-disabled</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-last-node" class="only-in-en-us">:-moz-last-node</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-loading" class="only-in-en-us">:-moz-loading</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-locale-dir_ltr" class="only-in-en-us">:-moz-locale-dir(ltr)</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-locale-dir_rtl" class="only-in-en-us">:-moz-locale-dir(rtl)</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/:-moz-only-whitespace">:blank</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-submit-invalid" class="only-in-en-us">:-moz-submit-invalid</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-suppressed" class="only-in-en-us">:-moz-suppressed</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:-moz-user-disabled" class="only-in-en-us">:-moz-user-disabled</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/:-moz-window-inactive">:-moz-window-inactive</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/:active">:active</a></li><li><a href="/zh-CN/docs/Web/CSS/:any-link">:any-link</a></li><li><a href="/zh-CN/docs/Web/CSS/:autofill">:autofill</a></li><li><a href="/zh-CN/docs/Web/CSS/:blank">:blank</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:buffering" class="only-in-en-us">:buffering</a></li><li><a href="/zh-CN/docs/Web/CSS/:checked">:checked</a></li><li><a href="/en-US/docs/Web/CSS/:current" class="only-in-en-us">:current</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/:default">:default</a></li><li><a href="/zh-CN/docs/Web/CSS/:defined">:defined</a></li><li><a href="/zh-CN/docs/Web/CSS/:dir">:dir()</a></li><li><a href="/zh-CN/docs/Web/CSS/:disabled">:disabled</a></li><li><a href="/zh-CN/docs/Web/CSS/:empty">:empty</a></li><li><a href="/zh-CN/docs/Web/CSS/:enabled">:enabled</a></li><li class="toggle"><details><summary>:first-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/:first">:first</a></li><li><a href="/zh-CN/docs/Web/CSS/:first-child">:first-child</a></li><li><a href="/zh-CN/docs/Web/CSS/:first-of-type">:first-of-type</a></li></ol></details></li><li class="toggle"><details><summary>:focus-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/:focus">:focus</a></li><li><a href="/zh-CN/docs/Web/CSS/:focus-visible">:focus-visible</a></li><li><a href="/zh-CN/docs/Web/CSS/:focus-within">:focus-within</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/:fullscreen">:fullscreen</a></li><li><a href="/en-US/docs/Web/CSS/:future" class="only-in-en-us">:future</a></li><li><a href="/en-US/docs/Web/CSS/:has-slotted" class="only-in-en-us">:has-slotted</a></li><li><a href="/zh-CN/docs/Web/CSS/:has">:has()</a></li><li><a href="/zh-CN/docs/Web/CSS/:host">:host</a></li><li><a href="/zh-CN/docs/Web/CSS/:host-context">:host-context()</a></li><li><a href="/zh-CN/docs/Web/CSS/:host_function">:host()</a></li><li><a href="/zh-CN/docs/Web/CSS/:hover">:hover</a></li><li><a href="/zh-CN/docs/Web/CSS/:in-range">:in-range</a></li><li><a href="/zh-CN/docs/Web/CSS/:indeterminate">:indeterminate</a></li><li><a href="/zh-CN/docs/Web/CSS/:invalid">:invalid</a></li><li><a href="/zh-CN/docs/Web/CSS/:is">:is()</a></li><li><a href="/zh-CN/docs/Web/CSS/:lang">:lang()</a></li><li><a href="/zh-CN/docs/Web/CSS/:last-child">:last-child</a></li><li><a href="/zh-CN/docs/Web/CSS/:last-of-type">:last-of-type</a></li><li><a href="/zh-CN/docs/Web/CSS/:left">:left</a></li><li><a href="/zh-CN/docs/Web/CSS/:link">:link</a></li><li><a href="/en-US/docs/Web/CSS/:local-link" class="only-in-en-us">:local-link</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:modal" class="only-in-en-us">:modal</a></li><li><a href="/en-US/docs/Web/CSS/:muted" class="only-in-en-us">:muted</a></li><li><a href="/zh-CN/docs/Web/CSS/:not">:not()</a></li><li class="toggle"><details><summary>:nth-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/:nth-child">:nth-child()</a></li><li><a href="/zh-CN/docs/Web/CSS/:nth-last-child">:nth-last-child</a></li><li><a href="/zh-CN/docs/Web/CSS/:nth-last-of-type">:nth-last-of-type</a></li><li><a href="/zh-CN/docs/Web/CSS/:nth-of-type">:nth-of-type</a></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/:only-child">:only-child</a></li><li><a href="/zh-CN/docs/Web/CSS/:only-of-type">:only-of-type</a></li><li><a href="/en-US/docs/Web/CSS/:open" class="only-in-en-us">:open</a></li><li><a href="/zh-CN/docs/Web/CSS/:optional">:optional</a></li><li><a href="/zh-CN/docs/Web/CSS/:out-of-range">:out-of-range</a></li><li><a href="/en-US/docs/Web/CSS/:past" class="only-in-en-us">:past</a></li><li><a href="/zh-CN/docs/Web/CSS/:paused">:paused</a></li><li><a href="/zh-CN/docs/Web/CSS/:picture-in-picture">:picture-in-picture</a></li><li><a href="/zh-CN/docs/Web/CSS/:placeholder-shown">:placeholder-shown</a></li><li><a href="/zh-CN/docs/Web/CSS/:playing">:playing</a></li><li><a href="/en-US/docs/Web/CSS/:popover-open" class="only-in-en-us">:popover-open</a></li><li><a href="/zh-CN/docs/Web/CSS/:read-only">:read-only</a></li><li><a href="/zh-CN/docs/Web/CSS/:read-write">:read-write</a></li><li><a href="/zh-CN/docs/Web/CSS/:required">:required</a></li><li><a href="/zh-CN/docs/Web/CSS/:right">:right</a></li><li><a href="/zh-CN/docs/Web/CSS/:root">:root</a></li><li><a href="/zh-CN/docs/Web/CSS/:scope">:scope</a></li><li><a href="/zh-CN/docs/Web/CSS/:seeking">:seeking</a></li><li><a href="/en-US/docs/Web/CSS/:stalled" class="only-in-en-us">:stalled</a></li><li><a href="/en-US/docs/Web/CSS/:state" class="only-in-en-us">:state()</a></li><li><a href="/zh-CN/docs/Web/CSS/:target">:target</a></li><li><a href="/en-US/docs/Web/CSS/:target-within" class="only-in-en-us">:target-within</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/:user-invalid" class="only-in-en-us">:user-invalid</a></li><li><a href="/en-US/docs/Web/CSS/:user-valid" class="only-in-en-us">:user-valid</a></li><li><a href="/zh-CN/docs/Web/CSS/:valid">:valid</a></li><li><a href="/zh-CN/docs/Web/CSS/:visited">:visited</a></li><li><a href="/zh-CN/docs/Web/CSS/:volume-locked">:volume-locked</a></li><li><a href="/zh-CN/docs/Web/CSS/:where">:where()</a></li></ol></details></li><li class="toggle"><details><summary>伪元素</summary><ol><li class="toggle"><details><summary>::-moz-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/::-moz-color-swatch">::-moz-color-swatch</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-moz-focus-inner">::-moz-focus-inner</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-moz-list-bullet">::-moz-list-bullet</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-moz-list-number">::-moz-list-number</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-meter-bar" class="only-in-en-us">::-moz-meter-bar</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-moz-progress-bar">::-moz-progress-bar</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-moz-range-progress">::-moz-range-progress</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-range-thumb" class="only-in-en-us">::-moz-range-thumb</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-moz-range-track" class="only-in-en-us">::-moz-range-track</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>::-webkit-*</summary><ol><li><a href="/en-US/docs/Web/CSS/::-webkit-inner-spin-button" class="only-in-en-us">::-webkit-inner-spin-button</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-bar" class="only-in-en-us">::-webkit-meter-bar</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-even-less-good-value" class="only-in-en-us">::-webkit-meter-even-less-good-value</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-inner-element" class="only-in-en-us">::-webkit-meter-inner-element</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-optimum-value" class="only-in-en-us">::-webkit-meter-optimum-value</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-meter-suboptimum-value" class="only-in-en-us">::-webkit-meter-suboptimum-value</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-webkit-progress-bar">::-webkit-progress-bar</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-webkit-progress-inner-element">::-webkit-progress-inner-element</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-webkit-progress-value">::-webkit-progress-value</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-webkit-scrollbar">::-webkit-scrollbar</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-search-cancel-button" class="only-in-en-us">::-webkit-search-cancel-button</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/::-webkit-search-results-button" class="only-in-en-us">::-webkit-search-results-button</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-webkit-slider-runnable-track">::-webkit-slider-runnable-track</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::-webkit-slider-thumb">::-webkit-slider-thumb</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr></li></ol></details></li><li><a href="/zh-CN/docs/Web/CSS/::after">::after</a></li><li><a href="/zh-CN/docs/Web/CSS/::backdrop">::backdrop</a></li><li><a href="/zh-CN/docs/Web/CSS/::before">::before</a></li><li><a href="/zh-CN/docs/Web/CSS/::cue">::cue (:cue)</a></li><li><a href="/en-US/docs/Web/CSS/::details-content" class="only-in-en-us">::details-content</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/::file-selector-button">::file-selector-button</a></li><li><a href="/zh-CN/docs/Web/CSS/::first-letter">::first-letter</a></li><li><a href="/zh-CN/docs/Web/CSS/::first-line">::first-line (:first-line)</a></li><li><a href="/zh-CN/docs/Web/CSS/::grammar-error">::grammar-error</a></li><li><a href="/zh-CN/docs/Web/CSS/::highlight">::highlight()</a></li><li><a href="/zh-CN/docs/Web/CSS/::marker">::marker</a></li><li><a href="/zh-CN/docs/Web/CSS/::part">::part()</a></li><li><a href="/zh-CN/docs/Web/CSS/::placeholder">::placeholder</a></li><li><a href="/zh-CN/docs/Web/CSS/::selection">::selection</a></li><li><a href="/zh-CN/docs/Web/CSS/::slotted">::slotted()</a></li><li><a href="/zh-CN/docs/Web/CSS/::spelling-error">::spelling-error</a></li><li><a href="/zh-CN/docs/Web/CSS/::target-text">::target-text</a></li><li class="toggle"><details><summary>::view-*</summary><ol><li><a href="/zh-CN/docs/Web/CSS/::view-transition">::view-transition</a></li><li><a href="/zh-CN/docs/Web/CSS/::view-transition-group">::view-transition-group</a></li><li><a href="/zh-CN/docs/Web/CSS/::view-transition-image-pair">::view-transition-image-pair</a></li><li><a href="/zh-CN/docs/Web/CSS/::view-transition-new">::view-transition-new</a></li><li><a href="/zh-CN/docs/Web/CSS/::view-transition-old">::view-transition-old</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary>At 规则</summary><ol><li><a href="/zh-CN/docs/Web/CSS/@charset">@charset</a></li><li><a href="/en-US/docs/Web/CSS/@color-profile" class="only-in-en-us">@color-profile</a></li><li><a href="/en-US/docs/Web/CSS/@container" class="only-in-en-us">@container</a></li><li><a href="/zh-CN/docs/Web/CSS/@counter-style">@counter-style</a></li><li><a href="/zh-CN/docs/Web/CSS/@document">@document</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/@font-face">@font-face</a></li><li><a href="/zh-CN/docs/Web/CSS/@font-feature-values">@font-feature-values</a></li><li><a href="/en-US/docs/Web/CSS/@font-palette-values" class="only-in-en-us">@font-palette-values</a></li><li><a href="/zh-CN/docs/Web/CSS/@import">@import</a></li><li><a href="/zh-CN/docs/Web/CSS/@keyframes">@keyframes</a></li><li><a href="/zh-CN/docs/Web/CSS/@layer">@layer</a></li><li><a href="/zh-CN/docs/Web/CSS/@media">@media</a></li><li><a href="/zh-CN/docs/Web/CSS/@namespace">@namespace</a></li><li><a href="/zh-CN/docs/Web/CSS/@page">@page</a></li><li><a href="/en-US/docs/Web/CSS/@position-try" class="only-in-en-us">@position-try</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/@property">@property</a></li><li><a href="/en-US/docs/Web/CSS/@scope" class="only-in-en-us">@scope</a></li><li><a href="/en-US/docs/Web/CSS/@starting-style" class="only-in-en-us">@starting-style</a></li><li><a href="/zh-CN/docs/Web/CSS/@supports">@supports</a></li><li><a href="/en-US/docs/Web/CSS/@view-transition" class="only-in-en-us">@view-transition</a></li></ol></details></li><li class="toggle"><details><summary>函数</summary><ol><li><a href="/zh-CN/docs/Web/CSS/-moz-image-rect">-moz-image-rect</a><abbr class="icon icon-nonstandard" title="非标准。请在使用前检查跨浏览器支持。"> <span class="visually-hidden">非标准</span> </abbr><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/abs" class="only-in-en-us">abs()</a></li><li><a href="/zh-CN/docs/Web/CSS/acos">acos()</a></li><li><a href="/en-US/docs/Web/CSS/anchor-size" class="only-in-en-us">anchor-size()</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/anchor" class="only-in-en-us">anchor()</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/asin">asin()</a></li><li><a href="/zh-CN/docs/Web/CSS/atan">atan()</a></li><li><a href="/zh-CN/docs/Web/CSS/atan2">atan2()</a></li><li><a href="/zh-CN/docs/Web/CSS/attr">attr</a></li><li><a href="/zh-CN/docs/Web/CSS/filter-function/blur">blur()</a></li><li><a href="/zh-CN/docs/Web/CSS/filter-function/brightness">brightness()</a></li><li><a href="/en-US/docs/Web/CSS/calc-size" class="only-in-en-us">calc-size()</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/calc">calc()</a></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape/circle">circle()</a></li><li><a href="/zh-CN/docs/Web/CSS/clamp">clamp()</a></li><li><a href="/zh-CN/docs/Web/CSS/color_value/color-mix">color-mix()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/color" class="only-in-en-us">color()</a></li><li><a href="/zh-CN/docs/Web/CSS/gradient/conic-gradient">conic-gradient()</a></li><li><a href="/zh-CN/docs/Web/CSS/filter-function/contrast">contrast()</a></li><li><a href="/zh-CN/docs/Web/CSS/cos">cos()</a></li><li><a href="/zh-CN/docs/Web/CSS/counter">counter()</a></li><li><a href="/zh-CN/docs/Web/CSS/counters">counters()</a></li><li><a href="/en-US/docs/Web/CSS/cross-fade" class="only-in-en-us">cross-fade()</a></li><li><a href="/en-US/docs/Web/CSS/easing-function/cubic-bezier" class="only-in-en-us">cubic-bezier()</a></li><li><a href="/zh-CN/docs/Web/CSS/color_value/device-cmyk">device-cmyk()</a></li><li><a href="/zh-CN/docs/Web/CSS/filter-function/drop-shadow">drop-shadow()</a></li><li><a href="/zh-CN/docs/Web/CSS/element">element</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape/ellipse">ellipse()</a></li><li><a href="/zh-CN/docs/Web/CSS/env">env()</a></li><li><a href="/zh-CN/docs/Web/CSS/exp">exp()</a></li><li><a href="/zh-CN/docs/Web/CSS/fit-content_function">fit-content()</a></li><li><a href="/zh-CN/docs/Web/CSS/filter-function/grayscale">grayscale()</a></li><li><a href="/zh-CN/docs/Web/CSS/color_value/hsl">hsl()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/hue-rotate" class="only-in-en-us">hue-rotate()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/hwb" class="only-in-en-us">hwb()</a></li><li><a href="/zh-CN/docs/Web/CSS/hypot">hypot()</a></li><li><a href="/en-US/docs/Web/CSS/image/image-set" class="only-in-en-us">image-set()</a></li><li><a href="/en-US/docs/Web/CSS/image/image" class="only-in-en-us">image()</a></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape/inset">inset()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/invert" class="only-in-en-us">invert()</a></li><li><a href="/zh-CN/docs/Web/CSS/color_value/lab">lab()</a></li><li><a href="/en-US/docs/Web/CSS/@import/layer_function" class="only-in-en-us">layer()</a></li><li><a href="/zh-CN/docs/Web/CSS/color_value/lch">lch()</a></li><li><a href="/en-US/docs/Web/CSS/color_value/light-dark" class="only-in-en-us">light-dark()</a></li><li><a href="/zh-CN/docs/Web/CSS/gradient/linear-gradient">linear-gradient()</a></li><li><a href="/en-US/docs/Web/CSS/easing-function/linear" class="only-in-en-us">linear()</a></li><li><a href="/zh-CN/docs/Web/CSS/log">log()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/matrix">matrix()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></li><li><a href="/zh-CN/docs/Web/CSS/max">max()</a></li><li><a href="/zh-CN/docs/Web/CSS/min">min()</a></li><li><a href="/zh-CN/docs/Web/CSS/minmax">minmax()</a></li><li><a href="/en-US/docs/Web/CSS/mod" class="only-in-en-us">mod()</a></li><li><a href="/zh-CN/docs/Web/CSS/color_value/oklab">oklab()</a></li><li><a href="/zh-CN/docs/Web/CSS/color_value/oklch">oklch()</a></li><li><a href="/zh-CN/docs/Web/CSS/filter-function/opacity">opacity()</a></li><li><a href="/en-US/docs/Web/CSS/image/paint" class="only-in-en-us">paint()</a></li><li><a href="/en-US/docs/Web/CSS/font-palette/palette-mix" class="only-in-en-us">palette-mix()</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape/path">path()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/perspective">perspective()</a></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape/polygon">polygon()</a></li><li><a href="/zh-CN/docs/Web/CSS/pow">pow()</a></li><li><a href="/zh-CN/docs/Web/CSS/gradient/radial-gradient">radial-gradient()</a></li><li><a href="/en-US/docs/Web/CSS/ray" class="only-in-en-us">ray()</a></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape/rect">rect()</a></li><li><a href="/en-US/docs/Web/CSS/rem" class="only-in-en-us">rem()</a></li><li><a href="/zh-CN/docs/Web/CSS/repeat">repeat()</a></li><li><a href="/en-US/docs/Web/CSS/gradient/repeating-conic-gradient" class="only-in-en-us">repeating-conic-gradient()</a></li><li><a href="/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient">repeating-linear-gradient()</a></li><li><a href="/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient">repeating-radial-gradient()</a></li><li><a href="/zh-CN/docs/Web/CSS/color_value/rgb">rgb()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/rotate">rotate()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/rotateX">rotateX()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/rotateY">rotateY()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></li><li><a href="/en-US/docs/Web/CSS/round" class="only-in-en-us">round()</a></li><li><a href="/en-US/docs/Web/CSS/filter-function/saturate" class="only-in-en-us">saturate()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/scale">scale()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/scale3d" class="only-in-en-us">scale3d()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/scaleX">scaleX()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/scaleY" class="only-in-en-us">scaleY()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/scaleZ" class="only-in-en-us">scaleZ()</a></li><li><a href="/en-US/docs/Web/CSS/animation-timeline/scroll" class="only-in-en-us">scroll()</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/filter-function/sepia" class="only-in-en-us">sepia()</a></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape/shape">shape()</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/en-US/docs/Web/CSS/sign" class="only-in-en-us">sign()</a></li><li><a href="/zh-CN/docs/Web/CSS/sin">sin()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/skew">skew()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/skewX">skewX()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/skewY" class="only-in-en-us">skewY()</a></li><li><a href="/zh-CN/docs/Web/CSS/sqrt">sqrt()</a></li><li><a href="/en-US/docs/Web/CSS/easing-function/steps" class="only-in-en-us">steps()</a></li><li><a href="/en-US/docs/Web/CSS/symbols" class="only-in-en-us">symbols()</a></li><li><a href="/zh-CN/docs/Web/CSS/tan">tan()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/translate">translate()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/translate3d">translate3d()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/translateX">translateX()</a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function/translateY">translateY()</a></li><li><a href="/en-US/docs/Web/CSS/transform-function/translateZ" class="only-in-en-us">translateZ()</a></li><li><a href="/zh-CN/docs/Web/CSS/url_function">url()</a></li><li><a href="/zh-CN/docs/Web/CSS/var">var()</a></li><li><a href="/en-US/docs/Web/CSS/animation-timeline/view" class="only-in-en-us">view()</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape/xywh">xywh()</a></li></ol></details></li><li class="toggle"><details><summary>类型</summary><ol><li><a href="/zh-CN/docs/Web/CSS/absolute-size"><absolute-size></a></li><li><a href="/zh-CN/docs/Web/CSS/alpha-value"><alpha-value></a></li><li><a href="/zh-CN/docs/Web/CSS/angle-percentage"><angle-percentage></a></li><li><a href="/zh-CN/docs/Web/CSS/angle"><angle></a></li><li><a href="/en-US/docs/Web/CSS/baseline-position" class="only-in-en-us"><baseline-position></a></li><li><a href="/zh-CN/docs/Web/CSS/basic-shape"><basic-shape></a></li><li><a href="/zh-CN/docs/Web/CSS/blend-mode"><blend-mode></a></li><li><a href="/zh-CN/docs/Web/CSS/box-edge"><box-edge></a></li><li><a href="/en-US/docs/Web/CSS/calc-keyword" class="only-in-en-us"><calc-keyword></a></li><li><a href="/en-US/docs/Web/CSS/calc-sum" class="only-in-en-us"><calc-sum></a></li><li><a href="/zh-CN/docs/Web/CSS/color-interpolation-method"><color-interpolation-method></a></li><li><a href="/zh-CN/docs/Web/CSS/color_value"><color></a></li><li><a href="/en-US/docs/Web/CSS/content-distribution" class="only-in-en-us"><content-distribution></a></li><li><a href="/en-US/docs/Web/CSS/content-position" class="only-in-en-us"><content-position></a></li><li><a href="/zh-CN/docs/Web/CSS/custom-ident"><custom-ident></a></li><li><a href="/en-US/docs/Web/CSS/dashed-ident" class="only-in-en-us"><dashed-ident></a></li><li><a href="/zh-CN/docs/Web/CSS/dimension">dimension</a></li><li><a href="/zh-CN/docs/Web/CSS/display-box"><display-box></a></li><li><a href="/en-US/docs/Web/CSS/display-inside" class="only-in-en-us"><display-inside></a></li><li><a href="/zh-CN/docs/Web/CSS/display-internal"><display-internal></a></li><li><a href="/zh-CN/docs/Web/CSS/display-legacy"><display-legacy></a></li><li><a href="/en-US/docs/Web/CSS/display-listitem" class="only-in-en-us"><display-listitem></a></li><li><a href="/zh-CN/docs/Web/CSS/display-outside"><display-outside></a></li><li><a href="/zh-CN/docs/Web/CSS/easing-function"><easing-function></a></li><li><a href="/zh-CN/docs/Web/CSS/filter-function"><filter-function></a></li><li><a href="/zh-CN/docs/Web/CSS/flex_value"><flex></a></li><li><a href="/en-US/docs/Web/CSS/frequency-percentage" class="only-in-en-us"><frequency-percentage></a></li><li><a href="/zh-CN/docs/Web/CSS/frequency"><frequency></a></li><li><a href="/en-US/docs/Web/CSS/generic-family" class="only-in-en-us"><generic-family></a></li><li><a href="/zh-CN/docs/Web/CSS/gradient"><gradient></a></li><li><a href="/zh-CN/docs/Web/CSS/hex-color"><hex-color></a></li><li><a href="/zh-CN/docs/Web/CSS/hue-interpolation-method"><hue-interpolation-method></a></li><li><a href="/en-US/docs/Web/CSS/hue" class="only-in-en-us"><hue></a></li><li><a href="/en-US/docs/Web/CSS/ident" class="only-in-en-us"><ident></a></li><li><a href="/zh-CN/docs/Web/CSS/image"><image></a></li><li><a href="/zh-CN/docs/Web/CSS/integer"><integer></a></li><li><a href="/zh-CN/docs/Web/CSS/length-percentage"><length-percentage></a></li><li><a href="/zh-CN/docs/Web/CSS/length"><length></a></li><li><a href="/en-US/docs/Web/CSS/line-style" class="only-in-en-us"><line-style></a></li><li><a href="/zh-CN/docs/Web/CSS/named-color"><named-color></a></li><li><a href="/zh-CN/docs/Web/CSS/number"><number></a></li><li><a href="/en-US/docs/Web/CSS/overflow-position" class="only-in-en-us"><overflow-position></a></li><li><a href="/en-US/docs/Web/CSS/overflow_value" class="only-in-en-us"><overflow></a></li><li><a href="/zh-CN/docs/Web/CSS/percentage"><percentage></a></li><li><a href="/en-US/docs/Web/CSS/position-area_value" class="only-in-en-us"><position-area></a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/position_value"><position></a></li><li><a href="/zh-CN/docs/Web/CSS/ratio"><ratio></a></li><li><a href="/zh-CN/docs/Web/CSS/relative-size"><relative-size></a></li><li><a href="/zh-CN/docs/Web/CSS/resolution"><resolution></a></li><li><a href="/en-US/docs/Web/CSS/self-position" class="only-in-en-us"><self-position></a></li><li><a href="/en-US/docs/Web/CSS/shape" class="only-in-en-us"><shape></a><abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <span class="visually-hidden">已弃用</span> </abbr></li><li><a href="/zh-CN/docs/Web/CSS/string"><string></a></li><li><a href="/zh-CN/docs/Web/CSS/system-color"><system-color></a></li><li><a href="/zh-CN/docs/Web/CSS/time-percentage"><time-percentage></a></li><li><a href="/zh-CN/docs/Web/CSS/time"><time></a></li><li><a href="/zh-CN/docs/Web/CSS/transform-function">transform-function</a></li><li><a href="/zh-CN/docs/Web/CSS/url_value"><url></a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Web/CSS/Guides">指南</a></li><li class="toggle"><details><summary>动画</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations">使用 CSS 动画</a></li></ol></details></li><li class="toggle"><details><summary>背景和边框</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds">多个背景的应用</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images">调整背景图片的大小</a></li></ol></details></li><li class="toggle"><details><summary>盒对齐</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables">块布局中的盒对齐方式</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox">弹性盒布局中的盒对齐方式</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout" class="only-in-en-us">Box alignment in grid layout</a></li><li><a href="/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout" class="only-in-en-us">Box alignment in multi-column layout</a></li></ol></details></li><li class="toggle"><details><summary>盒模型</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model">CSS 基础框盒模型介绍</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing">掌握外边距折叠</a></li></ol></details></li><li class="toggle"><details><summary>颜色</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_colors/Applying_color">为 HTML 元素应用颜色</a></li><li><a href="/en-US/docs/Web/CSS/CSS_colors/Color_values" class="only-in-en-us">Color values</a></li><li><a href="/en-US/docs/Web/CSS/CSS_colors/Relative_colors" class="only-in-en-us">Using relative colors</a></li><li><a href="/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely" class="only-in-en-us">Using color wisely</a></li><li><a href="/zh-CN/docs/Web/Accessibility/Understanding_Colors_and_Luminance">无障碍：理解颜色和亮度</a></li><li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast" class="only-in-en-us">Web 无障碍：色彩对比度</a></li></ol></details></li><li class="toggle"><details><summary>多列</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_multicol_layout/Basic_concepts">Basic Concepts of Multicol</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_multicol_layout/Styling_columns">多列布局的样式</a></li><li><a href="/en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns" class="only-in-en-us">Spanning and balancing columns</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout">处理 Multicol 中的溢出</a></li><li><a href="/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout" class="only-in-en-us">Handling content breaks in multi-column layout</a></li></ol></details></li><li class="toggle"><details><summary>条件规则</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries">使用特性查询</a></li></ol></details></li><li class="toggle"><details><summary>CSS 局限</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_containment/Using_CSS_containment">使用 CSS 局限</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_containment/Container_queries">CSS 容器查询</a></li><li><a href="/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries" class="only-in-en-us">Using container size and style queries</a></li></ol></details></li><li class="toggle"><details><summary>CSS 对象模型视图</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSSOM_view/Coordinate_systems">坐标系</a></li></ol></details></li><li class="toggle"><details><summary>流式布局</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow">常规流中的块和内联布局</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow">应用或脱离流式布局</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts">格式化上下文简介</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes">流式布局和书写模式</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_display/Flow_layout_and_overflow">流式布局和溢出</a></li><li><a href="/en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display" class="only-in-en-us">Using the multi-keyword syntax with CSS display</a></li></ol></details></li><li class="toggle"><details><summary>弹性盒布局</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox">flex 布局的基本概念</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods">弹性盒子与其他布局方法的联系</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container">对齐弹性容器中的项目</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items">Flex 项排序</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis">控制弹性元素在主轴上的比例</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items">掌握弹性物件的包装</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox">弹性盒子的典型用例</a></li></ol></details></li><li class="toggle"><details><summary>字体</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide">OpenType 字体特性指南</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_fonts/Variable_fonts_guide">Variable fonts guide</a></li></ol></details></li><li class="toggle"><details><summary>网格布局</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout">网格布局的基本概念</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods">网格布局和其他布局方法的联系</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement">CSS 网格中基于线的定位</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_template_areas">网格模板区域</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines">使用命名线布局</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout">CSS 网格布局中的自动定位</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout">网格布局中的盒模型对齐</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes">CSS 网格，逻辑值和书写模式</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility">CSS 网格布局和无障碍</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids">利用 CSS 网格布局实现常用布局</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid" class="only-in-en-us">Subgrid</a></li><li><a href="/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout" class="only-in-en-us">Masonry layout</a><abbr class="icon icon-experimental" title="实验性。预期行为可能会在未来发生变更。"> <span class="visually-hidden">实验性</span> </abbr></li></ol></details></li><li class="toggle"><details open=""><summary>图片</summary><ol><li><em><a href="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients" aria-current="page">使用 CSS 渐变</a></em></li></ol></details></li><li class="toggle"><details><summary>列表和计数器</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">使用 CSS 计数器</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation">使列表缩进一致</a></li></ol></details></li><li class="toggle"><details><summary>逻辑属性</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values">逻辑属性与逻辑值的基本概念</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning">用于浮动和定位的逻辑属性</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding">用于外边距、边框和内边距的逻辑属性</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Sizing">逻辑尺寸属性</a></li></ol></details></li><li class="toggle"><details><summary>数学函数</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_CSS_math_functions" class="only-in-en-us">Using CSS math functions</a></li></ol></details></li><li class="toggle"><details><summary>媒体查询</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries">使用媒体查询</a></li><li><a href="/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility" class="only-in-en-us">Using media queries for accessibility</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries">使用编程方法测试媒体查询</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_media_queries/Printing">打印</a></li></ol></details></li><li class="toggle"><details><summary>嵌套样式规则</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_nesting/Using_CSS_nesting">使用 CSS 嵌套</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_nesting/Nesting_at-rules">CSS at 规则嵌套</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_nesting/Nesting_and_specificity">CSS 嵌套与优先级</a></li></ol></details></li><li class="toggle"><details><summary>定位</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index">理解 CSS 的 z-index 属性</a></li></ol></details></li><li class="toggle"><details><summary>滚动吸附</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_scroll_snap/Basic_concepts">滚动吸附的基本概念</a></li></ol></details></li><li class="toggle"><details><summary>形状</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_shapes/Overview_of_shapes">CSS 的图形（Shape）概览</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_shapes/From_box_values">使用 box 值指定形状</a></li><li><a href="/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes" class="only-in-en-us">Basic shapes with shape-outside</a></li><li><a href="/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images" class="only-in-en-us">Shapes from images</a></li></ol></details></li><li class="toggle"><details><summary>文本</summary><ol><li><a href="/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text" class="only-in-en-us">Wrapping and breaking text</a></li></ol></details></li><li class="toggle"><details><summary>变换</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms">使用 CSS 变换</a></li></ol></details></li><li class="toggle"><details><summary>过渡</summary><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions">使用 CSS 过渡</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Web/CSS/Layout_cookbook">CSS 布局手册</a></li><li class="toggle"><ol><li><a href="/zh-CN/docs/Web/CSS/Layout_cookbook/Media_objects">指南：媒体对象</a></li><li><a href="/zh-CN/docs/Web/CSS/Layout_cookbook/Column_layouts">列布局</a></li><li><a href="/zh-CN/docs/Web/CSS/Layout_cookbook/Center_an_element">居中一个元素</a></li><li><a href="/zh-CN/docs/Web/CSS/Layout_cookbook/Sticky_footers">粘性页脚</a></li><li><a href="/zh-CN/docs/Web/CSS/Layout_cookbook/Split_Navigation">分离式导航菜单</a></li><li><a href="/zh-CN/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">面包屑导航</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges" class="only-in-en-us">List group with badges</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Pagination" class="only-in-en-us">Pagination</a></li><li><a href="/zh-CN/docs/Web/CSS/Layout_cookbook/Card">卡片</a></li><li><a href="/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper" class="only-in-en-us">Grid wrapper</a></li></ol></li><li class="section">工具</li><li class="toggle"><ol><li><a href="/zh-CN/docs/Web/CSS/CSS_colors/Color_picker_tool">色彩选择工具</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator">Box-shadow 生成器</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator">Border-image 生成器</a></li><li><a href="/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator">圆角边框生成器</a></li></ol></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#使用线性渐变">使用线性渐变</a></li><li class="document-toc-item "><a class="document-toc-link" href="#声明颜色和创建效果">声明颜色和创建效果</a></li><li class="document-toc-item "><a class="document-toc-link" href="#使用径向渐变">使用径向渐变</a></li><li class="document-toc-item "><a class="document-toc-link" href="#使用锥形渐变">使用锥形渐变</a></li><li class="document-toc-item "><a class="document-toc-link" href="#使用重复渐变">使用重复渐变</a></li><li class="document-toc-item "><a class="document-toc-link" href="#参见">参见</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="zh-CN"><header><h1>使用 CSS 渐变</h1></header><div class="section-content"><p><strong>CSS 渐变</strong>由 <a href="/zh-CN/docs/Web/CSS/gradient"><code><gradient></code></a> 数据类型表示，它是 <a href="/zh-CN/docs/Web/CSS/image"><code><image></code></a> 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。你可以选择三种类型的渐变：<em>线性</em>（由 <a href="/zh-CN/docs/Web/CSS/gradient/linear-gradient"><code>linear-gradient()</code></a> 函数创建）、<em>径向</em>（由 <a href="/zh-CN/docs/Web/CSS/gradient/radial-gradient"><code>radial-gradient()</code></a> 函数创建）和<em>锥形</em>（由 <a href="/zh-CN/docs/Web/CSS/gradient/conic-gradient"><code>conic-gradient()</code></a> 函数创建）。你还可以使用 <a href="/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient"><code>repeating-linear-gradient()</code></a> 和 <a href="/en-US/docs/Web/CSS/gradient/repeating-conic-gradient" class="only-in-en-us"><code>repeating-conic-gradient()</code></a> 函数创建重复渐变。</p> <p>渐变可以在任何使用 <code><image></code> 的地方使用，例如在背景中。由于渐变是动态生成的，因此可以消除对传统用于实现类似效果的栅格图像文件的需求。此外，由于渐变是由浏览器生成的，因此在放大时看起来比栅格图像更好，并且可以动态调整大小。</p> <p>我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变、锥形渐变和重复渐变。</p></div><section aria-labelledby="使用线性渐变"><h2 id="使用线性渐变"><a href="#使用线性渐变">使用线性渐变</a></h2><div class="section-content"><p>线性渐变创建了一条沿直线前进的颜色带。</p></div></section><section aria-labelledby="基础线性渐变"><h3 id="基础线性渐变"><a href="#基础线性渐变">基础线性渐变</a></h3><div class="section-content"><p>要创建最基本的渐变类型，你只需指定两种颜色即可。这些被称为色标（color stop）。至少指定两个色标，也可以指定任意数量。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="simple-linear"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.simple-linear { background: linear-gradient(blue, pink); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="基础线性渐变 sample" id="frame_基础线性渐变" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="基础线性渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="改变渐变方向"><h3 id="改变渐变方向"><a href="#改变渐变方向">改变渐变方向</a></h3><div class="section-content"><p>默认情况下，线性渐变的方向是从上到下，你可以指定一个值来改变渐变的方向。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="horizontal-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.horizontal-gradient { background: linear-gradient(to right, blue, pink); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="改变渐变方向 sample" id="frame_改变渐变方向" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="改变渐变方向" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="对角线渐变"><h3 id="对角线渐变"><a href="#对角线渐变">对角线渐变</a></h3><div class="section-content"><p>你甚至可以设置渐变方向为从一个对角到另一个对角。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="diagonal-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 200px; height: 100px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="对角线渐变 sample" id="frame_对角线渐变" width="200" height="100" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="对角线渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="设置渐变角度"><h3 id="设置渐变角度"><a href="#设置渐变角度">设置渐变角度</a></h3><div class="section-content"><p>如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="angled-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.angled-gradient { background: linear-gradient(70deg, blue, pink); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="设置渐变角度 sample" id="frame_设置渐变角度" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="设置渐变角度" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>在使用角度的时候，<code>0deg</code> 代表渐变方向为从下到上，<code>90deg</code> 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。而负角度意味着逆时针方向。</p> <p><img src="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/linear_red_angles.png" alt="四个显示角度和相关渐变的盒子。0deg 从顶部到底部，90deg 从右到左，180deg 从底部到顶部，-90deg 从左到右" width="488" height="122" loading="lazy"></p></div></section><section aria-labelledby="声明颜色和创建效果"><h2 id="声明颜色和创建效果"><a href="#声明颜色和创建效果">声明颜色和创建效果</a></h2><div class="section-content"><p>所有的 CSS 渐变类型都是一个位置依赖的颜色范围。CSS 渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：</p></div></section><section aria-labelledby="使用多种颜色"><h3 id="使用多种颜色"><a href="#使用多种颜色">使用多种颜色</a></h3><div class="section-content"><p>无需局限于使用两种颜色，你想使用多少种颜色都可以！默认情况下，所设置颜色会均匀分布在渐变路径中。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="auto-spaced-linear-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.auto-spaced-linear-gradient { background: linear-gradient(red, yellow, blue, orange); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="使用多种颜色 sample" id="frame_使用多种颜色" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="使用多种颜色" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="色标位置"><h3 id="色标位置"><a href="#色标位置">色标位置</a></h3><div class="section-content"><p>你不需要将你的色标设置在默认的位置。你可以为径向和线性渐变设置 0、1 或 2 个百分比值或者绝对长度值来调整它们的位置。如果你将位置设置为百分数，<code>0%</code> 表示起始点，而 <code>100%</code> 表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么将会自动计算，第一个色标在 <code>0%</code> 处，最后一个色标在 <code>100%</code>，其他的色标则位于其相邻的两个色标中间。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="multicolor-linear"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.multicolor-linear { background: linear-gradient(to left, lime 28px, red 77%, cyan); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="颜色终止位置 sample" id="frame_颜色终止位置" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="颜色终止位置" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="创建硬线"><h3 id="创建硬线"><a href="#创建硬线">创建硬线</a></h3><div class="section-content"><p>要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在 <code>50%</code> 标记处共享一个颜色停止点，即渐变的一半：</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="striped"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.striped { background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="创建实线 sample" id="frame_创建实线" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="创建实线" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="渐变提示"><h3 id="渐变提示"><a href="#渐变提示">渐变提示</a></h3><div class="section-content"><p>默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。在如下示例中，我们将渐变的中心点由 50% 设为 10%。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="color-hint"></div> <div class="simple-linear"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; float: left; margin-right: 10px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.color-hint { background: linear-gradient(blue, 10%, pink); } .simple-linear { background: linear-gradient(blue, pink); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="渐变提示 sample" id="frame_渐变提示" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="渐变提示" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="创建色带和条纹"><h3 id="创建色带和条纹"><a href="#创建色带和条纹">创建色带和条纹</a></h3><div class="section-content"><p>要在渐变中包含一个实心、非过渡的颜色区域，请包含色标的两个位置。色标可以有两个位置，这相当于两个连续颜色在不同位置具有相同的色标。颜色将在第一个色标时达到完全饱和，保持该饱和度到第二个色标，并通过相邻色标的第一个位置过渡到相邻色标的颜色。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="multiposition-stops"></div> <div class="multiposition-stop2"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.multiposition-stops { background: linear-gradient( to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); background: linear-gradient( to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); } .multiposition-stop2 { background: linear-gradient( to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); background: linear-gradient( to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="创建色带和条纹 sample" id="frame_创建色带和条纹" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="创建色带和条纹" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>在上面的第一个例子中，黄绿色从 0% 的位置中开始（这是推断出来的），然后到 20% 的位置，在之后的渐变宽度的 10% 内，开始由黄绿色转换为红色，在 30% 的位置到达纯红色，然后一直保持为红色，直到渐变中的 45% 的位置，然后淡化到青色，这持续了渐变的 15% 的过程，然后然后继续。</p> <p>在第二个例子中，每个颜色的第二个色标都是相邻颜色的第一个色标，创建一个条纹效果。</p> <p>在这两个例子中，渐变都写了两次：第一个是 CSS Images Level 3 方法，可为每个色标重复颜色，第二个是 CSS Images Level 4 多个色标方法，在一个线性的色标声明中包含两个色标长度。</p></div></section><section aria-labelledby="控制渐变的进程"><h3 id="控制渐变的进程"><a href="#控制渐变的进程">控制渐变的进程</a></h3><div class="section-content"><p>默认情况下，渐变在两个相邻的色标之间都是均匀推进的，两个色标之间的中点是颜色值的中点。你可以控制两个色标之间的<a href="/zh-CN/docs/Glossary/Interpolation">插值</a>，或者过程，方法是添加一个颜色提示位置。在这个例子中，颜色在渐变过程的 20% 而不是 50% 的位置到达黄绿色和青色之间的中点。第二个例子没有提示，因此可以通过对比看出颜色提示的效果。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="colorhint-gradient"></div> <div class="regular-progression"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.colorhint-gradient { background: linear-gradient(to top, lime, 20%, cyan); } .regular-progression { background: linear-gradient(to top, lime, cyan); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="控制渐变的进程 sample" id="frame_控制渐变的进程" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="控制渐变的进程" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="叠加渐变"><h3 id="叠加渐变"><a href="#叠加渐变">叠加渐变</a></h3><div class="section-content"><p>渐变支持透明度，所以你可以将多个背景叠加起来以实现一些非常好看的效果。背景是从顶部到底部堆叠的，指定的第一个就是顶部。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="layered-image"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 300px; height: 150px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.layered-image { background: linear-gradient(to right, transparent, mistyrose), url("critters.png"); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="叠加渐变 sample" id="frame_叠加渐变" width="300" height="150" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="叠加渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="堆叠渐变"><h3 id="堆叠渐变"><a href="#堆叠渐变">堆叠渐变</a></h3><div class="section-content"><p>你可以将渐变与其他的渐变堆叠起来。只要顶部的渐变不是完全不透明的，那么下面的渐变就会依然可见。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="stacked-linear"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 200px; height: 200px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.stacked-linear { background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="堆叠渐变 sample" id="frame_堆叠渐变" width="200" height="200" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="堆叠渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="使用径向渐变"><h2 id="使用径向渐变"><a href="#使用径向渐变">使用径向渐变</a></h2><div class="section-content"><p>径向渐变类似于线性渐变，除了是从一个中心点向外辐射的。你可以指定中心点的位置。你还可以使其为圆形或者是椭圆形。</p></div></section><section aria-labelledby="基本的径向渐变"><h3 id="基本的径向渐变"><a href="#基本的径向渐变">基本的径向渐变</a></h3><div class="section-content"><p>和线性渐变一样，创建径向渐变所需要的就是两个颜色。默认情况下，渐变的中心点是 50% 50% 的位置，且渐变是椭圆的以匹配盒的比例。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="simple-radial"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 240px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.simple-radial { background: radial-gradient(red, blue); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="基本的径向渐变 sample" id="frame_基本的径向渐变" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="基本的径向渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="设置径向色标的位置"><h3 id="设置径向色标的位置"><a href="#设置径向色标的位置">设置径向色标的位置</a></h3><div class="section-content"><p>和线性渐变一样，你可以用百分比或者绝对长度指定每个径向色标的位置。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="radial-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.radial-gradient { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="设置径向色标的位置 sample" id="frame_设置径向色标的位置" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="设置径向色标的位置" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="设置渐变的中心"><h3 id="设置渐变的中心"><a href="#设置渐变的中心">设置渐变的中心</a></h3><div class="section-content"><p>你可以使用关键字、百分比或者绝对长度、长度和百分比值的重复（如果存在，否则就是从左侧位置和顶部位置开始的）以指定渐变的中心。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="radial-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 240px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.radial-gradient { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="设置渐变的中心 sample" id="frame_设置渐变的中心" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="设置渐变的中心" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="设置径向渐变的大小"><h3 id="设置径向渐变的大小"><a href="#设置径向渐变的大小">设置径向渐变的大小</a></h3><div class="section-content"><p>和线性渐变不同，你可以指定径向渐变的大小。可能的值包括 <code>closest-corner</code>、<code>closest-side</code>、<code>farthest-corner</code> 和 <code>farthest-side</code>，其中 <code>farthest-corner</code> 是默认值。圆的大小为长度，椭圆则是长度和百分比。</p> <h4 id="示例：椭圆渐变的_closet-side_值">示例：椭圆渐变的 closet-side 值</h4> <p>这个例子使用了 <code>closest-side</code> 大小值，意思就是大小是通过开始点（中心）和包围盒的最近一侧的距离设置的。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="radial-ellipse-side"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 240px; height: 100px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.radial-ellipse-side { background: radial-gradient( ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="示例：椭圆渐变的 closet-side 值 sample" id="frame_示例：椭圆渐变的_closet-side_值" width="240" height="100" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="示例：椭圆渐变的_closet-side_值" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <h4 id="示例：椭圆渐变的_farthest-corner_值">示例：椭圆渐变的 farthest-corner 值</h4> <p>这个例子和前一个类似，但是其大小是以 <code>farthest-corner</code> 指定的，这会将渐变的大小设置为从开始点到包围盒的距离开始点的最远角的距离设置的。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="radial-ellipse-far"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 240px; height: 100px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.radial-ellipse-far { background: radial-gradient( ellipse farthest-corner at 90% 90%, red, yellow 10%, #1e90ff 50%, beige ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="示例：椭圆渐变的 farthest-corner 值 sample" id="frame_示例：椭圆渐变的_farthest-corner_值" width="240" height="100" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="示例：椭圆渐变的_farthest-corner_值" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <h4 id="示例：圆形渐变的_closet-side_值">示例：圆形渐变的 closet-side 值</h4> <p>这个例子使用了 <code>closest-side</code>，使得圆的半径是渐变中心到最近一侧的距离。在这个例子中，半径是中心到底部的距离，因为渐变位于左侧 25%、底部 25% 的位置，而 div 元素的高度小于宽度。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="radial-circle-close"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 240px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.radial-circle-close { background: radial-gradient( circle closest-side at 25% 75%, red, yellow 10%, #1e90ff 50%, beige ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="示例：圆形渐变的 closet-side 值 sample" id="frame_示例：圆形渐变的_closet-side_值" width="240" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="示例：圆形渐变的_closet-side_值" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <h4 id="示例：椭圆形渐变长度或百分比">示例：椭圆形渐变长度或百分比</h4> <p>对于椭圆，你可以使用长度或者百分比来设置其大小，第一个值代表了水平半径，第二个值是竖直半径，你可以使用百分比以表示相对于盒在那个维度上的大小的值。在下面这个例子中，我使用了百分比以表示水平半径。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="radial-ellipse-size"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 240px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.radial-ellipse-size { background: radial-gradient( ellipse 50% 50px, red, yellow 10%, #1e90ff 50%, beige ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="示例：椭圆长度或百分比 sample" id="frame_示例：椭圆长度或百分比" width="240" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="示例：椭圆长度或百分比" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <h4 id="示例：圆形渐变的长度">示例：圆形渐变的长度</h4> <p>对于圆，尺寸可以用 <a href="/zh-CN/docs/Web/CSS/length"><length></a> 提供，这就是圆的尺寸。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="radial-circle-size"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 240px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.radial-circle-size { background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="示例：圆的长度 sample" id="frame_示例：圆的长度" width="240" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="示例：圆的长度" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="堆叠径向渐变"><h3 id="堆叠径向渐变"><a href="#堆叠径向渐变">堆叠径向渐变</a></h3><div class="section-content"><p>就像线性渐变一样，你也可以堆叠径向渐变。指定的第一个位于顶部，最后一个位于底部。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="stacked-radial"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 200px; height: 200px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.stacked-radial { background: radial-gradient( circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71% ), radial-gradient( circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71% ), radial-gradient( circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71% ) beige; border-radius: 50%; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="堆叠径向渐变 sample" id="frame_堆叠径向渐变" width="200" height="200" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="堆叠径向渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="使用锥形渐变"><h2 id="使用锥形渐变"><a href="#使用锥形渐变">使用锥形渐变</a></h2><div class="section-content"><p><strong><code>conic-gradient()</code></strong> <a href="/zh-CN/docs/Web/CSS">CSS</a> 函数创建包含颜色围绕中心点旋转（而不是从中心点辐射）产生的渐变的图像。锥形渐变的例子包括了饼图和<a href="/zh-CN/docs/Glossary/Color_wheel">色轮</a>，但是也可以用于创建棋盘格和其他有趣的效果。</p> <p>锥形渐变的语法和径向渐变的语法类似，但是色标是围绕渐变弧（圆的圆周）进行的，而不是从渐变中心出现的渐变线上，并且色标是百分比或度数：绝对长度无效。</p> <p>在径向渐变中，颜色从椭圆中心的位置在各个方向上向外过渡。在锥形渐变中，颜色围绕圆的中心在圆周上旋转过渡，从顶部开始，顺时针进行。类似于径向渐变，你可以设置渐变的中心。类似于线性渐变，你可以改变渐变的角度。</p></div></section><section aria-labelledby="基本的锥形渐变"><h3 id="基本的锥形渐变"><a href="#基本的锥形渐变">基本的锥形渐变</a></h3><div class="section-content"><p>和线性和径向的渐变类似，创建锥形渐变所需要的就是两个颜色。默认情况下，渐变的中心位于 50% 50% 的位置，渐变的开始点是朝上的。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="simple-conic"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.simple-conic { background: conic-gradient(red, blue); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="基本的锥形渐变 sample" id="frame_基本的锥形渐变" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="基本的锥形渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="设置锥形渐变的位置"><h3 id="设置锥形渐变的位置"><a href="#设置锥形渐变的位置">设置锥形渐变的位置</a></h3><div class="section-content"><p>和锥形渐变类似，你可以使用关键词、百分比或者绝对长度，以及关键字“at”来设置锥形渐变的中心位置。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="conic-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.conic-gradient { background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="设置锥形渐变的位置 sample" id="frame_设置锥形渐变的位置" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="设置锥形渐变的位置" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="改变角度"><h3 id="改变角度"><a href="#改变角度">改变角度</a></h3><div class="section-content"><p>默认情况下，你指定的不同色标是围绕着圆均等分布的。你可以在开始时使用“from”关键字以及一个角度或者长度以指定锥形渐变的起始点，然后你可以在后面包括角度或者长度以指定不同的位置。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="conic-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.conic-gradient { background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="改变角度 sample" id="frame_改变角度" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="改变角度" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="使用重复渐变"><h2 id="使用重复渐变"><a href="#使用重复渐变">使用重复渐变</a></h2><div class="section-content"><p><a href="/zh-CN/docs/Web/CSS/gradient/linear-gradient"><code>linear-gradient()</code></a>、<a href="/zh-CN/docs/Web/CSS/gradient/radial-gradient"><code>radial-gradient()</code></a> 和 <a href="/zh-CN/docs/Web/CSS/gradient/conic-gradient"><code>conic-gradient()</code></a> 函数不支持自动重复的色标。但是，<a href="/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient"><code>repeating-linear-gradient()</code></a>、<a href="/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient"><code>repeating-radial-gradient()</code></a> 和 <a href="/en-US/docs/Web/CSS/gradient/repeating-conic-gradient" class="only-in-en-us"><code>repeating-conic-gradient()</code></a> 函数可以用于提供此功能。</p> <p>重复渐变线或弧的大小，是第一个色标和最后一个色标之间的长度。如果第一个色标只有颜色没有色标长度，那么值默认为 0。如果最后一个色标只有颜色没有色标长度，那么值默认为 100%。如果都没有指定，那么渐变线是 100%，意味着线性和锥形的渐变都不会重复，径向渐变只会在渐变的半径小于中心点和最远角之间的距离时重复。如果第一个色标声明了，其值大于 0，渐变也会重复，因为线或弧的大小就是第一个色标和最后一个色标之间的距离，小于 100% 或 360 度。</p></div></section><section aria-labelledby="重复的线性渐变"><h3 id="重复的线性渐变"><a href="#重复的线性渐变">重复的线性渐变</a></h3><div class="section-content"><p>这个例子使用了 <a href="/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient"><code>repeating-linear-gradient()</code></a> 以创建一个沿着直线重复推进的渐变。随渐变进行，颜色会重复循环。在这个例子中，渐变线的长度为 10px。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="repeating-linear"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.repeating-linear { background: repeating-linear-gradient( -45deg, red, red 5px, blue 5px, blue 10px ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="重复的线性渐变 sample" id="frame_重复的线性渐变" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="重复的线性渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="多个线性渐变"><h3 id="多个线性渐变"><a href="#多个线性渐变">多个线性渐变</a></h3><div class="section-content"><p>和常规的线性和径向渐变类似，你可以包含多个渐变，一个在另一个的顶部。这只有在渐变部分透明时有效，以允许的后续的渐变穿透透明区域显示，或者你为每个渐变图像指定不同的 <a href="/zh-CN/docs/Web/CSS/background-size">background-size</a>，还可以有不同的 <a href="/zh-CN/docs/Web/CSS/background-position">background-position</a> 属性值。我们使用透明。</p> <p>在这个例子中，渐变线的长度为 300px、230px 和 300px。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="multi-repeating-linear"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 600px; height: 400px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.multi-repeating-linear { background: repeating-linear-gradient( 190deg, rgba(255, 0, 0, 0.5) 40px, rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px, rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px, rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px, rgba(255, 0, 0, 0.5) 300px ), repeating-linear-gradient( -190deg, rgba(255, 0, 0, 0.5) 30px, rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px, rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px, rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px, rgba(255, 0, 0, 0.5) 230px ), repeating-linear-gradient( 23deg, red 50px, orange 100px, yellow 150px, green 200px, blue 250px, indigo 300px, violet 350px, red 370px ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="多个线性渐变 sample" id="frame_多个线性渐变" width="600" height="400" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="多个线性渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="格纹渐变"><h3 id="格纹渐变"><a href="#格纹渐变">格纹渐变</a></h3><div class="section-content"><p>要创建格纹，我们使用了几个重叠的带有透明的渐变。在第一个背景声明中，我们分别列举出了每个色标。第二个背景属性声明使用了色标的多个位置的语法：</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="plaid-gradient"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 200px; height: 200px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.plaid-gradient { background: repeating-linear-gradient( 90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px ), repeating-linear-gradient( 0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px ), repeating-linear-gradient( -45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px ), repeating-linear-gradient( 45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px ); background: repeating-linear-gradient( 90deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px ), repeating-linear-gradient( 0deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px ), repeating-linear-gradient( -45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px ), repeating-linear-gradient( 45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="格纹渐变 sample" id="frame_格纹渐变" width="200" height="200" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="格纹渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="重复的径向渐变"><h3 id="重复的径向渐变"><a href="#重复的径向渐变">重复的径向渐变</a></h3><div class="section-content"><p>这个例子使用了 <a href="/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient"><code>repeating-radial-gradient()</code></a> 以创建从中心点重复向外辐射的渐变。颜色会随渐变重复而循环。</p> <div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="repeating-radial"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 120px; height: 120px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.repeating-radial { background: repeating-radial-gradient( black, black 5px, white 5px, white 10px ); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="重复的径向渐变 sample" id="frame_重复的径向渐变" width="120" height="120" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="重复的径向渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="多个重复的径向渐变"><h3 id="多个重复的径向渐变"><a href="#多个重复的径向渐变">多个重复的径向渐变</a></h3><div class="section-content"><div class="code-example"><pre class="brush: html hidden notranslate"><code><div class="multi-target"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden notranslate"><code>div { width: 250px; height: 150px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.multi-target { background: repeating-radial-gradient( ellipse at 80% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 15px, rgba(255, 255, 255, 0.5) 15px, rgba(255, 255, 255, 0.5) 30px ) top left no-repeat, repeating-radial-gradient( ellipse at 20% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 10px, rgba(255, 255, 255, 0.5) 10px, rgba(255, 255, 255, 0.5) 20px ) top left no-repeat yellow; background-size: 200px 200px, 150px 150px; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="多个重复的径向渐变 sample" id="frame_多个重复的径向渐变" width="250" height="150" src="about:blank" data-live-path="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/" data-live-id="多个重复的径向渐变" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="参见"><h2 id="参见"><a href="#参见">参见</a></h2><div class="section-content"><ul> <li>渐变函数：<a href="/zh-CN/docs/Web/CSS/gradient/linear-gradient"><code>linear-gradient()</code></a>、<a href="/zh-CN/docs/Web/CSS/gradient/radial-gradient"><code>radial-gradient()</code></a>、<a href="/zh-CN/docs/Web/CSS/gradient/conic-gradient"><code>conic-gradient()</code></a>、<a href="/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient"><code>repeating-linear-gradient()</code></a>、<a href="/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient"><code>repeating-radial-gradient()</code></a>、<a href="/en-US/docs/Web/CSS/gradient/repeating-conic-gradient" class="only-in-en-us"><code>repeating-conic-gradient()</code></a></li> <li>和渐变有关的 CSS 数据类型：<a href="/zh-CN/docs/Web/CSS/gradient"><code><gradient></code></a>、<a href="/zh-CN/docs/Web/CSS/image"><code><image></code></a></li> <li>和渐变有关的 CSS 属性：<a href="/zh-CN/docs/Web/CSS/background"><code>background</code></a>、<a href="/zh-CN/docs/Web/CSS/background-image"><code>background-image</code></a></li> <li><a href="https://projects.verou.me/css3patterns/" class="external" target="_blank">CSS 渐变纹样图集，作者 Lea Verou</a></li> <li><a href="http://standardista.com/cssgradients/" class="external" target="_blank">CSS 渐变库，作者 Estelle Weyl</a></li> <li><a href="https://cssgenerator.org/gradient-css-generator.html" class="external" target="_blank">渐变 CSS 生成器</a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2025-02-10T12:55:50.000Z">2025年2月10日</time> by <a href="/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/web/css/css_images/using_css_gradients/index.md?plain=1" title="Folder: zh-cn/web/css/css_images/using_css_gradients (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FCSS_images%2FUsing_CSS_gradients&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Fweb%2Fcss%2Fcss_images%2Fusing_css_gradients%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FCSS_images%2FUsing_CSS_gradients%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Fweb%2Fcss%2Fcss_images%2Fusing_css_gradients%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F94f091326ce62f91a51e8cf31db9057f120d649e%0A*+Document+last+modified%3A+2025-02-10T12%3A55%3A50.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p><strong>CSS 渐变</strong>由 <a href=\"/zh-CN/docs/Web/CSS/gradient\"><code><gradient></code></a> 数据类型表示，它是 <a href=\"/zh-CN/docs/Web/CSS/image\"><code><image></code></a> 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。你可以选择三种类型的渐变：<em>线性</em>（由 <a href=\"/zh-CN/docs/Web/CSS/gradient/linear-gradient\"><code>linear-gradient()</code></a> 函数创建）、<em>径向</em>（由 <a href=\"/zh-CN/docs/Web/CSS/gradient/radial-gradient\"><code>radial-gradient()</code></a> 函数创建）和<em>锥形</em>（由 <a href=\"/zh-CN/docs/Web/CSS/gradient/conic-gradient\"><code>conic-gradient()</code></a> 函数创建）。你还可以使用 <a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient\"><code>repeating-linear-gradient()</code></a> 和 <a href=\"/en-US/docs/Web/CSS/gradient/repeating-conic-gradient\" class=\"only-in-en-us\"><code>repeating-conic-gradient()</code></a> 函数创建重复渐变。</p>\n<p>渐变可以在任何使用 <code><image></code> 的地方使用，例如在背景中。由于渐变是动态生成的，因此可以消除对传统用于实现类似效果的栅格图像文件的需求。此外，由于渐变是由浏览器生成的，因此在放大时看起来比栅格图像更好，并且可以动态调整大小。</p>\n<p>我们将从线性渐变开始介绍，然后以线性渐变为例介绍所有渐变类型支持的功能，然后继续介绍径向渐变、锥形渐变和重复渐变。</p>"}},{"type":"prose","value":{"id":"使用线性渐变","title":"使用线性渐变","isH3":false,"content":"<p>线性渐变创建了一条沿直线前进的颜色带。</p>"}},{"type":"prose","value":{"id":"基础线性渐变","title":"基础线性渐变","isH3":true,"content":"<p>要创建最基本的渐变类型，你只需指定两种颜色即可。这些被称为色标（color stop）。至少指定两个色标，也可以指定任意数量。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"simple-linear\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.simple-linear {\n background: linear-gradient(blue, pink);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"基础线性渐变 sample\" id=\"frame_基础线性渐变\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"基础线性渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"改变渐变方向","title":"改变渐变方向","isH3":true,"content":"<p>默认情况下，线性渐变的方向是从上到下，你可以指定一个值来改变渐变的方向。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"horizontal-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.horizontal-gradient {\n background: linear-gradient(to right, blue, pink);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"改变渐变方向 sample\" id=\"frame_改变渐变方向\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"改变渐变方向\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"对角线渐变","title":"对角线渐变","isH3":true,"content":"<p>你甚至可以设置渐变方向为从一个对角到另一个对角。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"diagonal-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 200px;\n height: 100px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.diagonal-gradient {\n background: linear-gradient(to bottom right, blue, pink);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"对角线渐变 sample\" id=\"frame_对角线渐变\" width=\"200\" height=\"100\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"对角线渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"设置渐变角度","title":"设置渐变角度","isH3":true,"content":"<p>如果你想要更精确地控制渐变的方向，你可以给渐变设置一个具体的角度。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"angled-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.angled-gradient {\n background: linear-gradient(70deg, blue, pink);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"设置渐变角度 sample\" id=\"frame_设置渐变角度\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"设置渐变角度\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>在使用角度的时候，<code>0deg</code> 代表渐变方向为从下到上，<code>90deg</code> 代表渐变方向为从左到右，诸如此类正角度都属于顺时针方向。而负角度意味着逆时针方向。</p>\n<p><img src=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/linear_red_angles.png\" alt=\"四个显示角度和相关渐变的盒子。0deg 从顶部到底部，90deg 从右到左，180deg 从底部到顶部，-90deg 从左到右\" width=\"488\" height=\"122\" loading=\"lazy\"></p>"}},{"type":"prose","value":{"id":"声明颜色和创建效果","title":"声明颜色和创建效果","isH3":false,"content":"<p>所有的 CSS 渐变类型都是一个位置依赖的颜色范围。CSS 渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：</p>"}},{"type":"prose","value":{"id":"使用多种颜色","title":"使用多种颜色","isH3":true,"content":"<p>无需局限于使用两种颜色，你想使用多少种颜色都可以！默认情况下，所设置颜色会均匀分布在渐变路径中。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"auto-spaced-linear-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.auto-spaced-linear-gradient {\n background: linear-gradient(red, yellow, blue, orange);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"使用多种颜色 sample\" id=\"frame_使用多种颜色\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"使用多种颜色\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"色标位置","title":"色标位置","isH3":true,"content":"<p>你不需要将你的色标设置在默认的位置。你可以为径向和线性渐变设置 0、1 或 2 个百分比值或者绝对长度值来调整它们的位置。如果你将位置设置为百分数，<code>0%</code> 表示起始点，而 <code>100%</code> 表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么将会自动计算，第一个色标在 <code>0%</code> 处，最后一个色标在 <code>100%</code>，其他的色标则位于其相邻的两个色标中间。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"multicolor-linear\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.multicolor-linear {\n background: linear-gradient(to left, lime 28px, red 77%, cyan);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"颜色终止位置 sample\" id=\"frame_颜色终止位置\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"颜色终止位置\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"创建硬线","title":"创建硬线","isH3":true,"content":"<p>要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在 <code>50%</code> 标记处共享一个颜色停止点，即渐变的一半：</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"striped\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.striped {\n background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"创建实线 sample\" id=\"frame_创建实线\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"创建实线\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"渐变提示","title":"渐变提示","isH3":true,"content":"<p>默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。在如下示例中，我们将渐变的中心点由 50% 设为 10%。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"color-hint\"></div>\n<div class=\"simple-linear\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n float: left;\n margin-right: 10px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.color-hint {\n background: linear-gradient(blue, 10%, pink);\n}\n.simple-linear {\n background: linear-gradient(blue, pink);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"渐变提示 sample\" id=\"frame_渐变提示\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"渐变提示\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"创建色带和条纹","title":"创建色带和条纹","isH3":true,"content":"<p>要在渐变中包含一个实心、非过渡的颜色区域，请包含色标的两个位置。色标可以有两个位置，这相当于两个连续颜色在不同位置具有相同的色标。颜色将在第一个色标时达到完全饱和，保持该饱和度到第二个色标，并通过相邻色标的第一个位置过渡到相邻色标的颜色。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"multiposition-stops\"></div>\n<div class=\"multiposition-stop2\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n float: left;\n margin-right: 10px;\n box-sizing: border-box;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.multiposition-stops {\n background: linear-gradient(\n to left,\n lime 20%,\n red 30%,\n red 45%,\n cyan 55%,\n cyan 70%,\n yellow 80%\n );\n background: linear-gradient(\n to left,\n lime 20%,\n red 30% 45%,\n cyan 55% 70%,\n yellow 80%\n );\n}\n.multiposition-stop2 {\n background: linear-gradient(\n to left,\n lime 25%,\n red 25%,\n red 50%,\n cyan 50%,\n cyan 75%,\n yellow 75%\n );\n background: linear-gradient(\n to left,\n lime 25%,\n red 25% 50%,\n cyan 50% 75%,\n yellow 75%\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"创建色带和条纹 sample\" id=\"frame_创建色带和条纹\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"创建色带和条纹\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>在上面的第一个例子中，黄绿色从 0% 的位置中开始（这是推断出来的），然后到 20% 的位置，在之后的渐变宽度的 10% 内，开始由黄绿色转换为红色，在 30% 的位置到达纯红色，然后一直保持为红色，直到渐变中的 45% 的位置，然后淡化到青色，这持续了渐变的 15% 的过程，然后然后继续。</p>\n<p>在第二个例子中，每个颜色的第二个色标都是相邻颜色的第一个色标，创建一个条纹效果。</p>\n<p>在这两个例子中，渐变都写了两次：第一个是 CSS Images Level 3 方法，可为每个色标重复颜色，第二个是 CSS Images Level 4 多个色标方法，在一个线性的色标声明中包含两个色标长度。</p>"}},{"type":"prose","value":{"id":"控制渐变的进程","title":"控制渐变的进程","isH3":true,"content":"<p>默认情况下，渐变在两个相邻的色标之间都是均匀推进的，两个色标之间的中点是颜色值的中点。你可以控制两个色标之间的<a href=\"/zh-CN/docs/Glossary/Interpolation\">插值</a>，或者过程，方法是添加一个颜色提示位置。在这个例子中，颜色在渐变过程的 20% 而不是 50% 的位置到达黄绿色和青色之间的中点。第二个例子没有提示，因此可以通过对比看出颜色提示的效果。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"colorhint-gradient\"></div>\n<div class=\"regular-progression\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n float: left;\n margin-right: 10px;\n box-sizing: border-box;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.colorhint-gradient {\n background: linear-gradient(to top, lime, 20%, cyan);\n}\n.regular-progression {\n background: linear-gradient(to top, lime, cyan);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"控制渐变的进程 sample\" id=\"frame_控制渐变的进程\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"控制渐变的进程\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"叠加渐变","title":"叠加渐变","isH3":true,"content":"<p>渐变支持透明度，所以你可以将多个背景叠加起来以实现一些非常好看的效果。背景是从顶部到底部堆叠的，指定的第一个就是顶部。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"layered-image\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 300px;\n height: 150px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.layered-image {\n background:\n linear-gradient(to right, transparent, mistyrose), url(\"critters.png\");\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"叠加渐变 sample\" id=\"frame_叠加渐变\" width=\"300\" height=\"150\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"叠加渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"堆叠渐变","title":"堆叠渐变","isH3":true,"content":"<p>你可以将渐变与其他的渐变堆叠起来。只要顶部的渐变不是完全不透明的，那么下面的渐变就会依然可见。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"stacked-linear\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 200px;\n height: 200px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.stacked-linear {\n background:\n linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),\n linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),\n linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"堆叠渐变 sample\" id=\"frame_堆叠渐变\" width=\"200\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"堆叠渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"使用径向渐变","title":"使用径向渐变","isH3":false,"content":"<p>径向渐变类似于线性渐变，除了是从一个中心点向外辐射的。你可以指定中心点的位置。你还可以使其为圆形或者是椭圆形。</p>"}},{"type":"prose","value":{"id":"基本的径向渐变","title":"基本的径向渐变","isH3":true,"content":"<p>和线性渐变一样，创建径向渐变所需要的就是两个颜色。默认情况下，渐变的中心点是 50% 50% 的位置，且渐变是椭圆的以匹配盒的比例。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"simple-radial\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 240px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.simple-radial {\n background: radial-gradient(red, blue);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"基本的径向渐变 sample\" id=\"frame_基本的径向渐变\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"基本的径向渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"设置径向色标的位置","title":"设置径向色标的位置","isH3":true,"content":"<p>和线性渐变一样，你可以用百分比或者绝对长度指定每个径向色标的位置。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"radial-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.radial-gradient {\n background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"设置径向色标的位置 sample\" id=\"frame_设置径向色标的位置\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"设置径向色标的位置\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"设置渐变的中心","title":"设置渐变的中心","isH3":true,"content":"<p>你可以使用关键字、百分比或者绝对长度、长度和百分比值的重复（如果存在，否则就是从左侧位置和顶部位置开始的）以指定渐变的中心。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"radial-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 240px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.radial-gradient {\n background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"设置渐变的中心 sample\" id=\"frame_设置渐变的中心\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"设置渐变的中心\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"设置径向渐变的大小","title":"设置径向渐变的大小","isH3":true,"content":"<p>和线性渐变不同，你可以指定径向渐变的大小。可能的值包括 <code>closest-corner</code>、<code>closest-side</code>、<code>farthest-corner</code> 和 <code>farthest-side</code>，其中 <code>farthest-corner</code> 是默认值。圆的大小为长度，椭圆则是长度和百分比。</p>\n<h4 id=\"示例：椭圆渐变的_closet-side_值\">示例：椭圆渐变的 closet-side 值</h4>\n<p>这个例子使用了 <code>closest-side</code> 大小值，意思就是大小是通过开始点（中心）和包围盒的最近一侧的距离设置的。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"radial-ellipse-side\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 240px;\n height: 100px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.radial-ellipse-side {\n background: radial-gradient(\n ellipse closest-side,\n red,\n yellow 10%,\n #1e90ff 50%,\n beige\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"示例：椭圆渐变的 closet-side 值 sample\" id=\"frame_示例：椭圆渐变的_closet-side_值\" width=\"240\" height=\"100\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"示例：椭圆渐变的_closet-side_值\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<h4 id=\"示例：椭圆渐变的_farthest-corner_值\">示例：椭圆渐变的 farthest-corner 值</h4>\n<p>这个例子和前一个类似，但是其大小是以 <code>farthest-corner</code> 指定的，这会将渐变的大小设置为从开始点到包围盒的距离开始点的最远角的距离设置的。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"radial-ellipse-far\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 240px;\n height: 100px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.radial-ellipse-far {\n background: radial-gradient(\n ellipse farthest-corner at 90% 90%,\n red,\n yellow 10%,\n #1e90ff 50%,\n beige\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"示例：椭圆渐变的 farthest-corner 值 sample\" id=\"frame_示例：椭圆渐变的_farthest-corner_值\" width=\"240\" height=\"100\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"示例：椭圆渐变的_farthest-corner_值\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<h4 id=\"示例：圆形渐变的_closet-side_值\">示例：圆形渐变的 closet-side 值</h4>\n<p>这个例子使用了 <code>closest-side</code>，使得圆的半径是渐变中心到最近一侧的距离。在这个例子中，半径是中心到底部的距离，因为渐变位于左侧 25%、底部 25% 的位置，而 div 元素的高度小于宽度。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"radial-circle-close\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 240px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.radial-circle-close {\n background: radial-gradient(\n circle closest-side at 25% 75%,\n red,\n yellow 10%,\n #1e90ff 50%,\n beige\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"示例：圆形渐变的 closet-side 值 sample\" id=\"frame_示例：圆形渐变的_closet-side_值\" width=\"240\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"示例：圆形渐变的_closet-side_值\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<h4 id=\"示例：椭圆形渐变长度或百分比\">示例：椭圆形渐变长度或百分比</h4>\n<p>对于椭圆，你可以使用长度或者百分比来设置其大小，第一个值代表了水平半径，第二个值是竖直半径，你可以使用百分比以表示相对于盒在那个维度上的大小的值。在下面这个例子中，我使用了百分比以表示水平半径。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"radial-ellipse-size\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 240px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.radial-ellipse-size {\n background: radial-gradient(\n ellipse 50% 50px,\n red,\n yellow 10%,\n #1e90ff 50%,\n beige\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"示例：椭圆长度或百分比 sample\" id=\"frame_示例：椭圆长度或百分比\" width=\"240\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"示例：椭圆长度或百分比\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<h4 id=\"示例：圆形渐变的长度\">示例：圆形渐变的长度</h4>\n<p>对于圆，尺寸可以用 <a href=\"/zh-CN/docs/Web/CSS/length\"><length></a> 提供，这就是圆的尺寸。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"radial-circle-size\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 240px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.radial-circle-size {\n background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"示例：圆的长度 sample\" id=\"frame_示例：圆的长度\" width=\"240\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"示例：圆的长度\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"堆叠径向渐变","title":"堆叠径向渐变","isH3":true,"content":"<p>就像线性渐变一样，你也可以堆叠径向渐变。指定的第一个位于顶部，最后一个位于底部。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"stacked-radial\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 200px;\n height: 200px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.stacked-radial {\n background:\n radial-gradient(\n circle at 50% 0,\n rgba(255, 0, 0, 0.5),\n rgba(255, 0, 0, 0) 70.71%\n ),\n radial-gradient(\n circle at 6.7% 75%,\n rgba(0, 0, 255, 0.5),\n rgba(0, 0, 255, 0) 70.71%\n ),\n radial-gradient(\n circle at 93.3% 75%,\n rgba(0, 255, 0, 0.5),\n rgba(0, 255, 0, 0) 70.71%\n )\n beige;\n border-radius: 50%;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"堆叠径向渐变 sample\" id=\"frame_堆叠径向渐变\" width=\"200\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"堆叠径向渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"使用锥形渐变","title":"使用锥形渐变","isH3":false,"content":"<p><strong><code>conic-gradient()</code></strong> <a href=\"/zh-CN/docs/Web/CSS\">CSS</a> 函数创建包含颜色围绕中心点旋转（而不是从中心点辐射）产生的渐变的图像。锥形渐变的例子包括了饼图和<a href=\"/zh-CN/docs/Glossary/Color_wheel\">色轮</a>，但是也可以用于创建棋盘格和其他有趣的效果。</p>\n<p>锥形渐变的语法和径向渐变的语法类似，但是色标是围绕渐变弧（圆的圆周）进行的，而不是从渐变中心出现的渐变线上，并且色标是百分比或度数：绝对长度无效。</p>\n<p>在径向渐变中，颜色从椭圆中心的位置在各个方向上向外过渡。在锥形渐变中，颜色围绕圆的中心在圆周上旋转过渡，从顶部开始，顺时针进行。类似于径向渐变，你可以设置渐变的中心。类似于线性渐变，你可以改变渐变的角度。</p>"}},{"type":"prose","value":{"id":"基本的锥形渐变","title":"基本的锥形渐变","isH3":true,"content":"<p>和线性和径向的渐变类似，创建锥形渐变所需要的就是两个颜色。默认情况下，渐变的中心位于 50% 50% 的位置，渐变的开始点是朝上的。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"simple-conic\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.simple-conic {\n background: conic-gradient(red, blue);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"基本的锥形渐变 sample\" id=\"frame_基本的锥形渐变\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"基本的锥形渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"设置锥形渐变的位置","title":"设置锥形渐变的位置","isH3":true,"content":"<p>和锥形渐变类似，你可以使用关键词、百分比或者绝对长度，以及关键字“at”来设置锥形渐变的中心位置。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"conic-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.conic-gradient {\n background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"设置锥形渐变的位置 sample\" id=\"frame_设置锥形渐变的位置\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"设置锥形渐变的位置\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"改变角度","title":"改变角度","isH3":true,"content":"<p>默认情况下，你指定的不同色标是围绕着圆均等分布的。你可以在开始时使用“from”关键字以及一个角度或者长度以指定锥形渐变的起始点，然后你可以在后面包括角度或者长度以指定不同的位置。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"conic-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.conic-gradient {\n background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"改变角度 sample\" id=\"frame_改变角度\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"改变角度\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"使用重复渐变","title":"使用重复渐变","isH3":false,"content":"<p><a href=\"/zh-CN/docs/Web/CSS/gradient/linear-gradient\"><code>linear-gradient()</code></a>、<a href=\"/zh-CN/docs/Web/CSS/gradient/radial-gradient\"><code>radial-gradient()</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/gradient/conic-gradient\"><code>conic-gradient()</code></a> 函数不支持自动重复的色标。但是，<a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient\"><code>repeating-linear-gradient()</code></a>、<a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient\"><code>repeating-radial-gradient()</code></a> 和 <a href=\"/en-US/docs/Web/CSS/gradient/repeating-conic-gradient\" class=\"only-in-en-us\"><code>repeating-conic-gradient()</code></a> 函数可以用于提供此功能。</p>\n<p>重复渐变线或弧的大小，是第一个色标和最后一个色标之间的长度。如果第一个色标只有颜色没有色标长度，那么值默认为 0。如果最后一个色标只有颜色没有色标长度，那么值默认为 100%。如果都没有指定，那么渐变线是 100%，意味着线性和锥形的渐变都不会重复，径向渐变只会在渐变的半径小于中心点和最远角之间的距离时重复。如果第一个色标声明了，其值大于 0，渐变也会重复，因为线或弧的大小就是第一个色标和最后一个色标之间的距离，小于 100% 或 360 度。</p>"}},{"type":"prose","value":{"id":"重复的线性渐变","title":"重复的线性渐变","isH3":true,"content":"<p>这个例子使用了 <a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient\"><code>repeating-linear-gradient()</code></a> 以创建一个沿着直线重复推进的渐变。随渐变进行，颜色会重复循环。在这个例子中，渐变线的长度为 10px。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"repeating-linear\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.repeating-linear {\n background: repeating-linear-gradient(\n -45deg,\n red,\n red 5px,\n blue 5px,\n blue 10px\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"重复的线性渐变 sample\" id=\"frame_重复的线性渐变\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"重复的线性渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"多个线性渐变","title":"多个线性渐变","isH3":true,"content":"<p>和常规的线性和径向渐变类似，你可以包含多个渐变，一个在另一个的顶部。这只有在渐变部分透明时有效，以允许的后续的渐变穿透透明区域显示，或者你为每个渐变图像指定不同的 <a href=\"/zh-CN/docs/Web/CSS/background-size\">background-size</a>，还可以有不同的 <a href=\"/zh-CN/docs/Web/CSS/background-position\">background-position</a> 属性值。我们使用透明。</p>\n<p>在这个例子中，渐变线的长度为 300px、230px 和 300px。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"multi-repeating-linear\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 600px;\n height: 400px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.multi-repeating-linear {\n background:\n repeating-linear-gradient(\n 190deg,\n rgba(255, 0, 0, 0.5) 40px,\n rgba(255, 153, 0, 0.5) 80px,\n rgba(255, 255, 0, 0.5) 120px,\n rgba(0, 255, 0, 0.5) 160px,\n rgba(0, 0, 255, 0.5) 200px,\n rgba(75, 0, 130, 0.5) 240px,\n rgba(238, 130, 238, 0.5) 280px,\n rgba(255, 0, 0, 0.5) 300px\n ),\n repeating-linear-gradient(\n -190deg,\n rgba(255, 0, 0, 0.5) 30px,\n rgba(255, 153, 0, 0.5) 60px,\n rgba(255, 255, 0, 0.5) 90px,\n rgba(0, 255, 0, 0.5) 120px,\n rgba(0, 0, 255, 0.5) 150px,\n rgba(75, 0, 130, 0.5) 180px,\n rgba(238, 130, 238, 0.5) 210px,\n rgba(255, 0, 0, 0.5) 230px\n ),\n repeating-linear-gradient(\n 23deg,\n red 50px,\n orange 100px,\n yellow 150px,\n green 200px,\n blue 250px,\n indigo 300px,\n violet 350px,\n red 370px\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"多个线性渐变 sample\" id=\"frame_多个线性渐变\" width=\"600\" height=\"400\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"多个线性渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"格纹渐变","title":"格纹渐变","isH3":true,"content":"<p>要创建格纹，我们使用了几个重叠的带有透明的渐变。在第一个背景声明中，我们分别列举出了每个色标。第二个背景属性声明使用了色标的多个位置的语法：</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"plaid-gradient\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 200px;\n height: 200px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.plaid-gradient {\n background:\n repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 50px,\n rgba(255, 127, 0, 0.25) 50px,\n rgba(255, 127, 0, 0.25) 56px,\n transparent 56px,\n transparent 63px,\n rgba(255, 127, 0, 0.25) 63px,\n rgba(255, 127, 0, 0.25) 69px,\n transparent 69px,\n transparent 116px,\n rgba(255, 206, 0, 0.25) 116px,\n rgba(255, 206, 0, 0.25) 166px\n ),\n repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 50px,\n rgba(255, 127, 0, 0.25) 50px,\n rgba(255, 127, 0, 0.25) 56px,\n transparent 56px,\n transparent 63px,\n rgba(255, 127, 0, 0.25) 63px,\n rgba(255, 127, 0, 0.25) 69px,\n transparent 69px,\n transparent 116px,\n rgba(255, 206, 0, 0.25) 116px,\n rgba(255, 206, 0, 0.25) 166px\n ),\n repeating-linear-gradient(\n -45deg,\n transparent,\n transparent 5px,\n rgba(143, 77, 63, 0.25) 5px,\n rgba(143, 77, 63, 0.25) 10px\n ),\n repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 5px,\n rgba(143, 77, 63, 0.25) 5px,\n rgba(143, 77, 63, 0.25) 10px\n );\n\n background:\n repeating-linear-gradient(\n 90deg,\n transparent 0 50px,\n rgba(255, 127, 0, 0.25) 50px 56px,\n transparent 56px 63px,\n rgba(255, 127, 0, 0.25) 63px 69px,\n transparent 69px 116px,\n rgba(255, 206, 0, 0.25) 116px 166px\n ),\n repeating-linear-gradient(\n 0deg,\n transparent 0 50px,\n rgba(255, 127, 0, 0.25) 50px 56px,\n transparent 56px 63px,\n rgba(255, 127, 0, 0.25) 63px 69px,\n transparent 69px 116px,\n rgba(255, 206, 0, 0.25) 116px 166px\n ),\n repeating-linear-gradient(\n -45deg,\n transparent 0 5px,\n rgba(143, 77, 63, 0.25) 5px 10px\n ),\n repeating-linear-gradient(\n 45deg,\n transparent 0 5px,\n rgba(143, 77, 63, 0.25) 5px 10px\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"格纹渐变 sample\" id=\"frame_格纹渐变\" width=\"200\" height=\"200\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"格纹渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"重复的径向渐变","title":"重复的径向渐变","isH3":true,"content":"<p>这个例子使用了 <a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient\"><code>repeating-radial-gradient()</code></a> 以创建从中心点重复向外辐射的渐变。颜色会随渐变重复而循环。</p>\n<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"repeating-radial\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 120px;\n height: 120px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.repeating-radial {\n background: repeating-radial-gradient(\n black,\n black 5px,\n white 5px,\n white 10px\n );\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"重复的径向渐变 sample\" id=\"frame_重复的径向渐变\" width=\"120\" height=\"120\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"重复的径向渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"多个重复的径向渐变","title":"多个重复的径向渐变","isH3":true,"content":"<div class=\"code-example\"><pre class=\"brush: html hidden notranslate\"><code><div class=\"multi-target\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden notranslate\"><code>div {\n width: 250px;\n height: 150px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.multi-target {\n background:\n repeating-radial-gradient(\n ellipse at 80% 50%,\n rgba(0, 0, 0, 0.5),\n rgba(0, 0, 0, 0.5) 15px,\n rgba(255, 255, 255, 0.5) 15px,\n rgba(255, 255, 255, 0.5) 30px\n )\n top left no-repeat,\n repeating-radial-gradient(\n ellipse at 20% 50%,\n rgba(0, 0, 0, 0.5),\n rgba(0, 0, 0, 0.5) 10px,\n rgba(255, 255, 255, 0.5) 10px,\n rgba(255, 255, 255, 0.5) 20px\n )\n top left no-repeat yellow;\n background-size:\n 200px 200px,\n 150px 150px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"多个重复的径向渐变 sample\" id=\"frame_多个重复的径向渐变\" width=\"250\" height=\"150\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients/\" data-live-id=\"多个重复的径向渐变\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"参见","title":"参见","isH3":false,"content":"<ul>\n<li>渐变函数：<a href=\"/zh-CN/docs/Web/CSS/gradient/linear-gradient\"><code>linear-gradient()</code></a>、<a href=\"/zh-CN/docs/Web/CSS/gradient/radial-gradient\"><code>radial-gradient()</code></a>、<a href=\"/zh-CN/docs/Web/CSS/gradient/conic-gradient\"><code>conic-gradient()</code></a>、<a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient\"><code>repeating-linear-gradient()</code></a>、<a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient\"><code>repeating-radial-gradient()</code></a>、<a href=\"/en-US/docs/Web/CSS/gradient/repeating-conic-gradient\" class=\"only-in-en-us\"><code>repeating-conic-gradient()</code></a></li>\n<li>和渐变有关的 CSS 数据类型：<a href=\"/zh-CN/docs/Web/CSS/gradient\"><code><gradient></code></a>、<a href=\"/zh-CN/docs/Web/CSS/image\"><code><image></code></a></li>\n<li>和渐变有关的 CSS 属性：<a href=\"/zh-CN/docs/Web/CSS/background\"><code>background</code></a>、<a href=\"/zh-CN/docs/Web/CSS/background-image\"><code>background-image</code></a></li>\n<li><a href=\"https://projects.verou.me/css3patterns/\" class=\"external\" target=\"_blank\">CSS 渐变纹样图集，作者 Lea Verou</a></li>\n<li><a href=\"http://standardista.com/cssgradients/\" class=\"external\" target=\"_blank\">CSS 渐变库，作者 Estelle Weyl</a></li>\n<li><a href=\"https://cssgenerator.org/gradient-css-generator.html\" class=\"external\" target=\"_blank\">渐变 CSS 生成器</a></li>\n</ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"zh-CN","mdn_url":"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients","modified":"2025-02-10T12:55:50.000Z","native":"中文 (简体)","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Using CSS gradients","native":"English (US)"},{"locale":"de","title":"Verwendung von CSS-Verläufen","native":"Deutsch"},{"locale":"es","title":"Usando degradados con CSS","native":"Español"},{"locale":"fr","title":"Utilisation de dégradés CSS","native":"Français"},{"locale":"ja","title":"CSS グラデーションの使用","native":"日本語"},{"locale":"ko","title":"CSS 그라디언트 사용하기","native":"한국어"},{"locale":"ru","title":"Использование CSS-градиентов","native":"Русский"}],"pageTitle":"使用 CSS 渐变 - CSS：层叠样式表 | MDN","parents":[{"uri":"/zh-CN/docs/Web","title":"面向开发者的 Web 技术"},{"uri":"/zh-CN/docs/Web/CSS","title":"CSS：层叠样式表"},{"uri":"/en-US/docs/Web/CSS/CSS_images","title":"CSS images"},{"uri":"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients","title":"使用 CSS 渐变"}],"popularity":null,"short_title":"使用 CSS 渐变","sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Web/CSS\">CSS</a></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">初学者教程</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">你的第一个网站：样式化内容</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">CSS 样式基础</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">CSS 如何运行</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Getting_started\">让我们开始 CSS 的学习之旅</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">运用你的新知识</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">CSS 选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">属性选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">伪类和伪元素</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Combinators\">关系选择器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Box_model\">盒模型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">层叠、优先级与继承</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS 值和单位</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing\">在 CSS 中调整大小</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">背景与边框</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow\">溢出的内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">图像、媒体和表单元素</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Tables\">样式化表格</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">调试 CSS</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">基本的 CSS 理解</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">创建精美的信纸</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">一个漂亮的盒子</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling\">CSS 文本样式</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Fundamentals\">基本文本和字体样式</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_lists\">为列表添加样式</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Styling_links\">样式化链接</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Web 字体</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">作业：排版社区大学首页</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout\">CSS 布局概述</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Introduction\">介绍 CSS 布局</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Floats\">浮动</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Positioning\">定位</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Flexbox\">弹性盒子</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Grids\">网格</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">响应式设计</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Media_queries\">媒体查询入门指南</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">作业：基本布局理解</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Web/CSS/Reference\">CSS 参考</a></li><li class=\"toggle\"><details><summary>模块</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_anchor_positioning\" class=\"only-in-en-us\">CSS anchor positioning</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_animations\">CSS 动画</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders\">CSS 背景和边框</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_basic_user_interface\">CSS Basic User Interface</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_box_alignment\">CSS 盒子对齐</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_box_model\">CSS 基础框盒模型</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_sizing\" class=\"only-in-en-us\">CSS box sizing</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_cascade\" class=\"only-in-en-us\">CSS cascading and inheritance</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_color_adjustment\">CSS 颜色调整</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_colors\">CSS Color</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_compositing_and_blending\" class=\"only-in-en-us\">CSS compositing and blending</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_conditional_rules\" class=\"only-in-en-us\">CSS conditional rules</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_containment\">CSS 局限</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_counter_styles\">CSS 计数器样式</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_cascading_variables\" class=\"only-in-en-us\">CSS custom properties for cascading variables</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_display\" class=\"only-in-en-us\">CSS display</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_filter_effects\" class=\"only-in-en-us\">CSS filter effects</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout\">CSS 弹性盒子布局</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_font_loading\" class=\"only-in-en-us\">CSS font loading</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_fonts\">CSS 字体</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_fragmentation\">CSS 片段</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_generated_content\">CSS 生成内容</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout\">网格布局</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_images\" class=\"only-in-en-us\">CSS images</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_inline_layout\" class=\"only-in-en-us\">CSS inline layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_lists\" class=\"only-in-en-us\">CSS lists and counters</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values\">CSS 逻辑属性与逻辑值</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_masking\">CSS Masking</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_media_queries\">媒体查询</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_motion_path\" class=\"only-in-en-us\">CSS motion path</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_multicol_layout\">CSS 多列布局</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_namespaces\" class=\"only-in-en-us\">CSS namespaces</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_nesting\">CSS 嵌套</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_overflow\" class=\"only-in-en-us\">CSS overflow</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_overscroll_behavior\" class=\"only-in-en-us\">CSS overscroll behavior</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_paged_media\">CSS 分页媒体</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_positioned_layout\">CSS Positioning</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_properties_and_values_API\" class=\"only-in-en-us\">CSS properties and values API</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_pseudo-elements\" class=\"only-in-en-us\">CSS pseudo-elements</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_ruby_layout\" class=\"only-in-en-us\">CSS ruby layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_scoping\" class=\"only-in-en-us\">CSS scoping</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_scroll_snap\">CSS 滚动吸附</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_scroll-driven_animations\" class=\"only-in-en-us\">CSS scroll-driven animations</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_scrollbars_styling\">CSS Scrollbars</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_selectors\">CSS 选择器</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_shadow_parts\" class=\"only-in-en-us\">CSS shadow parts</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_shapes\">CSS 形状</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_syntax\" class=\"only-in-en-us\">CSS syntax</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_table\">CSS Table</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_text\">CSS Text</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_text_decoration\">CSS 文本装饰</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_transforms\">CSS Transforms</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_transitions\">CSS 过渡</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_Values_and_Units\">CSS 值和单位</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_view_transitions\" class=\"only-in-en-us\">CSS view transitions</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_writing_modes\">CSS Writing Modes CSS 写入模式</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSSOM_view\">CSSOM View</a></li></ol></details></li><li class=\"toggle\"><details><summary>属性</summary><ol><li class=\"toggle\"><details><summary>-moz-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/-moz-float-edge\">-moz-float-edge</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/-moz-force-broken-image-icon\">-moz-force-broken-image-icon</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-moz-image-region\" class=\"only-in-en-us\">-moz-image-region</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-moz-orient\" class=\"only-in-en-us\">-moz-orient</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-moz-user-focus\" class=\"only-in-en-us\">-moz-user-focus</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/-moz-user-input\">-moz-user-input</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>-webkit-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/-webkit-border-before\">-webkit-border-before</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/-webkit-box-reflect\">-webkit-box-reflect</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-box-image\" class=\"only-in-en-us\">-webkit-mask-box-image</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-composite\" class=\"only-in-en-us\">-webkit-mask-composite</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-position-x\" class=\"only-in-en-us\">-webkit-mask-position-x</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-position-y\" class=\"only-in-en-us\">-webkit-mask-position-y</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-repeat-x\" class=\"only-in-en-us\">-webkit-mask-repeat-x</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-mask-repeat-y\" class=\"only-in-en-us\">-webkit-mask-repeat-y</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/-webkit-tap-highlight-color\">-webkit-tap-highlight-color</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/-webkit-text-fill-color\">-webkit-text-fill-color</a></li><li><a href=\"/en-US/docs/Web/CSS/-webkit-text-security\" class=\"only-in-en-us\">-webkit-text-security</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/-webkit-text-stroke\">-webkit-text-stroke</a></li><li><a href=\"/zh-CN/docs/Web/CSS/-webkit-text-stroke-color\">-webkit-text-stroke-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/-webkit-text-stroke-width\">-webkit-text-stroke-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/-webkit-touch-callout\">-webkit-touch-callout</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/--*\">自定义属性（--*）：CSS 变量</a></li><li><a href=\"/zh-CN/docs/Web/CSS/accent-color\">accent-color</a></li><li class=\"toggle\"><details><summary>align-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/align-content\">align-content</a></li><li><a href=\"/zh-CN/docs/Web/CSS/align-items\">align-items</a></li><li><a href=\"/zh-CN/docs/Web/CSS/align-self\">align-self</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/alignment-baseline\" class=\"only-in-en-us\">alignment-baseline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/all\">all</a></li><li><a href=\"/en-US/docs/Web/CSS/anchor-name\" class=\"only-in-en-us\">anchor-name</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li class=\"toggle\"><details><summary>animation-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/animation\">animation</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-composition\" class=\"only-in-en-us\">animation-composition</a></li><li><a href=\"/zh-CN/docs/Web/CSS/animation-delay\">animation-delay</a></li><li><a href=\"/zh-CN/docs/Web/CSS/animation-direction\">animation-direction</a></li><li><a href=\"/zh-CN/docs/Web/CSS/animation-duration\">animation-duration</a></li><li><a href=\"/zh-CN/docs/Web/CSS/animation-fill-mode\">animation-fill-mode</a></li><li><a href=\"/zh-CN/docs/Web/CSS/animation-iteration-count\">animation-iteration-count</a></li><li><a href=\"/zh-CN/docs/Web/CSS/animation-name\">animation-name</a></li><li><a href=\"/zh-CN/docs/Web/CSS/animation-play-state\">animation-play-state</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-range\" class=\"only-in-en-us\">animation-range</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/animation-range-end\" class=\"only-in-en-us\">animation-range-end</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/animation-range-start\" class=\"only-in-en-us\">animation-range-start</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/animation-timeline\" class=\"only-in-en-us\">animation-timeline</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/animation-timing-function\">animation-timing-function</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/appearance\">appearance</a></li><li><a href=\"/zh-CN/docs/Web/CSS/aspect-ratio\">aspect-ratio</a></li><li><a href=\"/zh-CN/docs/Web/CSS/backdrop-filter\">backdrop-filter</a></li><li><a href=\"/zh-CN/docs/Web/CSS/backface-visibility\">backface-visibility</a></li><li class=\"toggle\"><details><summary>background-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/background\">background</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-attachment\">background-attachment</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-blend-mode\">background-blend-mode</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-clip\">background-clip</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-color\">background-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-image\">background-image</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-origin\">background-origin</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-position\">background-position</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-position-x\">background-position-x</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-position-y\">background-position-y</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-repeat\">background-repeat</a></li><li><a href=\"/zh-CN/docs/Web/CSS/background-size\">background-size</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/block-size\">block-size</a></li><li class=\"toggle\"><details><summary>border-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/border\">border</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block\">border-block</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-color\">border-block-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-end\">border-block-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-end-color\">border-block-end-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-end-style\">border-block-end-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-end-width\">border-block-end-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-start\">border-block-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-start-color\">border-block-start-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-start-style\">border-block-start-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-start-width\">border-block-start-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-style\">border-block-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-block-width\">border-block-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-bottom\">border-bottom</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-bottom-color\">border-bottom-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-bottom-left-radius\">border-bottom-left-radius</a></li><li><a href=\"/en-US/docs/Web/CSS/border-bottom-right-radius\" class=\"only-in-en-us\">border-bottom-right-radius</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-bottom-style\">border-bottom-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-bottom-width\">border-bottom-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-collapse\">border-collapse</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-color\">border-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-end-end-radius\">border-end-end-radius</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-end-start-radius\">border-end-start-radius</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-image\">border-image</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-image-outset\">border-image-outset</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-image-repeat\">border-image-repeat</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-image-slice\">border-image-slice</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-image-source\">border-image-source</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-image-width\">border-image-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline\">border-inline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-color\">border-inline-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-end\">border-inline-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-end-color\">border-inline-end-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-end-style\">border-inline-end-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-end-width\">border-inline-end-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-start\">border-inline-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-start-color\">border-inline-start-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-start-style\">border-inline-start-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-start-width\">border-inline-start-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-style\">border-inline-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-inline-width\">border-inline-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-left\">border-left</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-left-color\">border-left-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-left-style\">border-left-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-left-width\">border-left-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-radius\">border-radius</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-right\">border-right</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-right-color\">border-right-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-right-style\">border-right-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-right-width\">border-right-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-spacing\">border-spacing</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-start-end-radius\">border-start-end-radius</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-start-start-radius\">border-start-start-radius</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-style\">border-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-top\">border-top</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-top-color\">border-top-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-top-left-radius\">border-top-left-radius</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-top-right-radius\">border-top-right-radius</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-top-style\">border-top-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-top-width\">border-top-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/border-width\">border-width</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/bottom\">bottom</a></li><li class=\"toggle\"><details><summary>box-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/box-align\" class=\"only-in-en-us\">box-align</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/box-decoration-break\">box-decoration-break</a></li><li><a href=\"/en-US/docs/Web/CSS/box-direction\" class=\"only-in-en-us\">box-direction</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-flex\" class=\"only-in-en-us\">box-flex</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-flex-group\" class=\"only-in-en-us\">box-flex-group</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-lines\" class=\"only-in-en-us\">box-lines</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-ordinal-group\" class=\"only-in-en-us\">box-ordinal-group</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/box-orient\">box-orient</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/box-pack\" class=\"only-in-en-us\">box-pack</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/box-shadow\">box-shadow</a></li><li><a href=\"/zh-CN/docs/Web/CSS/box-sizing\">box-sizing</a></li></ol></details></li><li class=\"toggle\"><details><summary>break-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/break-after\">break-after</a></li><li><a href=\"/en-US/docs/Web/CSS/break-before\" class=\"only-in-en-us\">break-before</a></li><li><a href=\"/zh-CN/docs/Web/CSS/break-inside\">break-inside</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/caption-side\">caption-side</a></li><li><a href=\"/zh-CN/docs/Web/CSS/caret-color\">caret-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/clear\">clear</a></li><li class=\"toggle\"><details><summary>clip-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/clip\">clip</a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/clip-path\">clip-path</a></li><li><a href=\"/en-US/docs/Web/CSS/clip-rule\" class=\"only-in-en-us\">clip-rule</a></li></ol></details></li><li class=\"toggle\"><details><summary>color-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/color\">color</a></li><li><a href=\"/en-US/docs/Web/CSS/color-interpolation\" class=\"only-in-en-us\">color-interpolation</a></li><li><a href=\"/en-US/docs/Web/CSS/color-interpolation-filters\" class=\"only-in-en-us\">color-interpolation-filters</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color-scheme\">color-scheme</a></li></ol></details></li><li class=\"toggle\"><details><summary>column-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/column-count\">column-count</a></li><li><a href=\"/zh-CN/docs/Web/CSS/column-fill\">column-fill</a></li><li><a href=\"/zh-CN/docs/Web/CSS/column-gap\">column-gap</a></li><li><a href=\"/zh-CN/docs/Web/CSS/column-rule\">column-rule</a></li><li><a href=\"/zh-CN/docs/Web/CSS/column-rule-color\">column-rule-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/column-rule-style\">column-rule-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/column-rule-width\">column-rule-width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/column-span\">column-span</a></li><li><a href=\"/en-US/docs/Web/CSS/column-width\" class=\"only-in-en-us\">column-width</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/columns\">columns</a></li><li class=\"toggle\"><details><summary>contain-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/contain\">contain</a></li><li><a href=\"/zh-CN/docs/Web/CSS/contain-intrinsic-block-size\">contain-intrinsic-block-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/contain-intrinsic-height\">contain-intrinsic-height</a></li><li><a href=\"/zh-CN/docs/Web/CSS/contain-intrinsic-inline-size\">contain-intrinsic-inline-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/contain-intrinsic-size\">contain-intrinsic-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/contain-intrinsic-width\">contain-intrinsic-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>container-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/container\" class=\"only-in-en-us\">container</a></li><li><a href=\"/en-US/docs/Web/CSS/container-name\" class=\"only-in-en-us\">container-name</a></li><li><a href=\"/en-US/docs/Web/CSS/container-type\" class=\"only-in-en-us\">container-type</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/content\">content</a></li><li><a href=\"/zh-CN/docs/Web/CSS/content-visibility\">content-visibility</a></li><li class=\"toggle\"><details><summary>counter-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/counter-increment\">counter-increment</a></li><li><a href=\"/zh-CN/docs/Web/CSS/counter-reset\">counter-reset</a></li><li><a href=\"/zh-CN/docs/Web/CSS/counter-set\">counter-set</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/cursor\">cursor</a></li><li><a href=\"/en-US/docs/Web/CSS/cx\" class=\"only-in-en-us\">cx</a></li><li><a href=\"/en-US/docs/Web/CSS/cy\" class=\"only-in-en-us\">cy</a></li><li><a href=\"/en-US/docs/Web/CSS/d\" class=\"only-in-en-us\">d</a></li><li><a href=\"/zh-CN/docs/Web/CSS/direction\">direction</a></li><li><a href=\"/zh-CN/docs/Web/CSS/display\">display</a></li><li><a href=\"/en-US/docs/Web/CSS/dominant-baseline\" class=\"only-in-en-us\">dominant-baseline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/empty-cells\">empty-cells</a></li><li><a href=\"/en-US/docs/Web/CSS/field-sizing\" class=\"only-in-en-us\">field-sizing</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li class=\"toggle\"><details><summary>fill-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/fill\" class=\"only-in-en-us\">fill</a></li><li><a href=\"/en-US/docs/Web/CSS/fill-opacity\" class=\"only-in-en-us\">fill-opacity</a></li><li><a href=\"/en-US/docs/Web/CSS/fill-rule\" class=\"only-in-en-us\">fill-rule</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/filter\">filter</a></li><li class=\"toggle\"><details><summary>flex-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/flex\">flex</a></li><li><a href=\"/zh-CN/docs/Web/CSS/flex-basis\">flex-basis</a></li><li><a href=\"/zh-CN/docs/Web/CSS/flex-direction\">flex-direction</a></li><li><a href=\"/zh-CN/docs/Web/CSS/flex-flow\">flex-flow</a></li><li><a href=\"/zh-CN/docs/Web/CSS/flex-grow\">flex-grow</a></li><li><a href=\"/zh-CN/docs/Web/CSS/flex-shrink\">flex-shrink</a></li><li><a href=\"/zh-CN/docs/Web/CSS/flex-wrap\">flex-wrap</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/float\">float</a></li><li><a href=\"/en-US/docs/Web/CSS/flood-color\" class=\"only-in-en-us\">flood-color</a></li><li><a href=\"/en-US/docs/Web/CSS/flood-opacity\" class=\"only-in-en-us\">flood-opacity</a></li><li class=\"toggle\"><details><summary>font-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/font\">font</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-family\">font-family</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-feature-settings\">font-feature-settings</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-kerning\">font-kerning</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-language-override\">font-language-override</a></li><li><a href=\"/en-US/docs/Web/CSS/font-optical-sizing\" class=\"only-in-en-us\">font-optical-sizing</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-palette\">font-palette</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-size\">font-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-size-adjust\">font-size-adjust</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-smooth\">font-smooth</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/font-stretch\">font-stretch</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-style\">font-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-synthesis\">font-synthesis</a></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis-position\" class=\"only-in-en-us\">font-synthesis-position</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis-small-caps\" class=\"only-in-en-us\">font-synthesis-small-caps</a></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis-style\" class=\"only-in-en-us\">font-synthesis-style</a></li><li><a href=\"/en-US/docs/Web/CSS/font-synthesis-weight\" class=\"only-in-en-us\">font-synthesis-weight</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-variant\">font-variant</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-variant-alternates\">font-variant-alternates</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-variant-caps\">font-variant-caps</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-east-asian\" class=\"only-in-en-us\">font-variant-east-asian</a></li><li><a href=\"/en-US/docs/Web/CSS/font-variant-emoji\" class=\"only-in-en-us\">font-variant-emoji</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-variant-ligatures\">font-variant-ligatures</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-variant-numeric\">font-variant-numeric</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-variant-position\">font-variant-position</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-variation-settings\">font-variation-settings</a></li><li><a href=\"/zh-CN/docs/Web/CSS/font-weight\">font-weight</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/forced-color-adjust\">forced-color-adjust</a></li><li><a href=\"/zh-CN/docs/Web/CSS/gap\">gap</a></li><li class=\"toggle\"><details><summary>grid-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/grid\">grid</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-area\">grid-area</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-auto-columns\">grid-auto-columns</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-auto-flow\">grid-auto-flow</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-auto-rows\">grid-auto-rows</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-column\">grid-column</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-column-end\" class=\"only-in-en-us\">grid-column-end</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-column-start\" class=\"only-in-en-us\">grid-column-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-row\">grid-row</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-row-end\" class=\"only-in-en-us\">grid-row-end</a></li><li><a href=\"/en-US/docs/Web/CSS/grid-row-start\" class=\"only-in-en-us\">grid-row-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-template\">grid-template</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-template-areas\">grid-template-areas</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-template-columns\">grid-template-columns</a></li><li><a href=\"/zh-CN/docs/Web/CSS/grid-template-rows\">grid-template-rows</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/hanging-punctuation\">hanging-punctuation</a></li><li><a href=\"/zh-CN/docs/Web/CSS/height\">height</a></li><li><a href=\"/en-US/docs/Web/CSS/hyphenate-character\" class=\"only-in-en-us\">hyphenate-character</a></li><li><a href=\"/en-US/docs/Web/CSS/hyphenate-limit-chars\" class=\"only-in-en-us\">hyphenate-limit-chars</a></li><li><a href=\"/zh-CN/docs/Web/CSS/hyphens\">hyphens</a></li><li class=\"toggle\"><details><summary>image-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/image-orientation\">image-orientation</a></li><li><a href=\"/zh-CN/docs/Web/CSS/image-rendering\">image-rendering</a></li><li><a href=\"/en-US/docs/Web/CSS/image-resolution\" class=\"only-in-en-us\">image-resolution</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/initial-letter\">initial-letter</a></li><li><a href=\"/zh-CN/docs/Web/CSS/inline-size\">inline-size</a></li><li class=\"toggle\"><details><summary>inset-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/inset\">inset</a></li><li><a href=\"/zh-CN/docs/Web/CSS/inset-block\">inset-block</a></li><li><a href=\"/zh-CN/docs/Web/CSS/inset-block-end\">inset-block-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/inset-block-start\">inset-block-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/inset-inline\">inset-inline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/inset-inline-end\">inset-inline-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/inset-inline-start\">inset-inline-start</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/interpolate-size\" class=\"only-in-en-us\">interpolate-size</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/isolation\">isolation</a></li><li class=\"toggle\"><details><summary>justify-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/justify-content\">justify-content</a></li><li><a href=\"/zh-CN/docs/Web/CSS/justify-items\">justify-items</a></li><li><a href=\"/zh-CN/docs/Web/CSS/justify-self\">justify-self</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/left\">left</a></li><li><a href=\"/zh-CN/docs/Web/CSS/letter-spacing\">letter-spacing</a></li><li><a href=\"/en-US/docs/Web/CSS/lighting-color\" class=\"only-in-en-us\">lighting-color</a></li><li class=\"toggle\"><details><summary>line-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/line-break\">line-break</a></li><li><a href=\"/zh-CN/docs/Web/CSS/line-clamp\">line-clamp</a></li><li><a href=\"/zh-CN/docs/Web/CSS/line-height\">line-height</a></li><li><a href=\"/en-US/docs/Web/CSS/line-height-step\" class=\"only-in-en-us\">line-height-step</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>list-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/list-style\">list-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/list-style-image\">list-style-image</a></li><li><a href=\"/zh-CN/docs/Web/CSS/list-style-position\">list-style-position</a></li><li><a href=\"/zh-CN/docs/Web/CSS/list-style-type\">list-style-type</a></li></ol></details></li><li class=\"toggle\"><details><summary>margin-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/margin\">margin</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-block\">margin-block</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-block-end\">margin-block-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-block-start\">margin-block-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-bottom\">margin-bottom</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-inline\">margin-inline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-inline-end\">margin-inline-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-inline-start\">margin-inline-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-left\">margin-left</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-right\">margin-right</a></li><li><a href=\"/zh-CN/docs/Web/CSS/margin-top\">margin-top</a></li><li><a href=\"/en-US/docs/Web/CSS/margin-trim\" class=\"only-in-en-us\">margin-trim</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>marker-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/marker\" class=\"only-in-en-us\">marker</a></li><li><a href=\"/en-US/docs/Web/CSS/marker-end\" class=\"only-in-en-us\">marker-end</a></li><li><a href=\"/en-US/docs/Web/CSS/marker-mid\" class=\"only-in-en-us\">marker-mid</a></li><li><a href=\"/en-US/docs/Web/CSS/marker-start\" class=\"only-in-en-us\">marker-start</a></li></ol></details></li><li class=\"toggle\"><details><summary>mask-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/mask\">mask</a></li><li><a href=\"/zh-CN/docs/Web/CSS/mask-border\">mask-border</a></li><li><a href=\"/zh-CN/docs/Web/CSS/mask-border-mode\">mask-border-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border-outset\" class=\"only-in-en-us\">mask-border-outset</a></li><li><a href=\"/zh-CN/docs/Web/CSS/mask-border-repeat\">mask-border-repeat</a></li><li><a href=\"/zh-CN/docs/Web/CSS/mask-border-slice\">mask-border-slice</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-border-source\" class=\"only-in-en-us\">mask-border-source</a></li><li><a href=\"/zh-CN/docs/Web/CSS/mask-border-width\">mask-border-width</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-clip\" class=\"only-in-en-us\">mask-clip</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-composite\" class=\"only-in-en-us\">mask-composite</a></li><li><a href=\"/zh-CN/docs/Web/CSS/mask-image\">mask-image</a></li><li><a href=\"/zh-CN/docs/Web/CSS/mask-mode\">mask-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-origin\" class=\"only-in-en-us\">mask-origin</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-position\" class=\"only-in-en-us\">mask-position</a></li><li><a href=\"/zh-CN/docs/Web/CSS/mask-repeat\">mask-repeat</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-size\" class=\"only-in-en-us\">mask-size</a></li><li><a href=\"/en-US/docs/Web/CSS/mask-type\" class=\"only-in-en-us\">mask-type</a></li></ol></details></li><li class=\"toggle\"><details><summary>math-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/math-depth\" class=\"only-in-en-us\">math-depth</a></li><li><a href=\"/en-US/docs/Web/CSS/math-shift\" class=\"only-in-en-us\">math-shift</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/math-style\" class=\"only-in-en-us\">math-style</a></li></ol></details></li><li class=\"toggle\"><details><summary>max-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/max-block-size\" class=\"only-in-en-us\">max-block-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/max-height\">max-height</a></li><li><a href=\"/zh-CN/docs/Web/CSS/max-inline-size\">max-inline-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/max-width\">max-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>min-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/min-block-size\">min-block-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/min-height\">min-height</a></li><li><a href=\"/zh-CN/docs/Web/CSS/min-inline-size\">min-inline-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/min-width\">min-width</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/mix-blend-mode\">mix-blend-mode</a></li><li><a href=\"/zh-CN/docs/Web/CSS/object-fit\">object-fit</a></li><li><a href=\"/zh-CN/docs/Web/CSS/object-position\">object-position</a></li><li class=\"toggle\"><details><summary>offset-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/offset\">offset</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-anchor\" class=\"only-in-en-us\">offset-anchor</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-distance\" class=\"only-in-en-us\">offset-distance</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-path\" class=\"only-in-en-us\">offset-path</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-position\" class=\"only-in-en-us\">offset-position</a></li><li><a href=\"/en-US/docs/Web/CSS/offset-rotate\" class=\"only-in-en-us\">offset-rotate</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/opacity\">opacity</a></li><li><a href=\"/zh-CN/docs/Web/CSS/order\">order</a></li><li><a href=\"/en-US/docs/Web/CSS/orphans\" class=\"only-in-en-us\">orphans</a></li><li class=\"toggle\"><details><summary>outline-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/outline\">outline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/outline-color\">outline-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/outline-offset\">outline-offset</a></li><li><a href=\"/zh-CN/docs/Web/CSS/outline-style\">outline-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/outline-width\">outline-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>overflow-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/overflow\">overflow</a></li><li><a href=\"/zh-CN/docs/Web/CSS/overflow-anchor\">overflow-anchor</a></li><li><a href=\"/zh-CN/docs/Web/CSS/overflow-block\">overflow-block</a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-clip-margin\" class=\"only-in-en-us\">overflow-clip-margin</a></li><li><a href=\"/zh-CN/docs/Web/CSS/overflow-inline\">overflow-inline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/overflow-wrap\">overflow-wrap</a></li><li><a href=\"/zh-CN/docs/Web/CSS/overflow-x\">overflow-x</a></li><li><a href=\"/zh-CN/docs/Web/CSS/overflow-y\">overflow-y</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/overlay\" class=\"only-in-en-us\">overlay</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li class=\"toggle\"><details><summary>overscroll-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/overscroll-behavior\">overscroll-behavior</a></li><li><a href=\"/en-US/docs/Web/CSS/overscroll-behavior-block\" class=\"only-in-en-us\">overscroll-behavior-block</a></li><li><a href=\"/en-US/docs/Web/CSS/overscroll-behavior-inline\" class=\"only-in-en-us\">overscroll-behavior-inline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/overscroll-behavior-x\">overscroll-behavior-x</a></li><li><a href=\"/zh-CN/docs/Web/CSS/overscroll-behavior-y\">overscroll-behavior-y</a></li></ol></details></li><li class=\"toggle\"><details><summary>padding-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/padding\">padding</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-block\">padding-block</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-block-end\">padding-block-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-block-start\">padding-block-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-bottom\">padding-bottom</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-inline\">padding-inline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-inline-end\">padding-inline-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-inline-start\">padding-inline-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-left\">padding-left</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-right\">padding-right</a></li><li><a href=\"/zh-CN/docs/Web/CSS/padding-top\">padding-top</a></li></ol></details></li><li class=\"toggle\"><details><summary>page-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/page\" class=\"only-in-en-us\">page</a></li><li><a href=\"/zh-CN/docs/Web/CSS/page-break-after\">page-break-after</a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/page-break-before\" class=\"only-in-en-us\">page-break-before</a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/page-break-inside\" class=\"only-in-en-us\">page-break-inside</a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/paint-order\">paint-order</a></li><li><a href=\"/zh-CN/docs/Web/CSS/perspective\">perspective</a></li><li><a href=\"/zh-CN/docs/Web/CSS/perspective-origin\">perspective-origin</a></li><li class=\"toggle\"><details><summary>place-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/place-content\">place-content</a></li><li><a href=\"/zh-CN/docs/Web/CSS/place-items\">place-items</a></li><li><a href=\"/en-US/docs/Web/CSS/place-self\" class=\"only-in-en-us\">place-self</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/pointer-events\">pointer-events</a></li><li class=\"toggle\"><details><summary>position-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/position\">position</a></li><li><a href=\"/en-US/docs/Web/CSS/position-anchor\" class=\"only-in-en-us\">position-anchor</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-area\" class=\"only-in-en-us\">position-area</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-try\" class=\"only-in-en-us\">position-try</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-try-fallbacks\" class=\"only-in-en-us\">position-try-fallbacks</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-try-order\" class=\"only-in-en-us\">position-try-order</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/position-visibility\" class=\"only-in-en-us\">position-visibility</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/print-color-adjust\">print-color-adjust</a></li><li><a href=\"/zh-CN/docs/Web/CSS/quotes\">quotes</a></li><li><a href=\"/en-US/docs/Web/CSS/r\" class=\"only-in-en-us\">r</a></li><li><a href=\"/zh-CN/docs/Web/CSS/resize\">resize</a></li><li><a href=\"/zh-CN/docs/Web/CSS/right\">right</a></li><li><a href=\"/zh-CN/docs/Web/CSS/rotate\">rotate</a></li><li><a href=\"/zh-CN/docs/Web/CSS/row-gap\">row-gap</a></li><li><a href=\"/en-US/docs/Web/CSS/ruby-align\" class=\"only-in-en-us\">ruby-align</a></li><li><a href=\"/en-US/docs/Web/CSS/ruby-position\" class=\"only-in-en-us\">ruby-position</a></li><li><a href=\"/en-US/docs/Web/CSS/rx\" class=\"only-in-en-us\">rx</a></li><li><a href=\"/en-US/docs/Web/CSS/ry\" class=\"only-in-en-us\">ry</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scale\">scale</a></li><li class=\"toggle\"><details><summary>scroll-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/scroll-behavior\">scroll-behavior</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin\">scroll-margin</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-block\">scroll-margin-block</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-block-end\">scroll-margin-block-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-block-start\">scroll-margin-block-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-bottom\">scroll-margin-bottom</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-inline\">scroll-margin-inline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-inline-end\">scroll-margin-inline-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-inline-start\">scroll-margin-inline-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-left\">scroll-margin-left</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-right\">scroll-margin-right</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-margin-top\">scroll-margin-top</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding\">scroll-padding</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-block\">scroll-padding-block</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-block-end\">scroll-padding-block-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-block-start\">scroll-padding-block-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-bottom\">scroll-padding-bottom</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-inline\">scroll-padding-inline</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-inline-end\">scroll-padding-inline-end</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-inline-start\">scroll-padding-inline-start</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-left\">scroll-padding-left</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-right\">scroll-padding-right</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-padding-top\">scroll-padding-top</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-snap-align\">scroll-snap-align</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-snap-stop\">scroll-snap-stop</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scroll-snap-type\">scroll-snap-type</a></li><li><a href=\"/en-US/docs/Web/CSS/scroll-timeline\" class=\"only-in-en-us\">scroll-timeline</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/scroll-timeline-axis\" class=\"only-in-en-us\">scroll-timeline-axis</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/scroll-timeline-name\" class=\"only-in-en-us\">scroll-timeline-name</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>scrollbar-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/scrollbar-color\">scrollbar-color</a></li><li><a href=\"/en-US/docs/Web/CSS/scrollbar-gutter\" class=\"only-in-en-us\">scrollbar-gutter</a></li><li><a href=\"/zh-CN/docs/Web/CSS/scrollbar-width\">scrollbar-width</a></li></ol></details></li><li class=\"toggle\"><details><summary>shape-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/shape-image-threshold\">shape-image-threshold</a></li><li><a href=\"/zh-CN/docs/Web/CSS/shape-margin\">shape-margin</a></li><li><a href=\"/zh-CN/docs/Web/CSS/shape-outside\">shape-outside</a></li><li><a href=\"/en-US/docs/Web/CSS/shape-rendering\" class=\"only-in-en-us\">shape-rendering</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/stop-color\" class=\"only-in-en-us\">stop-color</a></li><li><a href=\"/en-US/docs/Web/CSS/stop-opacity\" class=\"only-in-en-us\">stop-opacity</a></li><li class=\"toggle\"><details><summary>stroke-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/stroke\" class=\"only-in-en-us\">stroke</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-dasharray\" class=\"only-in-en-us\">stroke-dasharray</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-dashoffset\" class=\"only-in-en-us\">stroke-dashoffset</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-linecap\" class=\"only-in-en-us\">stroke-linecap</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-linejoin\" class=\"only-in-en-us\">stroke-linejoin</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-miterlimit\" class=\"only-in-en-us\">stroke-miterlimit</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-opacity\" class=\"only-in-en-us\">stroke-opacity</a></li><li><a href=\"/en-US/docs/Web/CSS/stroke-width\" class=\"only-in-en-us\">stroke-width</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/tab-size\">tab-size</a></li><li><a href=\"/zh-CN/docs/Web/CSS/table-layout\">table-layout</a></li><li class=\"toggle\"><details><summary>text-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/text-align\">text-align</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-align-last\">text-align-last</a></li><li><a href=\"/en-US/docs/Web/CSS/text-anchor\" class=\"only-in-en-us\">text-anchor</a></li><li><a href=\"/en-US/docs/Web/CSS/text-combine-upright\" class=\"only-in-en-us\">text-combine-upright</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-decoration\">text-decoration</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-decoration-color\">text-decoration-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-decoration-line\">text-decoration-line</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-decoration-skip\">text-decoration-skip</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/text-decoration-skip-ink\" class=\"only-in-en-us\">text-decoration-skip-ink</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-decoration-style\">text-decoration-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-decoration-thickness\">文本装饰线厚度 (粗细)</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-emphasis\">text-emphasis</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-emphasis-color\">text-emphasis-color</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-emphasis-position\">text-emphasis-position</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-emphasis-style\">text-emphasis-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-indent\">text-indent</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-justify\">text-justify</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-orientation\">text-orientation</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-overflow\">text-overflow</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-rendering\">文本渲染</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-shadow\">text-shadow</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-size-adjust\">text-size-adjust</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/text-spacing-trim\" class=\"only-in-en-us\">text-spacing-trim</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/text-transform\">text-transform</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-underline-offset\">text-underline-offset</a></li><li><a href=\"/zh-CN/docs/Web/CSS/text-underline-position\">text-underline-position</a></li><li><a href=\"/en-US/docs/Web/CSS/text-wrap\" class=\"only-in-en-us\">text-wrap</a></li><li><a href=\"/en-US/docs/Web/CSS/text-wrap-mode\" class=\"only-in-en-us\">text-wrap-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/text-wrap-style\" class=\"only-in-en-us\">text-wrap-style</a></li></ol></details></li><li><a href=\"/en-US/docs/Web/CSS/timeline-scope\" class=\"only-in-en-us\">timeline-scope</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/top\">top</a></li><li><a href=\"/zh-CN/docs/Web/CSS/touch-action\">touch-action</a></li><li class=\"toggle\"><details><summary>transform-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/transform\">transform</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-box\">transform-box</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-origin\">transform-origin</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-style\">transform-style</a></li></ol></details></li><li class=\"toggle\"><details><summary>transition-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/transition\">transition</a></li><li><a href=\"/en-US/docs/Web/CSS/transition-behavior\" class=\"only-in-en-us\">transition-behavior</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transition-delay\">transition-delay</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transition-duration\">transition-duration</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transition-property\">transition-property</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transition-timing-function\">transition-timing-function</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/translate\">translate</a></li><li><a href=\"/zh-CN/docs/Web/CSS/unicode-bidi\">unicode-bidi</a></li><li><a href=\"/en-US/docs/Web/CSS/user-modify\" class=\"only-in-en-us\">user-modify</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/user-select\">user-select</a></li><li><a href=\"/en-US/docs/Web/CSS/vector-effect\" class=\"only-in-en-us\">vector-effect</a></li><li><a href=\"/zh-CN/docs/Web/CSS/vertical-align\">vertical-align</a></li><li class=\"toggle\"><details><summary>view-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/view-timeline\" class=\"only-in-en-us\">view-timeline</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/view-timeline-axis\" class=\"only-in-en-us\">view-timeline-axis</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/view-timeline-inset\" class=\"only-in-en-us\">view-timeline-inset</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/view-timeline-name\" class=\"only-in-en-us\">view-timeline-name</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/view-transition-name\">view-transition-name</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/visibility\">visibility</a></li><li><a href=\"/zh-CN/docs/Web/CSS/white-space\">white-space</a></li><li><a href=\"/en-US/docs/Web/CSS/white-space-collapse\" class=\"only-in-en-us\">white-space-collapse</a></li><li><a href=\"/zh-CN/docs/Web/CSS/widows\">widows</a></li><li><a href=\"/zh-CN/docs/Web/CSS/width\">width</a></li><li><a href=\"/zh-CN/docs/Web/CSS/will-change\">will-change</a></li><li><a href=\"/zh-CN/docs/Web/CSS/word-break\">word-break</a></li><li><a href=\"/zh-CN/docs/Web/CSS/word-spacing\">word-spacing</a></li><li><a href=\"/zh-CN/docs/Web/CSS/writing-mode\">writing-mode</a></li><li><a href=\"/en-US/docs/Web/CSS/x\" class=\"only-in-en-us\">x</a></li><li><a href=\"/en-US/docs/Web/CSS/y\" class=\"only-in-en-us\">y</a></li><li><a href=\"/zh-CN/docs/Web/CSS/z-index\">z-index</a></li><li><a href=\"/en-US/docs/Web/CSS/zoom\" class=\"only-in-en-us\">zoom</a></li></ol></details></li><li class=\"toggle\"><details><summary>选择器</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/Nesting_selector\">& 嵌套选择器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Attribute_selectors\">属性选择器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Class_selectors\">类选择器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/ID_selectors\">ID 选择器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Type_selectors\">类型选择器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Universal_selectors\">通配选择器</a></li></ol></details></li><li class=\"toggle\"><details><summary>关系选择器</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/Child_combinator\">子组合器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Column_combinator\">列组合器</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/Descendant_combinator\">后代选择器</a></li><li><a href=\"/en-US/docs/Web/CSS/Namespace_separator\" class=\"only-in-en-us\">Namespace separator</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Next-sibling_combinator\">接续兄弟组合器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Selector_list\">选择器列表</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Subsequent-sibling_combinator\">后续兄弟选择器</a></li></ol></details></li><li class=\"toggle\"><details><summary>伪类</summary><ol><li class=\"toggle\"><details><summary>:-moz-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/:-moz-broken\">:-moz-broken</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/:-moz-drag-over\">:-moz-drag-over</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/:-moz-first-node\">:-moz-first-node</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-handler-blocked\" class=\"only-in-en-us\">:-moz-handler-blocked</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-handler-crashed\" class=\"only-in-en-us\">:-moz-handler-crashed</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-handler-disabled\" class=\"only-in-en-us\">:-moz-handler-disabled</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-last-node\" class=\"only-in-en-us\">:-moz-last-node</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-loading\" class=\"only-in-en-us\">:-moz-loading</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-locale-dir_ltr\" class=\"only-in-en-us\">:-moz-locale-dir(ltr)</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-locale-dir_rtl\" class=\"only-in-en-us\">:-moz-locale-dir(rtl)</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/:-moz-only-whitespace\">:blank</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-submit-invalid\" class=\"only-in-en-us\">:-moz-submit-invalid</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-suppressed\" class=\"only-in-en-us\">:-moz-suppressed</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:-moz-user-disabled\" class=\"only-in-en-us\">:-moz-user-disabled</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/:-moz-window-inactive\">:-moz-window-inactive</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/:active\">:active</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:any-link\">:any-link</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:autofill\">:autofill</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:blank\">:blank</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:buffering\" class=\"only-in-en-us\">:buffering</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:checked\">:checked</a></li><li><a href=\"/en-US/docs/Web/CSS/:current\" class=\"only-in-en-us\">:current</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/:default\">:default</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:defined\">:defined</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:dir\">:dir()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:disabled\">:disabled</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:empty\">:empty</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:enabled\">:enabled</a></li><li class=\"toggle\"><details><summary>:first-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/:first\">:first</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:first-child\">:first-child</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:first-of-type\">:first-of-type</a></li></ol></details></li><li class=\"toggle\"><details><summary>:focus-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/:focus\">:focus</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:focus-visible\">:focus-visible</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:focus-within\">:focus-within</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/:fullscreen\">:fullscreen</a></li><li><a href=\"/en-US/docs/Web/CSS/:future\" class=\"only-in-en-us\">:future</a></li><li><a href=\"/en-US/docs/Web/CSS/:has-slotted\" class=\"only-in-en-us\">:has-slotted</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:has\">:has()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:host\">:host</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:host-context\">:host-context()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:host_function\">:host()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:hover\">:hover</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:in-range\">:in-range</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:indeterminate\">:indeterminate</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:invalid\">:invalid</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:is\">:is()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:lang\">:lang()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:last-child\">:last-child</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:last-of-type\">:last-of-type</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:left\">:left</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:link\">:link</a></li><li><a href=\"/en-US/docs/Web/CSS/:local-link\" class=\"only-in-en-us\">:local-link</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:modal\" class=\"only-in-en-us\">:modal</a></li><li><a href=\"/en-US/docs/Web/CSS/:muted\" class=\"only-in-en-us\">:muted</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:not\">:not()</a></li><li class=\"toggle\"><details><summary>:nth-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/:nth-child\">:nth-child()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:nth-last-child\">:nth-last-child</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:nth-last-of-type\">:nth-last-of-type</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:nth-of-type\">:nth-of-type</a></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/:only-child\">:only-child</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:only-of-type\">:only-of-type</a></li><li><a href=\"/en-US/docs/Web/CSS/:open\" class=\"only-in-en-us\">:open</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:optional\">:optional</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:out-of-range\">:out-of-range</a></li><li><a href=\"/en-US/docs/Web/CSS/:past\" class=\"only-in-en-us\">:past</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:paused\">:paused</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:picture-in-picture\">:picture-in-picture</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:placeholder-shown\">:placeholder-shown</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:playing\">:playing</a></li><li><a href=\"/en-US/docs/Web/CSS/:popover-open\" class=\"only-in-en-us\">:popover-open</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:read-only\">:read-only</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:read-write\">:read-write</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:required\">:required</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:right\">:right</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:root\">:root</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:scope\">:scope</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:seeking\">:seeking</a></li><li><a href=\"/en-US/docs/Web/CSS/:stalled\" class=\"only-in-en-us\">:stalled</a></li><li><a href=\"/en-US/docs/Web/CSS/:state\" class=\"only-in-en-us\">:state()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:target\">:target</a></li><li><a href=\"/en-US/docs/Web/CSS/:target-within\" class=\"only-in-en-us\">:target-within</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/:user-invalid\" class=\"only-in-en-us\">:user-invalid</a></li><li><a href=\"/en-US/docs/Web/CSS/:user-valid\" class=\"only-in-en-us\">:user-valid</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:valid\">:valid</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:visited\">:visited</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:volume-locked\">:volume-locked</a></li><li><a href=\"/zh-CN/docs/Web/CSS/:where\">:where()</a></li></ol></details></li><li class=\"toggle\"><details><summary>伪元素</summary><ol><li class=\"toggle\"><details><summary>::-moz-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/::-moz-color-swatch\">::-moz-color-swatch</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-moz-focus-inner\">::-moz-focus-inner</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-moz-list-bullet\">::-moz-list-bullet</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-moz-list-number\">::-moz-list-number</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-meter-bar\" class=\"only-in-en-us\">::-moz-meter-bar</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-moz-progress-bar\">::-moz-progress-bar</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-moz-range-progress\">::-moz-range-progress</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-range-thumb\" class=\"only-in-en-us\">::-moz-range-thumb</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-moz-range-track\" class=\"only-in-en-us\">::-moz-range-track</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>::-webkit-*</summary><ol><li><a href=\"/en-US/docs/Web/CSS/::-webkit-inner-spin-button\" class=\"only-in-en-us\">::-webkit-inner-spin-button</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-bar\" class=\"only-in-en-us\">::-webkit-meter-bar</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-even-less-good-value\" class=\"only-in-en-us\">::-webkit-meter-even-less-good-value</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-inner-element\" class=\"only-in-en-us\">::-webkit-meter-inner-element</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-optimum-value\" class=\"only-in-en-us\">::-webkit-meter-optimum-value</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-meter-suboptimum-value\" class=\"only-in-en-us\">::-webkit-meter-suboptimum-value</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-webkit-progress-bar\">::-webkit-progress-bar</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-webkit-progress-inner-element\">::-webkit-progress-inner-element</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-webkit-progress-value\">::-webkit-progress-value</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-webkit-scrollbar\">::-webkit-scrollbar</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-search-cancel-button\" class=\"only-in-en-us\">::-webkit-search-cancel-button</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/::-webkit-search-results-button\" class=\"only-in-en-us\">::-webkit-search-results-button</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-webkit-slider-runnable-track\">::-webkit-slider-runnable-track</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::-webkit-slider-thumb\">::-webkit-slider-thumb</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr></li></ol></details></li><li><a href=\"/zh-CN/docs/Web/CSS/::after\">::after</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::backdrop\">::backdrop</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::before\">::before</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::cue\">::cue (:cue)</a></li><li><a href=\"/en-US/docs/Web/CSS/::details-content\" class=\"only-in-en-us\">::details-content</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/::file-selector-button\">::file-selector-button</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::first-letter\">::first-letter</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::first-line\">::first-line (:first-line)</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::grammar-error\">::grammar-error</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::highlight\">::highlight()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::marker\">::marker</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::part\">::part()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::placeholder\">::placeholder</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::selection\">::selection</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::slotted\">::slotted()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::spelling-error\">::spelling-error</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::target-text\">::target-text</a></li><li class=\"toggle\"><details><summary>::view-*</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/::view-transition\">::view-transition</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::view-transition-group\">::view-transition-group</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::view-transition-image-pair\">::view-transition-image-pair</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::view-transition-new\">::view-transition-new</a></li><li><a href=\"/zh-CN/docs/Web/CSS/::view-transition-old\">::view-transition-old</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary>At 规则</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/@charset\">@charset</a></li><li><a href=\"/en-US/docs/Web/CSS/@color-profile\" class=\"only-in-en-us\">@color-profile</a></li><li><a href=\"/en-US/docs/Web/CSS/@container\" class=\"only-in-en-us\">@container</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@counter-style\">@counter-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@document\">@document</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/@font-face\">@font-face</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@font-feature-values\">@font-feature-values</a></li><li><a href=\"/en-US/docs/Web/CSS/@font-palette-values\" class=\"only-in-en-us\">@font-palette-values</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@import\">@import</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@keyframes\">@keyframes</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@layer\">@layer</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@media\">@media</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@namespace\">@namespace</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@page\">@page</a></li><li><a href=\"/en-US/docs/Web/CSS/@position-try\" class=\"only-in-en-us\">@position-try</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/@property\">@property</a></li><li><a href=\"/en-US/docs/Web/CSS/@scope\" class=\"only-in-en-us\">@scope</a></li><li><a href=\"/en-US/docs/Web/CSS/@starting-style\" class=\"only-in-en-us\">@starting-style</a></li><li><a href=\"/zh-CN/docs/Web/CSS/@supports\">@supports</a></li><li><a href=\"/en-US/docs/Web/CSS/@view-transition\" class=\"only-in-en-us\">@view-transition</a></li></ol></details></li><li class=\"toggle\"><details><summary>函数</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/-moz-image-rect\">-moz-image-rect</a><abbr class=\"icon icon-nonstandard\" title=\"非标准。请在使用前检查跨浏览器支持。\">\n<span class=\"visually-hidden\">非标准</span>\n</abbr><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/abs\" class=\"only-in-en-us\">abs()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/acos\">acos()</a></li><li><a href=\"/en-US/docs/Web/CSS/anchor-size\" class=\"only-in-en-us\">anchor-size()</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/anchor\" class=\"only-in-en-us\">anchor()</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/asin\">asin()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/atan\">atan()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/atan2\">atan2()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/attr\">attr</a></li><li><a href=\"/zh-CN/docs/Web/CSS/filter-function/blur\">blur()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/filter-function/brightness\">brightness()</a></li><li><a href=\"/en-US/docs/Web/CSS/calc-size\" class=\"only-in-en-us\">calc-size()</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/calc\">calc()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape/circle\">circle()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/clamp\">clamp()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value/color-mix\">color-mix()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/color\" class=\"only-in-en-us\">color()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/gradient/conic-gradient\">conic-gradient()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/filter-function/contrast\">contrast()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/cos\">cos()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/counter\">counter()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/counters\">counters()</a></li><li><a href=\"/en-US/docs/Web/CSS/cross-fade\" class=\"only-in-en-us\">cross-fade()</a></li><li><a href=\"/en-US/docs/Web/CSS/easing-function/cubic-bezier\" class=\"only-in-en-us\">cubic-bezier()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value/device-cmyk\">device-cmyk()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/filter-function/drop-shadow\">drop-shadow()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/element\">element</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape/ellipse\">ellipse()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/env\">env()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/exp\">exp()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/fit-content_function\">fit-content()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/filter-function/grayscale\">grayscale()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value/hsl\">hsl()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/hue-rotate\" class=\"only-in-en-us\">hue-rotate()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/hwb\" class=\"only-in-en-us\">hwb()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/hypot\">hypot()</a></li><li><a href=\"/en-US/docs/Web/CSS/image/image-set\" class=\"only-in-en-us\">image-set()</a></li><li><a href=\"/en-US/docs/Web/CSS/image/image\" class=\"only-in-en-us\">image()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape/inset\">inset()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/invert\" class=\"only-in-en-us\">invert()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value/lab\">lab()</a></li><li><a href=\"/en-US/docs/Web/CSS/@import/layer_function\" class=\"only-in-en-us\">layer()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value/lch\">lch()</a></li><li><a href=\"/en-US/docs/Web/CSS/color_value/light-dark\" class=\"only-in-en-us\">light-dark()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/gradient/linear-gradient\">linear-gradient()</a></li><li><a href=\"/en-US/docs/Web/CSS/easing-function/linear\" class=\"only-in-en-us\">linear()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/log\">log()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/matrix\">matrix()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/matrix3d\">matrix3d()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/max\">max()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/min\">min()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/minmax\">minmax()</a></li><li><a href=\"/en-US/docs/Web/CSS/mod\" class=\"only-in-en-us\">mod()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value/oklab\">oklab()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value/oklch\">oklch()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/filter-function/opacity\">opacity()</a></li><li><a href=\"/en-US/docs/Web/CSS/image/paint\" class=\"only-in-en-us\">paint()</a></li><li><a href=\"/en-US/docs/Web/CSS/font-palette/palette-mix\" class=\"only-in-en-us\">palette-mix()</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape/path\">path()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/perspective\">perspective()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape/polygon\">polygon()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/pow\">pow()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/gradient/radial-gradient\">radial-gradient()</a></li><li><a href=\"/en-US/docs/Web/CSS/ray\" class=\"only-in-en-us\">ray()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape/rect\">rect()</a></li><li><a href=\"/en-US/docs/Web/CSS/rem\" class=\"only-in-en-us\">rem()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/repeat\">repeat()</a></li><li><a href=\"/en-US/docs/Web/CSS/gradient/repeating-conic-gradient\" class=\"only-in-en-us\">repeating-conic-gradient()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient\">repeating-linear-gradient()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient\">repeating-radial-gradient()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value/rgb\">rgb()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/rotate\">rotate()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/rotate3d\">rotate3d()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/rotateX\">rotateX()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/rotateY\">rotateY()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/rotateZ\">rotateZ()</a></li><li><a href=\"/en-US/docs/Web/CSS/round\" class=\"only-in-en-us\">round()</a></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/saturate\" class=\"only-in-en-us\">saturate()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/scale\">scale()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/scale3d\" class=\"only-in-en-us\">scale3d()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/scaleX\">scaleX()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/scaleY\" class=\"only-in-en-us\">scaleY()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/scaleZ\" class=\"only-in-en-us\">scaleZ()</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-timeline/scroll\" class=\"only-in-en-us\">scroll()</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/filter-function/sepia\" class=\"only-in-en-us\">sepia()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape/shape\">shape()</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/en-US/docs/Web/CSS/sign\" class=\"only-in-en-us\">sign()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/sin\">sin()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/skew\">skew()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/skewX\">skewX()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/skewY\" class=\"only-in-en-us\">skewY()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/sqrt\">sqrt()</a></li><li><a href=\"/en-US/docs/Web/CSS/easing-function/steps\" class=\"only-in-en-us\">steps()</a></li><li><a href=\"/en-US/docs/Web/CSS/symbols\" class=\"only-in-en-us\">symbols()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/tan\">tan()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/translate\">translate()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/translate3d\">translate3d()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/translateX\">translateX()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function/translateY\">translateY()</a></li><li><a href=\"/en-US/docs/Web/CSS/transform-function/translateZ\" class=\"only-in-en-us\">translateZ()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/url_function\">url()</a></li><li><a href=\"/zh-CN/docs/Web/CSS/var\">var()</a></li><li><a href=\"/en-US/docs/Web/CSS/animation-timeline/view\" class=\"only-in-en-us\">view()</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape/xywh\">xywh()</a></li></ol></details></li><li class=\"toggle\"><details><summary>类型</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/absolute-size\"><absolute-size></a></li><li><a href=\"/zh-CN/docs/Web/CSS/alpha-value\"><alpha-value></a></li><li><a href=\"/zh-CN/docs/Web/CSS/angle-percentage\"><angle-percentage></a></li><li><a href=\"/zh-CN/docs/Web/CSS/angle\"><angle></a></li><li><a href=\"/en-US/docs/Web/CSS/baseline-position\" class=\"only-in-en-us\"><baseline-position></a></li><li><a href=\"/zh-CN/docs/Web/CSS/basic-shape\"><basic-shape></a></li><li><a href=\"/zh-CN/docs/Web/CSS/blend-mode\"><blend-mode></a></li><li><a href=\"/zh-CN/docs/Web/CSS/box-edge\"><box-edge></a></li><li><a href=\"/en-US/docs/Web/CSS/calc-keyword\" class=\"only-in-en-us\"><calc-keyword></a></li><li><a href=\"/en-US/docs/Web/CSS/calc-sum\" class=\"only-in-en-us\"><calc-sum></a></li><li><a href=\"/zh-CN/docs/Web/CSS/color-interpolation-method\"><color-interpolation-method></a></li><li><a href=\"/zh-CN/docs/Web/CSS/color_value\"><color></a></li><li><a href=\"/en-US/docs/Web/CSS/content-distribution\" class=\"only-in-en-us\"><content-distribution></a></li><li><a href=\"/en-US/docs/Web/CSS/content-position\" class=\"only-in-en-us\"><content-position></a></li><li><a href=\"/zh-CN/docs/Web/CSS/custom-ident\"><custom-ident></a></li><li><a href=\"/en-US/docs/Web/CSS/dashed-ident\" class=\"only-in-en-us\"><dashed-ident></a></li><li><a href=\"/zh-CN/docs/Web/CSS/dimension\">dimension</a></li><li><a href=\"/zh-CN/docs/Web/CSS/display-box\"><display-box></a></li><li><a href=\"/en-US/docs/Web/CSS/display-inside\" class=\"only-in-en-us\"><display-inside></a></li><li><a href=\"/zh-CN/docs/Web/CSS/display-internal\"><display-internal></a></li><li><a href=\"/zh-CN/docs/Web/CSS/display-legacy\"><display-legacy></a></li><li><a href=\"/en-US/docs/Web/CSS/display-listitem\" class=\"only-in-en-us\"><display-listitem></a></li><li><a href=\"/zh-CN/docs/Web/CSS/display-outside\"><display-outside></a></li><li><a href=\"/zh-CN/docs/Web/CSS/easing-function\"><easing-function></a></li><li><a href=\"/zh-CN/docs/Web/CSS/filter-function\"><filter-function></a></li><li><a href=\"/zh-CN/docs/Web/CSS/flex_value\"><flex></a></li><li><a href=\"/en-US/docs/Web/CSS/frequency-percentage\" class=\"only-in-en-us\"><frequency-percentage></a></li><li><a href=\"/zh-CN/docs/Web/CSS/frequency\"><frequency></a></li><li><a href=\"/en-US/docs/Web/CSS/generic-family\" class=\"only-in-en-us\"><generic-family></a></li><li><a href=\"/zh-CN/docs/Web/CSS/gradient\"><gradient></a></li><li><a href=\"/zh-CN/docs/Web/CSS/hex-color\"><hex-color></a></li><li><a href=\"/zh-CN/docs/Web/CSS/hue-interpolation-method\"><hue-interpolation-method></a></li><li><a href=\"/en-US/docs/Web/CSS/hue\" class=\"only-in-en-us\"><hue></a></li><li><a href=\"/en-US/docs/Web/CSS/ident\" class=\"only-in-en-us\"><ident></a></li><li><a href=\"/zh-CN/docs/Web/CSS/image\"><image></a></li><li><a href=\"/zh-CN/docs/Web/CSS/integer\"><integer></a></li><li><a href=\"/zh-CN/docs/Web/CSS/length-percentage\"><length-percentage></a></li><li><a href=\"/zh-CN/docs/Web/CSS/length\"><length></a></li><li><a href=\"/en-US/docs/Web/CSS/line-style\" class=\"only-in-en-us\"><line-style></a></li><li><a href=\"/zh-CN/docs/Web/CSS/named-color\"><named-color></a></li><li><a href=\"/zh-CN/docs/Web/CSS/number\"><number></a></li><li><a href=\"/en-US/docs/Web/CSS/overflow-position\" class=\"only-in-en-us\"><overflow-position></a></li><li><a href=\"/en-US/docs/Web/CSS/overflow_value\" class=\"only-in-en-us\"><overflow></a></li><li><a href=\"/zh-CN/docs/Web/CSS/percentage\"><percentage></a></li><li><a href=\"/en-US/docs/Web/CSS/position-area_value\" class=\"only-in-en-us\"><position-area></a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/position_value\"><position></a></li><li><a href=\"/zh-CN/docs/Web/CSS/ratio\"><ratio></a></li><li><a href=\"/zh-CN/docs/Web/CSS/relative-size\"><relative-size></a></li><li><a href=\"/zh-CN/docs/Web/CSS/resolution\"><resolution></a></li><li><a href=\"/en-US/docs/Web/CSS/self-position\" class=\"only-in-en-us\"><self-position></a></li><li><a href=\"/en-US/docs/Web/CSS/shape\" class=\"only-in-en-us\"><shape></a><abbr class=\"icon icon-deprecated\" title=\"已弃用。请不要在新的网站中使用。\">\n<span class=\"visually-hidden\">已弃用</span>\n</abbr></li><li><a href=\"/zh-CN/docs/Web/CSS/string\"><string></a></li><li><a href=\"/zh-CN/docs/Web/CSS/system-color\"><system-color></a></li><li><a href=\"/zh-CN/docs/Web/CSS/time-percentage\"><time-percentage></a></li><li><a href=\"/zh-CN/docs/Web/CSS/time\"><time></a></li><li><a href=\"/zh-CN/docs/Web/CSS/transform-function\">transform-function</a></li><li><a href=\"/zh-CN/docs/Web/CSS/url_value\"><url></a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Web/CSS/Guides\">指南</a></li><li class=\"toggle\"><details><summary>动画</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations\">使用 CSS 动画</a></li></ol></details></li><li class=\"toggle\"><details><summary>背景和边框</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds\">多个背景的应用</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images\">调整背景图片的大小</a></li></ol></details></li><li class=\"toggle\"><details><summary>盒对齐</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables\">块布局中的盒对齐方式</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox\">弹性盒布局中的盒对齐方式</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout\" class=\"only-in-en-us\">Box alignment in grid layout</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout\" class=\"only-in-en-us\">Box alignment in multi-column layout</a></li></ol></details></li><li class=\"toggle\"><details><summary>盒模型</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model\">CSS 基础框盒模型介绍</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing\">掌握外边距折叠</a></li></ol></details></li><li class=\"toggle\"><details><summary>颜色</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_colors/Applying_color\">为 HTML 元素应用颜色</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Color_values\" class=\"only-in-en-us\">Color values</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Relative_colors\" class=\"only-in-en-us\">Using relative colors</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely\" class=\"only-in-en-us\">Using color wisely</a></li><li><a href=\"/zh-CN/docs/Web/Accessibility/Understanding_Colors_and_Luminance\">无障碍：理解颜色和亮度</a></li><li><a href=\"/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast\" class=\"only-in-en-us\">Web 无障碍：色彩对比度</a></li></ol></details></li><li class=\"toggle\"><details><summary>多列</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_multicol_layout/Basic_concepts\">Basic Concepts of Multicol</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_multicol_layout/Styling_columns\">多列布局的样式</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns\" class=\"only-in-en-us\">Spanning and balancing columns</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout\">处理 Multicol 中的溢出</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout\" class=\"only-in-en-us\">Handling content breaks in multi-column layout</a></li></ol></details></li><li class=\"toggle\"><details><summary>条件规则</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries\">使用特性查询</a></li></ol></details></li><li class=\"toggle\"><details><summary>CSS 局限</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_containment/Using_CSS_containment\">使用 CSS 局限</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_containment/Container_queries\">CSS 容器查询</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries\" class=\"only-in-en-us\">Using container size and style queries</a></li></ol></details></li><li class=\"toggle\"><details><summary>CSS 对象模型视图</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSSOM_view/Coordinate_systems\">坐标系</a></li></ol></details></li><li class=\"toggle\"><details><summary>流式布局</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow\">常规流中的块和内联布局</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_display/In_flow_and_out_of_flow\">应用或脱离流式布局</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts\">格式化上下文简介</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_display/Flow_layout_and_writing_modes\">流式布局和书写模式</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_display/Flow_layout_and_overflow\">流式布局和溢出</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display\" class=\"only-in-en-us\">Using the multi-keyword syntax with CSS display</a></li></ol></details></li><li class=\"toggle\"><details><summary>弹性盒布局</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox\">flex 布局的基本概念</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods\">弹性盒子与其他布局方法的联系</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container\">对齐弹性容器中的项目</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items\">Flex 项排序</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis\">控制弹性元素在主轴上的比例</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items\">掌握弹性物件的包装</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox\">弹性盒子的典型用例</a></li></ol></details></li><li class=\"toggle\"><details><summary>字体</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide\">OpenType 字体特性指南</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_fonts/Variable_fonts_guide\">Variable fonts guide</a></li></ol></details></li><li class=\"toggle\"><details><summary>网格布局</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout\">网格布局的基本概念</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods\">网格布局和其他布局方法的联系</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_line-based_placement\">CSS 网格中基于线的定位</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_template_areas\">网格模板区域</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines\">使用命名线布局</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout\">CSS 网格布局中的自动定位</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout\">网格布局中的盒模型对齐</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Grids_logical_values_and_writing_modes\">CSS 网格，逻辑值和书写模式</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility\">CSS 网格布局和无障碍</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_grid_layout/Realizing_common_layouts_using_grids\">利用 CSS 网格布局实现常用布局</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid\" class=\"only-in-en-us\">Subgrid</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout\" class=\"only-in-en-us\">Masonry layout</a><abbr class=\"icon icon-experimental\" title=\"实验性。预期行为可能会在未来发生变更。\">\n<span class=\"visually-hidden\">实验性</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary>图片</summary><ol><li><em><a href=\"/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients\" aria-current=\"page\">使用 CSS 渐变</a></em></li></ol></details></li><li class=\"toggle\"><details><summary>列表和计数器</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters\">使用 CSS 计数器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation\">使列表缩进一致</a></li></ol></details></li><li class=\"toggle\"><details><summary>逻辑属性</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values\">逻辑属性与逻辑值的基本概念</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Floating_and_positioning\">用于浮动和定位的逻辑属性</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding\">用于外边距、边框和内边距的逻辑属性</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Sizing\">逻辑尺寸属性</a></li></ol></details></li><li class=\"toggle\"><details><summary>数学函数</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_Values_and_Units/Using_CSS_math_functions\" class=\"only-in-en-us\">Using CSS math functions</a></li></ol></details></li><li class=\"toggle\"><details><summary>媒体查询</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries\">使用媒体查询</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility\" class=\"only-in-en-us\">Using media queries for accessibility</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries\">使用编程方法测试媒体查询</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_media_queries/Printing\">打印</a></li></ol></details></li><li class=\"toggle\"><details><summary>嵌套样式规则</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_nesting/Using_CSS_nesting\">使用 CSS 嵌套</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_nesting/Nesting_at-rules\">CSS at 规则嵌套</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_nesting/Nesting_and_specificity\">CSS 嵌套与优先级</a></li></ol></details></li><li class=\"toggle\"><details><summary>定位</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index\">理解 CSS 的 z-index 属性</a></li></ol></details></li><li class=\"toggle\"><details><summary>滚动吸附</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_scroll_snap/Basic_concepts\">滚动吸附的基本概念</a></li></ol></details></li><li class=\"toggle\"><details><summary>形状</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_shapes/Overview_of_shapes\">CSS 的图形（Shape）概览</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_shapes/From_box_values\">使用 box 值指定形状</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes\" class=\"only-in-en-us\">Basic shapes with shape-outside</a></li><li><a href=\"/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images\" class=\"only-in-en-us\">Shapes from images</a></li></ol></details></li><li class=\"toggle\"><details><summary>文本</summary><ol><li><a href=\"/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text\" class=\"only-in-en-us\">Wrapping and breaking text</a></li></ol></details></li><li class=\"toggle\"><details><summary>变换</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms\">使用 CSS 变换</a></li></ol></details></li><li class=\"toggle\"><details><summary>过渡</summary><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions\">使用 CSS 过渡</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Web/CSS/Layout_cookbook\">CSS 布局手册</a></li><li class=\"toggle\"><ol><li><a href=\"/zh-CN/docs/Web/CSS/Layout_cookbook/Media_objects\">指南：媒体对象</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Layout_cookbook/Column_layouts\">列布局</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Layout_cookbook/Center_an_element\">居中一个元素</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Layout_cookbook/Sticky_footers\">粘性页脚</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Layout_cookbook/Split_Navigation\">分离式导航菜单</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation\">面包屑导航</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges\" class=\"only-in-en-us\">List group with badges</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Pagination\" class=\"only-in-en-us\">Pagination</a></li><li><a href=\"/zh-CN/docs/Web/CSS/Layout_cookbook/Card\">卡片</a></li><li><a href=\"/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper\" class=\"only-in-en-us\">Grid wrapper</a></li></ol></li><li class=\"section\">工具</li><li class=\"toggle\"><ol><li><a href=\"/zh-CN/docs/Web/CSS/CSS_colors/Color_picker_tool\">色彩选择工具</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator\">Box-shadow 生成器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator\">Border-image 生成器</a></li><li><a href=\"/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator\">圆角边框生成器</a></li></ol></li></ol>","source":{"folder":"zh-cn/web/css/css_images/using_css_gradients","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/web/css/css_images/using_css_gradients/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/94f091326ce62f91a51e8cf31db9057f120d649e","filename":"index.md"},"summary":"CSS 渐变由 <gradient> 数据类型表示，它是 <image> 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。你可以选择三种类型的渐变：线性（由 linear-gradient() 函数创建）、径向（由 radial-gradient() 函数创建）和锥形（由 conic-gradient() 函数创建）。你还可以使用 repeating-linear-gradient() 和 repeating-conic-gradient() 函数创建重复渐变。","title":"使用 CSS 渐变","toc":[{"text":"使用线性渐变","id":"使用线性渐变"},{"text":"声明颜色和创建效果","id":"声明颜色和创建效果"},{"text":"使用径向渐变","id":"使用径向渐变"},{"text":"使用锥形渐变","id":"使用锥形渐变"},{"text":"使用重复渐变","id":"使用重复渐变"},{"text":"参见","id":"参见"}],"pageType":"guide"}}</script></body></html>