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>背景与边框 - 学习 Web 开发 | MDN</title><link rel="alternate" title="Backgrounds and borders" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" hrefLang="en"/><link rel="alternate" title="Hintergründe und Rahmen" href="https://developer.mozilla.org/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" hrefLang="de"/><link rel="alternate" title="Fondos y bordes" href="https://developer.mozilla.org/es/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" hrefLang="es"/><link rel="alternate" title="Arrière-plans et bordures" href="https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" hrefLang="fr"/><link rel="alternate" title="背景と境界線" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" hrefLang="ja"/><link rel="alternate" title="Фон и границы" href="https://developer.mozilla.org/ru/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" hrefLang="ru"/><link rel="alternate" title="背景与边框" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" 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 背景和边框做的一些创造性事情。从添加渐变、背景图像到圆角，背景和边框可以解决 CSS 中的许多样式问题。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders"/><meta property="og:title" content="背景与边框 - 学习 Web 开发 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="在本课程中，我们将看看可以用 CSS 背景和边框做的一些创造性事情。从添加渐变、背景图像到圆角，背景和边框可以解决 CSS 中的许多样式问题。"/><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/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders"/><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.0ea0445c.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 "><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 active"><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%2FLearn_web_development%2FCore%2FStyling_basics%2FBackgrounds_and_borders" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBackgrounds_and_borders" 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/Learn_web_development" 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="/en-US/docs/Learn_web_development/Core" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Core learning modules</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics" class="breadcrumb" property="item" typeof="WebPage"><span property="name">CSS 构建</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">背景与边框</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/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="de" href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" 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/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" 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="#css_的背景样式">CSS 的背景样式</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/Learn_web_development/Getting_started">入门模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup">配置环境</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">安装基础软件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">浏览互联网</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors" class="only-in-en-us">Code editors</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">处理文件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">命令行速成课</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website">你的第一个网站</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">你的网站会是什么样子？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">发布你的网站</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards" class="only-in-en-us">Web 标准</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">万维网是如何工作的</a></li><li><a href="/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Web 和 Web 标准</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites" class="only-in-en-us">How browsers load websites</a></li></ol></details></li><li class="toggle"><details><summary><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills" class="only-in-en-us">软性技能</a></summary><ol><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning" class="only-in-en-us">Research and learning</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork" class="only-in-en-us">Collaboration and teamwork</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes" class="only-in-en-us">Workflows and processes</a></li><li><a href="/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews" class="only-in-en-us">Succeeding in job interviews</a></li></ol></details></li><li class="section"><a href="/en-US/docs/Learn_web_development/Core" class="only-in-en-us">核心模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content">使用 HTML 构建内容</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">开始学习 HTML</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">“头”里有什么——HTML 元信息</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">HTML 文本处理基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">强调与重要性</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/Lists" class="only-in-en-us">Lists</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">文档与网站架构</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">文本格式进阶</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links">创建超链接</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">标记信件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">构建网页内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML 中的图片</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">视频和音频内容</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Mozilla 欢迎页面</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">HTML 表格基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">HTML 表格进阶特性和无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">作业：构建行星数据</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms" class="only-in-en-us">Forms and buttons in HTML</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">HTML 调试</a></li></ol></details></li><li class="toggle"><details open=""><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><em><a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders" aria-current="page">背景与边框</a></em></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="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Scripting">使用 JavaScript 动态编码</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">什么是 JavaScript？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash">JavaScript 初体验</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong">查找并解决 JavaScript 代码的错误</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Variables">如何存储你需要的信息——变量</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Math">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Strings">文本处理——JavaScript 中的字符串</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods">有用的字符串方法</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays">数组</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Silly_story_generator">笑话生成器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals">在代码中做决定——条件语句</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Loops">循环吧，代码</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Functions">函数——可复用的代码块</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function">创建你自己的函数</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values">函数返回值</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Events">事件介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling">事件冒泡</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery">图片库</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript 对象基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting">DOM 脚本简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests">从服务器获取数据</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/JSON">使用 JSON</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">处理常见的 JavaScript 问题</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript 架构和库</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">客户端框架介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">框架的主要特性</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">React 入门</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">开始我们的 React 待办清单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_components">组件化我们的 React App</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state" class="only-in-en-us">React interactivity: Events and state</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering" class="only-in-en-us">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility" class="only-in-en-us">Accessibility in React</a></li><li><a href="/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources" class="only-in-en-us">React resources</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility">无障碍</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">什么是无障碍？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling">解决常见的无障碍问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML">HTML：无障碍的良好基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA 基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Multimedia">多媒体无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Mobile">移动端无障碍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">测验：无障碍疑难解答</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Core/Design_for_developers" class="only-in-en-us">为开发人员设计</a></li><li><a href="/zh-CN/docs/Learn_web_development/Core/Version_control">版本控制</a></li><li class="section"><a href="/en-US/docs/Learn_web_development/Extensions" class="only-in-en-us">扩展模块</a></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">对象原型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">面向对象编程基本概念</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">JavaScript 中的类</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">实践对象构造</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">为“弹球”示例添加新功能</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs">客户端 Web API</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Web API 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">视频和音频 API</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">绘图</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">客户端存储</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">第三方 API</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS">异步 JavaScript</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing">异步 JavaScript 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises">如何使用 Promise</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">如何实现基于 Promise 的 API</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">worker 简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">序列动画</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms">Web 表单</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form">创建我的第一个表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">如何构建 HTML 表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">原生表单部件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">HTML5 的输入（input）类型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls">其他表单控件</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">样式化 Web 表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">表单样式化进阶</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI 伪类</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation">表单数据校验</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">发送表单数据</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools">理解客户端工具</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview">客户端工具概述</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">软件包管理基础</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain">介绍完整的工具链</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">部署我们的应用</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side">服务端网站</a></summary><ol><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps">服务端基础</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">服务端编程介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">客户端服务端交互概述</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">服务端 web 框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">站点安全</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django">Django web 框架（Python）</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Django 介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">设置 Django 开发环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Part 3: 使用模型</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django 教程 5：主页构建</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django 教程 7: 会话框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django 教程 8：用户授权与许可</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django 教程 9: 使用表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django 教程 10: 测试 Django 网页应用</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django 教程 11：部署 Django 到生产环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Web 应用安全</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">评估：DIY Django 微博客</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express web 框架（Node.js）</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Express/Node 入门</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">设置 Node 开发环境</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express 教程：本地图书馆网站</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express 教程 2：创建站点框架</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express 教程 4：路由和控制器</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express 教程 5: 呈现图书馆数据</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express 教程 6: 使用表单</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express 教程 7：部署到生产环境</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance">Web 性能</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/why_web_performance">Web 性能的重要性</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">什么是 web 性能？</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Perceived_performance">感知性能</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance">测量性能</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia">多媒体：图片</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/video">多媒体：视频</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/HTML">HTML 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS">CSS 性能优化</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">web 性能的商业案例</a></li></ol></details></li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing">测试</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction">跨浏览器测试介绍</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies">测试的策略</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">处理常见的 HTML 和 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection">实现特性检测</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing">自动化测试简介</a></li><li><a href="/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">搭建自己的自动化测试环境</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Transform_animate" class="only-in-en-us">CSS 变换与动画化</a></li><li><a href="/en-US/docs/Learn_web_development/Extensions/Security_privacy" class="only-in-en-us">安全与隐私</a></li><li class="section">更多资源</li><li class="toggle"><details><summary><a href="/zh-CN/docs/Learn_web_development/Howto">如何解决常见问题</a></summary><ol><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems">使用 HTML 解决常见问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_CSS_problems">解决常见的 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Solve_JavaScript_problems">解决 JavaSctript 代码的常见问题</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Web_mechanics">Web 机制</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup">工具和安装</a></li><li><a href="/zh-CN/docs/Learn_web_development/Howto/Design_and_accessibility">设计与无障碍</a></li></ol></details></li><li><a href="/en-US/docs/Learn_web_development/About" class="only-in-en-us">关于</a></li><li><a href="/en-US/docs/Learn_web_development/Educators" class="only-in-en-us">面向教育工作者的资源</a></li><li><a href="/en-US/docs/Learn_web_development/Changelog" class="only-in-en-us">更新日志</a></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="#css_的背景样式">CSS 的背景样式</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>背景与边框</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing"><span class="button-wrap"> 上一页 </span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics"><span class="button-wrap"> 概述：CSS 构建</span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow"><span class="button-wrap"> 下一页 </span></a></li></ul> <p>在本课程中，我们将看看可以用 CSS 背景和边框做的一些创造性事情。从添加渐变、背景图像到圆角，背景和边框可以解决 CSS 中的许多样式问题。</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">前提：</th> <td> 基础的计算机知识，<a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">安装了基本的软件</a>，了解基本的<a href="/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">文件处理知识</a>和 HTML 基础（已经学习了 <a href="/zh-CN/docs/Learn_web_development/Core/Structuring_content">HTML 介绍</a>)，以及 CSS 如何工作的基本常识（已经学习了 <a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics">CSS 入门概述</a>）。 </td> </tr> <tr> <th scope="row">目标：</th> <td>学习如何为盒子的背景和边框添加样式。</td> </tr> </tbody> </table></figure></div><section aria-labelledby="css_的背景样式"><h2 id="css_的背景样式"><a href="#css_的背景样式">CSS 的背景样式</a></h2><div class="section-content"><p>CSS <a href="/zh-CN/docs/Web/CSS/background"><code>background</code></a> 属性是本课程中我们将遇到的一些普通背景属性的简写表示。如果你在样式表中发现了一个复杂的背景属性，可能会觉得有点难以理解，因为可以同时传入这么多的值：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { background: linear-gradient( 105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96% ) center center / 400px 200px no-repeat, url(image.png) center no-repeat, rebeccapurple; } </code></pre></div> <p>我们将在本教程的后半部分回到这个简写表示的工作原理，但首先让我们通过查看各个背景属性来了解在 CSS 中可以对背景做哪些不同的事情。</p></div></section><section aria-labelledby="背景颜色"><h3 id="背景颜色"><a href="#背景颜色">背景颜色</a></h3><div class="section-content"><p><a href="/zh-CN/docs/Web/CSS/background-color"><code>background-color</code></a> 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的 <a href="/zh-CN/docs/Web/CSS/color_value"><code><color></code></a> 值。<code>background-color</code> 可以延伸至元素的内容和内边距盒子的下面。</p> <p>在下面的例子中，我们用各种颜色值为盒子、标题和 <a href="/zh-CN/docs/Web/HTML/Element/span"><code><span></code></a> 元素添加背景色。尝试修改为任何可用的 <a href="/zh-CN/docs/Web/CSS/color_value"><code><color></code></a> 值。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___color notranslate"><code><div class="box"> <h2>背景颜色</h2> <p>尝试修改背景<span>颜色</span>。</p> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___color notranslate"><code>.box { padding: 0.3em; background-color: #567895; } h2 { background-color: black; color: white; } span { background-color: rgb(255 255 255 / 50%); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="color sample" id="frame_color" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="color" 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-image"><code>background-image</code></a> 属性可以在一个元素的背景中显示一个图像。在下面的例子中，我们有两个盒子，其中一个盒子具有比盒子大的背景图像（<a href="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" class="external" target="_blank">balloons.jpg</a>），另一个盒子具有较小的单个星星的图像（<a href="https://mdn.github.io/shared-assets/images/examples/star.png" class="external" target="_blank">star.png</a>）。</p> <p>这个示例演示了关于背景图像的两种情形。默认情况下，大图不会缩小以适应盒子，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___background-image notranslate"><code><div class="wrapper"> <div class="box a"></div> <div class="box b"></div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___background-image notranslate"><code>.wrapper { display: flex; } .box { width: 200px; height: 80px; padding: 0.5em; border: 1px solid #ccc; margin: 20px; } .a { background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg); } .b { background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="background-image sample" id="frame_background-image" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="background-image" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加 <code>background-color</code> 属性，看看效果如何。</p> <h4 id="控制背景平铺行为">控制背景平铺行为</h4> <p><a href="/zh-CN/docs/Web/CSS/background-repeat"><code>background-repeat</code></a> 属性用于控制图像的平铺行为。可用的值是：</p> <ul> <li><code>no-repeat</code>——阻止背景重复平铺。</li> <li><code>repeat-x</code>——仅水平方向上重复平铺。</li> <li><code>repeat-y</code>——仅垂直方向上重复平铺。</li> <li><code>repeat</code>——默认值，在水平和垂直两个方向重复平铺。</li> </ul> <p>在下面的示例中尝试这些值。我们已经将值设置为 <code>no-repeat</code>，因此你将只能看到一个星星。尝试不同的值（<code>repeat-x</code> 和 <code>repeat-y</code>），看看它们的效果如何。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___repeat notranslate"><code><div class="box"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden live-sample___repeat notranslate"><code>.box { width: 200px; height: 80px; padding: 0.5em; border: 1px solid #ccc; margin: 20px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___repeat notranslate"><code>.box { background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png); background-repeat: no-repeat; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="repeat sample" id="frame_repeat" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="repeat" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <h4 id="调整背景图像的大小">调整背景图像的大小</h4> <p>在上面的例子中，我们有一个很大的图像（<em>ballons.jpg</em>），由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 <a href="/zh-CN/docs/Web/CSS/background-size"><code>background-size</code></a> 属性，它可以设置<a href="/zh-CN/docs/Web/CSS/length">长度</a>或<a href="/zh-CN/docs/Web/CSS/percentage">百分比</a>值，来调整图像的大小以适应背景。</p> <p>你也可以使用关键字：</p> <ul> <li><code>cover</code>：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。</li> <li><code>contain</code>：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。</li> </ul> <p>在下面的示例中，我使用了上面示例中的 <em>balloons.jpg</em> 图片，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。</p> <p>试试这些：</p> <ul> <li>改变用于修改背景大小的长度单位。</li> <li>去掉长度单位，看看使用 <code>background-size: cover</code> 或 <code>background-size: contain</code> 时会发生什么。</li> <li>如果你的图像小于盒子，可以更改 <code>background-repeat</code> 的值来重复平铺图像。</li> </ul> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___size notranslate"><code><div class="box"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden live-sample___size notranslate"><code>.box { width: 500px; height: 100px; padding: 0.5em; border: 1px solid #ccc; margin: 10px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___size notranslate"><code>.box { background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg); background-repeat: no-repeat; background-size: 80px 10em; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="size sample" id="frame_size" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="size" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <h4 id="背景图像定位">背景图像定位</h4> <p><a href="/zh-CN/docs/Web/CSS/background-position"><code>background-position</code></a> 属性允许你选择背景图片出现在它所应用的盒子上的位置。这使用了一个坐标系统，其中方框的左上角是 <code>(0,0)</code>，方框沿水平（<code>x</code>）和垂直（<code>y</code>）轴定位。</p> <div class="notecard note"> <p><strong>备注：</strong> 默认的 <code>background-position</code> 值是 <code>(0,0)</code>。</p> </div> <p>最常见的 <code>background-position</code> 值有两个单独的值——一个水平值后面跟着一个垂直值。</p> <p>你可以使用像 <code>top</code> 和 <code>right</code> 这样的关键字（在 <a href="/zh-CN/docs/Web/CSS/background-image"><code>background-image</code></a> 页面上查找其他的关键字）：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { background-image: url(image.png); background-repeat: no-repeat; background-position: top center; } </code></pre></div> <p>或者使用<a href="/zh-CN/docs/Web/CSS/length">长度</a>和<a href="/zh-CN/docs/Web/CSS/percentage">百分比</a>值：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { background-image: url(image.png); background-repeat: no-repeat; background-position: 20px 10%; } </code></pre></div> <p>你也可以将关键字与长度或百分比混合在一起，在这种情况下，第一个值必须指水平位置或偏移，第二个值指垂直位置。例如：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { background-image: url(image.png); background-repeat: no-repeat; background-position: 20px top; } </code></pre></div> <p>最后，你还可以使用四值语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的 CSS 中，我们将背景定位在距顶部 20px 和右侧 10px 处：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { background-image: url(image.png); background-repeat: no-repeat; background-position: top 20px right 10px; } </code></pre></div> <p>使用下面的示例来处理这些值并在框内移动星星。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___position notranslate"><code><div class="box"></div> </code></pre></div> <div class="code-example"><pre class="brush: css hidden live-sample___position notranslate"><code>.box { width: 500px; height: 80px; padding: 0.5em; border: 1px solid #ccc; margin: 20px; } </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___position notranslate"><code>.box { background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png); background-repeat: no-repeat; background-position: 120px 1em; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="position sample" id="frame_position" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="position" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <div class="notecard note"> <p><strong>备注：</strong> 简写属性 <code>background-position</code> 用于替代 <a href="/zh-CN/docs/Web/CSS/background-position-x"><code>background-position-x</code></a> 和 <a href="/zh-CN/docs/Web/CSS/background-position-y"><code>background-position-y</code></a>，它们允许用户分别设置不同坐标轴的值。</p> </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-image"><code>background-image</code></a> 属性设置。</p> <p>你可以在 MDN 的 <a href="/zh-CN/docs/Web/CSS/gradient"><code><gradient></code></a> 数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣的方法是使用网络上许多 CSS 渐变生成器中的一个，比如<a href="https://cssgradient.io/" class="external" target="_blank">这个</a>。你可以创建一个渐变，然后复制和粘贴生成它的源代码。</p> <p>在下面的示例中尝试一些不同的渐变。在这两个盒子里，我们分别有一个线性渐变，它延伸到整个盒子上，还有一个径向渐变，它有一个固定的大小，因此会重复。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___gradients notranslate"><code><div class="wrapper"> <div class="box a"></div> <div class="box b"></div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___gradients notranslate"><code>.wrapper { display: flex; } .box { width: 400px; height: 80px; padding: 0.5em; border: 1px solid #ccc; margin: 20px; } .a { background-image: linear-gradient( 105deg, rgb(0 249 255 / 100%) 39%, rgb(51 56 57 / 100%) 96% ); } .b { background-image: radial-gradient( circle, rgb(0 249 255 / 100%) 39%, rgb(51 56 57 / 100%) 96% ); background-size: 100px 50px; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="gradients sample" id="frame_gradients" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="gradients" 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>background-image</code> 值，用逗号分隔每个值。</p> <p>当你这样做时，你可能会出现背景图片相互重叠的情况。背景将分层，最后列出的背景图片位于最下层，而之前的每张图片都堆在代码中紧随其后的那张图片之上。</p> <div class="notecard note"> <p><strong>备注：</strong> 渐变可以与常规的背景图像很好地混合在一起。</p> </div> <p>其他 <code>background-*</code> 属性也可以像 <code>background-image</code> 一样使用逗号分隔的方式设置：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right; </code></pre></div> <p>不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的 <code>image1</code> 的 <code>background-repeat</code> 值将是 <code>no-repeat</code>。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环——在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环——<code>image3</code> 将被赋予第一个位置值，<code>image4</code> 将被赋予第二个位置值。</p> <p>我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序，请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___multiple-background-image notranslate"><code><div class="wrapper"> <div class="box"></div> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___multiple-background-image notranslate"><code>.wrapper { display: flex; } .box { width: 500px; height: 80px; padding: 0.5em; border: 1px solid #ccc; margin: 20px; } .box { background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png), url(https://mdn.github.io/shared-assets/images/examples/big-star.png); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="multiple-background-image sample" id="frame_multiple-background-image" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="multiple-background-image" 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-attachment"><code>background-attachment</code></a> 属性控制的，它可以取以下值：</p> <ul> <li><code>scroll</code>：使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。</li> <li><code>fixed</code>：使元素的背景固定在视口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。</li> <li><code>local</code>：将背景固定在它所设置的元素上，所以当你滚动该元素时，背景也随之滚动。</li> </ul> <p><a href="/zh-CN/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> 属性只有在有内容要滚动时才会有效果，所以我们做了一个示例来演示这三个值之间的区别——看看 <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html" class="external" target="_blank">background-attachment.html</a>（或者看看这里的<a href="https://github.com/mdn/learning-area/tree/main/css/styling-boxes/backgrounds" class="external" target="_blank">源代码</a>）。</p></div></section><section aria-labelledby="使用_background_简写属性"><h3 id="使用_background_简写属性"><a href="#使用_background_简写属性">使用 background 简写属性</a></h3><div class="section-content"><p>正如我在本课开始时提到的，你将经常看到使用 <a href="/zh-CN/docs/Web/CSS/background"><code>background</code></a> 属性指定的背景。这种简写形式允许你一次设置所有不同的属性。</p> <p>如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的示例中，我们有一个渐变，它指定大小和位置，然后是指定为 <code>no-repeat</code> 的图像背景，它指定位置，然后是颜色。</p> <p>这里有一些规则，需要在简写背景图像属性时遵循，例如：</p> <ul> <li><code>background-color</code> 只能在最后一个逗号之后指定。</li> <li><code>background-size</code> 值只能立即包含在 <code>background-position</code> 之后，用“/”字符分隔，例如：<code>center/80%</code>。</li> </ul> <p>查看 <a href="/zh-CN/docs/Web/CSS/background"><code>background</code></a> 的 MDN 页面，以查看所有的注意事项。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___background notranslate"><code><div class="box"></div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___background notranslate"><code>.box { width: 500px; height: 300px; padding: 0.5em; background: linear-gradient( 105deg, rgb(255 255 255 / 20%) 39%, rgb(51 56 57 / 100%) 96% ) center center / 400px 200px no-repeat, url(https://mdn.github.io/shared-assets/images/examples/big-star.png) center no-repeat, rebeccapurple; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="background sample" id="frame_background" height="320px" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="background" 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>background-color</code>，以便在图像未加载时文本也足够清晰。</p> <p>屏幕阅读器不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是 HTML 页面的一部分，而不是包含在背景中。</p></div></section><section aria-labelledby="边框"><h2 id="边框"><a href="#边框">边框</a></h2><div class="section-content"><p>在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边框。通常，当我们使用 CSS 向元素添加边框时，我们使用一个简写属性在一行 CSS 中设置边框的颜色、宽度和样式。</p> <p>我们可以使用 <a href="/zh-CN/docs/Web/CSS/border"><code>border</code></a> 为一个框的所有四条边设置边框。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { border: 1px solid black; } </code></pre></div> <p>或者我们可以只设置盒子的一条边，例如：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { border-top: 1px solid black; } </code></pre></div> <p>这些简写等价于：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { border-width: 1px; border-style: solid; border-color: black; } </code></pre></div> <p>也可以使用更加细粒度的属性：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { border-top-width: 1px; border-top-style: solid; border-top-color: black; } </code></pre></div> <div class="notecard note"> <p><strong>备注：</strong> 这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性（例如，从左到右或从右到左的文本，或从上到下）。在下一课中，我们将探讨这些问题，这包括<a href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_different_text_directions">处理不同的文本方向</a>。</p> </div> <p>有各种各样的样式可以用于边框。在下面的例子中，我们为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___borders notranslate"><code><div class="box"> <h2>边框</h2> <p>尝试对边框做出调整。</p> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___borders notranslate"><code>* { padding: 0.2em; } .box { width: 500px; background-color: #567895; border: 5px solid #0b385f; border-bottom-style: dashed; color: #fff; } h2 { border-top: 2px dotted rebeccapurple; border-bottom: 1em double rgb(24 163 78); } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="borders sample" id="frame_borders" height="200px" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="borders" 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/border-radius"><code>border-radius</code></a> 属性和与盒子的每个角相关的普通属性来实现的。两个长度或百分比可以作为一个值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，你只会传入一个值，这个值会被用于这两个。</p> <p>例如，要使一个盒子的四个角都有 10px 的圆角半径：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { border-radius: 10px; } </code></pre></div> <p>或使右上角的水平半径为 1em，垂直半径为 10％：</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>.box { border-top-right-radius: 1em 10%; } </code></pre></div> <p>我们在下面的示例中设置了所有四个角，然后更改右上角的值使之不同。你可以使用这些值来更改圆角样式。查看 <a href="/zh-CN/docs/Web/CSS/border-radius"><code>border-radius</code></a> 的属性页，查看可用的语法选项。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html live-sample___corners notranslate"><code><div class="box"> <h2>边框</h2> <p>尝试对边框做出调整。</p> </div> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css live-sample___corners notranslate"><code>.box { width: 500px; height: 110px; padding: 0.5em; border: 10px solid rebeccapurple; border-radius: 1em; border-top-right-radius: 10% 30%; } </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="corners sample" id="frame_corners" src="about:blank" data-live-path="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/" data-live-id="corners" 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/Learn_web_development/Core/Styling_basics/Test_your_skills_backgrounds_and_borders">技能测试：背景和边框</a>。</p></div></section><section aria-labelledby="总结"><h2 id="总结"><a href="#总结">总结</a></h2><div class="section-content"><p>我们在这里涵盖了相当多的内容，你可以看到为一个盒子添加背景或边框有相当多的内容。如果你想进一步了解我们所讨论的任何功能，请浏览不同的属性页面。MDN 上的每一个页面都有更多的使用实例，供你玩耍和增强你的知识。</p> <p>在下一篇文章中，我们将了解文档的书写模式如何与 CSS 交互。当文本不是从左到右流动时会发生什么？</p> <ul class="prev-next"><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing"><span class="button-wrap"> 上一页 </span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics"><span class="button-wrap"> 概述：CSS 构建</span></a></li><li><a class="button secondary" href="/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow"><span class="button-wrap"> 下一页 </span></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/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/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/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md?plain=1" title="Folder: zh-cn/learn_web_development/core/styling_basics/backgrounds_and_borders (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%2FLearn_web_development%2FCore%2FStyling_basics%2FBackgrounds_and_borders&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%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbackgrounds_and_borders%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn_web_development%2FCore%2FStyling_basics%2FBackgrounds_and_borders%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Flearn_web_development%2Fcore%2Fstyling_basics%2Fbackgrounds_and_borders%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/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing\"><span class=\"button-wrap\"> 上一页 </span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\"><span class=\"button-wrap\"> 概述：CSS 构建</span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow\"><span class=\"button-wrap\"> 下一页 </span></a></li></ul>\n<p>在本课程中，我们将看看可以用 CSS 背景和边框做的一些创造性事情。从添加渐变、背景图像到圆角，背景和边框可以解决 CSS 中的许多样式问题。</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">前提：</th>\n <td>\n 基础的计算机知识，<a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">安装了基本的软件</a>，了解基本的<a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">文件处理知识</a>和 HTML 基础（已经学习了 <a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content\">HTML 介绍</a>)，以及 CSS 如何工作的基本常识（已经学习了 <a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\">CSS 入门概述</a>）。\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目标：</th>\n <td>学习如何为盒子的背景和边框添加样式。</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"css_的背景样式","title":"CSS 的背景样式","isH3":false,"content":"<p>CSS <a href=\"/zh-CN/docs/Web/CSS/background\"><code>background</code></a> 属性是本课程中我们将遇到的一些普通背景属性的简写表示。如果你在样式表中发现了一个复杂的背景属性，可能会觉得有点难以理解，因为可以同时传入这么多的值：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n background:\n linear-gradient(\n 105deg,\n rgba(255, 255, 255, 0.2) 39%,\n rgba(51, 56, 57, 1) 96%\n )\n center center / 400px 200px no-repeat,\n url(image.png) center no-repeat,\n rebeccapurple;\n}\n</code></pre></div>\n<p>我们将在本教程的后半部分回到这个简写表示的工作原理，但首先让我们通过查看各个背景属性来了解在 CSS 中可以对背景做哪些不同的事情。</p>"}},{"type":"prose","value":{"id":"背景颜色","title":"背景颜色","isH3":true,"content":"<p><a href=\"/zh-CN/docs/Web/CSS/background-color\"><code>background-color</code></a> 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的 <a href=\"/zh-CN/docs/Web/CSS/color_value\"><code><color></code></a> 值。<code>background-color</code> 可以延伸至元素的内容和内边距盒子的下面。</p>\n<p>在下面的例子中，我们用各种颜色值为盒子、标题和 <a href=\"/zh-CN/docs/Web/HTML/Element/span\"><code><span></code></a> 元素添加背景色。尝试修改为任何可用的 <a href=\"/zh-CN/docs/Web/CSS/color_value\"><code><color></code></a> 值。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___color notranslate\"><code><div class=\"box\">\n <h2>背景颜色</h2>\n <p>尝试修改背景<span>颜色</span>。</p>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___color notranslate\"><code>.box {\n padding: 0.3em;\n background-color: #567895;\n}\n\nh2 {\n background-color: black;\n color: white;\n}\nspan {\n background-color: rgb(255 255 255 / 50%);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"color sample\" id=\"frame_color\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"color\" 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-image\"><code>background-image</code></a> 属性可以在一个元素的背景中显示一个图像。在下面的例子中，我们有两个盒子，其中一个盒子具有比盒子大的背景图像（<a href=\"https://mdn.github.io/shared-assets/images/examples/balloons.jpg\" class=\"external\" target=\"_blank\">balloons.jpg</a>），另一个盒子具有较小的单个星星的图像（<a href=\"https://mdn.github.io/shared-assets/images/examples/star.png\" class=\"external\" target=\"_blank\">star.png</a>）。</p>\n<p>这个示例演示了关于背景图像的两种情形。默认情况下，大图不会缩小以适应盒子，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___background-image notranslate\"><code><div class=\"wrapper\">\n <div class=\"box a\"></div>\n <div class=\"box b\"></div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___background-image notranslate\"><code>.wrapper {\n display: flex;\n}\n\n.box {\n width: 200px;\n height: 80px;\n padding: 0.5em;\n border: 1px solid #ccc;\n margin: 20px;\n}\n\n.a {\n background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);\n}\n\n.b {\n background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"background-image sample\" id=\"frame_background-image\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"background-image\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加 <code>background-color</code> 属性，看看效果如何。</p>\n<h4 id=\"控制背景平铺行为\">控制背景平铺行为</h4>\n<p><a href=\"/zh-CN/docs/Web/CSS/background-repeat\"><code>background-repeat</code></a> 属性用于控制图像的平铺行为。可用的值是：</p>\n<ul>\n<li><code>no-repeat</code>——阻止背景重复平铺。</li>\n<li><code>repeat-x</code>——仅水平方向上重复平铺。</li>\n<li><code>repeat-y</code>——仅垂直方向上重复平铺。</li>\n<li><code>repeat</code>——默认值，在水平和垂直两个方向重复平铺。</li>\n</ul>\n<p>在下面的示例中尝试这些值。我们已经将值设置为 <code>no-repeat</code>，因此你将只能看到一个星星。尝试不同的值（<code>repeat-x</code> 和 <code>repeat-y</code>），看看它们的效果如何。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___repeat notranslate\"><code><div class=\"box\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden live-sample___repeat notranslate\"><code>.box {\n width: 200px;\n height: 80px;\n padding: 0.5em;\n border: 1px solid #ccc;\n margin: 20px;\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 live-sample___repeat notranslate\"><code>.box {\n background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);\n background-repeat: no-repeat;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"repeat sample\" id=\"frame_repeat\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"repeat\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<h4 id=\"调整背景图像的大小\">调整背景图像的大小</h4>\n<p>在上面的例子中，我们有一个很大的图像（<em>ballons.jpg</em>），由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 <a href=\"/zh-CN/docs/Web/CSS/background-size\"><code>background-size</code></a> 属性，它可以设置<a href=\"/zh-CN/docs/Web/CSS/length\">长度</a>或<a href=\"/zh-CN/docs/Web/CSS/percentage\">百分比</a>值，来调整图像的大小以适应背景。</p>\n<p>你也可以使用关键字：</p>\n<ul>\n<li><code>cover</code>：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。</li>\n<li><code>contain</code>：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。</li>\n</ul>\n<p>在下面的示例中，我使用了上面示例中的 <em>balloons.jpg</em> 图片，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。</p>\n<p>试试这些：</p>\n<ul>\n<li>改变用于修改背景大小的长度单位。</li>\n<li>去掉长度单位，看看使用 <code>background-size: cover</code> 或 <code>background-size: contain</code> 时会发生什么。</li>\n<li>如果你的图像小于盒子，可以更改 <code>background-repeat</code> 的值来重复平铺图像。</li>\n</ul>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___size notranslate\"><code><div class=\"box\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden live-sample___size notranslate\"><code>.box {\n width: 500px;\n height: 100px;\n padding: 0.5em;\n border: 1px solid #ccc;\n margin: 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 live-sample___size notranslate\"><code>.box {\n background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);\n background-repeat: no-repeat;\n background-size: 80px 10em;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"size sample\" id=\"frame_size\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"size\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<h4 id=\"背景图像定位\">背景图像定位</h4>\n<p><a href=\"/zh-CN/docs/Web/CSS/background-position\"><code>background-position</code></a> 属性允许你选择背景图片出现在它所应用的盒子上的位置。这使用了一个坐标系统，其中方框的左上角是 <code>(0,0)</code>，方框沿水平（<code>x</code>）和垂直（<code>y</code>）轴定位。</p>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n默认的 <code>background-position</code> 值是 <code>(0,0)</code>。</p>\n</div>\n<p>最常见的 <code>background-position</code> 值有两个单独的值——一个水平值后面跟着一个垂直值。</p>\n<p>你可以使用像 <code>top</code> 和 <code>right</code> 这样的关键字（在 <a href=\"/zh-CN/docs/Web/CSS/background-image\"><code>background-image</code></a> 页面上查找其他的关键字）：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n background-image: url(image.png);\n background-repeat: no-repeat;\n background-position: top center;\n}\n</code></pre></div>\n<p>或者使用<a href=\"/zh-CN/docs/Web/CSS/length\">长度</a>和<a href=\"/zh-CN/docs/Web/CSS/percentage\">百分比</a>值：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n background-image: url(image.png);\n background-repeat: no-repeat;\n background-position: 20px 10%;\n}\n</code></pre></div>\n<p>你也可以将关键字与长度或百分比混合在一起，在这种情况下，第一个值必须指水平位置或偏移，第二个值指垂直位置。例如：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n background-image: url(image.png);\n background-repeat: no-repeat;\n background-position: 20px top;\n}\n</code></pre></div>\n<p>最后，你还可以使用四值语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的 CSS 中，我们将背景定位在距顶部 20px 和右侧 10px 处：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n background-image: url(image.png);\n background-repeat: no-repeat;\n background-position: top 20px right 10px;\n}\n</code></pre></div>\n<p>使用下面的示例来处理这些值并在框内移动星星。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___position notranslate\"><code><div class=\"box\"></div>\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css hidden live-sample___position notranslate\"><code>.box {\n width: 500px;\n height: 80px;\n padding: 0.5em;\n border: 1px solid #ccc;\n margin: 20px;\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 live-sample___position notranslate\"><code>.box {\n background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);\n background-repeat: no-repeat;\n background-position: 120px 1em;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"position sample\" id=\"frame_position\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"position\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n简写属性 <code>background-position</code> 用于替代 <a href=\"/zh-CN/docs/Web/CSS/background-position-x\"><code>background-position-x</code></a> 和 <a href=\"/zh-CN/docs/Web/CSS/background-position-y\"><code>background-position-y</code></a>，它们允许用户分别设置不同坐标轴的值。</p>\n</div>"}},{"type":"prose","value":{"id":"渐变背景","title":"渐变背景","isH3":true,"content":"<p>当渐变用于背景时，也可以使用像图像一样的 <a href=\"/zh-CN/docs/Web/CSS/background-image\"><code>background-image</code></a> 属性设置。</p>\n<p>你可以在 MDN 的 <a href=\"/zh-CN/docs/Web/CSS/gradient\"><code><gradient></code></a> 数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣的方法是使用网络上许多 CSS 渐变生成器中的一个，比如<a href=\"https://cssgradient.io/\" class=\"external\" target=\"_blank\">这个</a>。你可以创建一个渐变，然后复制和粘贴生成它的源代码。</p>\n<p>在下面的示例中尝试一些不同的渐变。在这两个盒子里，我们分别有一个线性渐变，它延伸到整个盒子上，还有一个径向渐变，它有一个固定的大小，因此会重复。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___gradients notranslate\"><code><div class=\"wrapper\">\n <div class=\"box a\"></div>\n <div class=\"box b\"></div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___gradients notranslate\"><code>.wrapper {\n display: flex;\n}\n\n.box {\n width: 400px;\n height: 80px;\n padding: 0.5em;\n border: 1px solid #ccc;\n margin: 20px;\n}\n\n.a {\n background-image: linear-gradient(\n 105deg,\n rgb(0 249 255 / 100%) 39%,\n rgb(51 56 57 / 100%) 96%\n );\n}\n\n.b {\n background-image: radial-gradient(\n circle,\n rgb(0 249 255 / 100%) 39%,\n rgb(51 56 57 / 100%) 96%\n );\n background-size: 100px 50px;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"gradients sample\" id=\"frame_gradients\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"gradients\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"多个背景图像","title":"多个背景图像","isH3":true,"content":"<p>也可以有多个背景图像——在单个属性值中指定多个 <code>background-image</code> 值，用逗号分隔每个值。</p>\n<p>当你这样做时，你可能会出现背景图片相互重叠的情况。背景将分层，最后列出的背景图片位于最下层，而之前的每张图片都堆在代码中紧随其后的那张图片之上。</p>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n渐变可以与常规的背景图像很好地混合在一起。</p>\n</div>\n<p>其他 <code>background-*</code> 属性也可以像 <code>background-image</code> 一样使用逗号分隔的方式设置：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>background-image:\n url(image1.png), url(image2.png), url(image3.png), url(image4.png);\nbackground-repeat: no-repeat, repeat-x, repeat;\nbackground-position:\n 10px 20px,\n top right;\n</code></pre></div>\n<p>不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的 <code>image1</code> 的 <code>background-repeat</code> 值将是 <code>no-repeat</code>。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环——在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环——<code>image3</code> 将被赋予第一个位置值，<code>image4</code> 将被赋予第二个位置值。</p>\n<p>我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序，请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___multiple-background-image notranslate\"><code><div class=\"wrapper\">\n <div class=\"box\"></div>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___multiple-background-image notranslate\"><code>.wrapper {\n display: flex;\n}\n\n.box {\n width: 500px;\n height: 80px;\n padding: 0.5em;\n border: 1px solid #ccc;\n margin: 20px;\n}\n\n.box {\n background-image:\n url(https://mdn.github.io/shared-assets/images/examples/star.png),\n url(https://mdn.github.io/shared-assets/images/examples/big-star.png);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"multiple-background-image sample\" id=\"frame_multiple-background-image\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"multiple-background-image\" 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-attachment\"><code>background-attachment</code></a> 属性控制的，它可以取以下值：</p>\n<ul>\n<li><code>scroll</code>：使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。</li>\n<li><code>fixed</code>：使元素的背景固定在视口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。</li>\n<li><code>local</code>：将背景固定在它所设置的元素上，所以当你滚动该元素时，背景也随之滚动。</li>\n</ul>\n<p><a href=\"/zh-CN/docs/Web/CSS/background-attachment\"><code>background-attachment</code></a> 属性只有在有内容要滚动时才会有效果，所以我们做了一个示例来演示这三个值之间的区别——看看 <a href=\"https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html\" class=\"external\" target=\"_blank\">background-attachment.html</a>（或者看看这里的<a href=\"https://github.com/mdn/learning-area/tree/main/css/styling-boxes/backgrounds\" class=\"external\" target=\"_blank\">源代码</a>）。</p>"}},{"type":"prose","value":{"id":"使用_background_简写属性","title":"使用 background 简写属性","isH3":true,"content":"<p>正如我在本课开始时提到的，你将经常看到使用 <a href=\"/zh-CN/docs/Web/CSS/background\"><code>background</code></a> 属性指定的背景。这种简写形式允许你一次设置所有不同的属性。</p>\n<p>如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的示例中，我们有一个渐变，它指定大小和位置，然后是指定为 <code>no-repeat</code> 的图像背景，它指定位置，然后是颜色。</p>\n<p>这里有一些规则，需要在简写背景图像属性时遵循，例如：</p>\n<ul>\n<li><code>background-color</code> 只能在最后一个逗号之后指定。</li>\n<li><code>background-size</code> 值只能立即包含在 <code>background-position</code> 之后，用“/”字符分隔，例如：<code>center/80%</code>。</li>\n</ul>\n<p>查看 <a href=\"/zh-CN/docs/Web/CSS/background\"><code>background</code></a> 的 MDN 页面，以查看所有的注意事项。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___background notranslate\"><code><div class=\"box\"></div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___background notranslate\"><code>.box {\n width: 500px;\n height: 300px;\n padding: 0.5em;\n background:\n linear-gradient(\n 105deg,\n rgb(255 255 255 / 20%) 39%,\n rgb(51 56 57 / 100%) 96%\n )\n center center / 400px 200px no-repeat,\n url(https://mdn.github.io/shared-assets/images/examples/big-star.png) center\n no-repeat,\n rebeccapurple;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"background sample\" id=\"frame_background\" height=\"320px\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"background\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"背景的无障碍考虑","title":"背景的无障碍考虑","isH3":true,"content":"<p>当你把文字放在背景图片或颜色上面时，你应该注意你有足够的对比度让文字对你的访客来说是清晰易读的。如果指定了一个图像，并且文本将被放置在该图像的顶部，你还应该指定一个 <code>background-color</code>，以便在图像未加载时文本也足够清晰。</p>\n<p>屏幕阅读器不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是 HTML 页面的一部分，而不是包含在背景中。</p>"}},{"type":"prose","value":{"id":"边框","title":"边框","isH3":false,"content":"<p>在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边框。通常，当我们使用 CSS 向元素添加边框时，我们使用一个简写属性在一行 CSS 中设置边框的颜色、宽度和样式。</p>\n<p>我们可以使用 <a href=\"/zh-CN/docs/Web/CSS/border\"><code>border</code></a> 为一个框的所有四条边设置边框。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n border: 1px solid black;\n}\n</code></pre></div>\n<p>或者我们可以只设置盒子的一条边，例如：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n border-top: 1px solid black;\n}\n</code></pre></div>\n<p>这些简写等价于：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n border-width: 1px;\n border-style: solid;\n border-color: black;\n}\n</code></pre></div>\n<p>也可以使用更加细粒度的属性：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n border-top-width: 1px;\n border-top-style: solid;\n border-top-color: black;\n}\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>备注：</strong>\n这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性（例如，从左到右或从右到左的文本，或从上到下）。在下一课中，我们将探讨这些问题，这包括<a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Handling_different_text_directions\">处理不同的文本方向</a>。</p>\n</div>\n<p>有各种各样的样式可以用于边框。在下面的例子中，我们为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___borders notranslate\"><code><div class=\"box\">\n <h2>边框</h2>\n <p>尝试对边框做出调整。</p>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___borders notranslate\"><code>* {\n padding: 0.2em;\n}\n.box {\n width: 500px;\n background-color: #567895;\n border: 5px solid #0b385f;\n border-bottom-style: dashed;\n color: #fff;\n}\n\nh2 {\n border-top: 2px dotted rebeccapurple;\n border-bottom: 1em double rgb(24 163 78);\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"borders sample\" id=\"frame_borders\" height=\"200px\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"borders\" 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/border-radius\"><code>border-radius</code></a> 属性和与盒子的每个角相关的普通属性来实现的。两个长度或百分比可以作为一个值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，你只会传入一个值，这个值会被用于这两个。</p>\n<p>例如，要使一个盒子的四个角都有 10px 的圆角半径：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n border-radius: 10px;\n}\n</code></pre></div>\n<p>或使右上角的水平半径为 1em，垂直半径为 10％：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>.box {\n border-top-right-radius: 1em 10%;\n}\n</code></pre></div>\n<p>我们在下面的示例中设置了所有四个角，然后更改右上角的值使之不同。你可以使用这些值来更改圆角样式。查看 <a href=\"/zh-CN/docs/Web/CSS/border-radius\"><code>border-radius</code></a> 的属性页，查看可用的语法选项。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html live-sample___corners notranslate\"><code><div class=\"box\">\n <h2>边框</h2>\n <p>尝试对边框做出调整。</p>\n</div>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css live-sample___corners notranslate\"><code>.box {\n width: 500px;\n height: 110px;\n padding: 0.5em;\n border: 10px solid rebeccapurple;\n border-radius: 1em;\n border-top-right-radius: 10% 30%;\n}\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"corners sample\" id=\"frame_corners\" src=\"about:blank\" data-live-path=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders/\" data-live-id=\"corners\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"技能测试！","title":"技能测试！","isH3":false,"content":"<p>你已经到了本文的结尾，还能记住最重要的信息吗？你可以在继续之前找到一些进一步的测试来验证你是否记住了这些重要知识——参见<a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Test_your_skills_backgrounds_and_borders\">技能测试：背景和边框</a>。</p>"}},{"type":"prose","value":{"id":"总结","title":"总结","isH3":false,"content":"<p>我们在这里涵盖了相当多的内容，你可以看到为一个盒子添加背景或边框有相当多的内容。如果你想进一步了解我们所讨论的任何功能，请浏览不同的属性页面。MDN 上的每一个页面都有更多的使用实例，供你玩耍和增强你的知识。</p>\n<p>在下一篇文章中，我们将了解文档的书写模式如何与 CSS 交互。当文本不是从左到右流动时会发生什么？</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Sizing\"><span class=\"button-wrap\"> 上一页 </span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics\"><span class=\"button-wrap\"> 概述：CSS 构建</span></a></li><li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Overflow\"><span class=\"button-wrap\"> 下一页 </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"zh-CN","mdn_url":"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders","modified":"2025-02-10T12:55:50.000Z","native":"中文 (简体)","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Backgrounds and borders","native":"English (US)"},{"locale":"de","title":"Hintergründe und Rahmen","native":"Deutsch"},{"locale":"es","title":"Fondos y bordes","native":"Español"},{"locale":"fr","title":"Arrière-plans et bordures","native":"Français"},{"locale":"ja","title":"背景と境界線","native":"日本語"},{"locale":"ru","title":"Фон и границы","native":"Русский"}],"pageTitle":"背景与边框 - 学习 Web 开发 | MDN","parents":[{"uri":"/zh-CN/docs/Learn_web_development","title":"学习 Web 开发"},{"uri":"/en-US/docs/Learn_web_development/Core","title":"Core learning modules"},{"uri":"/zh-CN/docs/Learn_web_development/Core/Styling_basics","title":"CSS 构建"},{"uri":"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders","title":"背景与边框"}],"popularity":null,"short_title":"背景与边框","sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Learn_web_development/Getting_started\">入门模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup\">配置环境</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">安装基础软件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">浏览互联网</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\" class=\"only-in-en-us\">Code editors</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">处理文件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">命令行速成课</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website\">你的第一个网站</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">你的网站会是什么样子？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">发布你的网站</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards\" class=\"only-in-en-us\">Web 标准</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">万维网是如何工作的</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Web 和 Web 标准</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\" class=\"only-in-en-us\">How browsers load websites</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills\" class=\"only-in-en-us\">软性技能</a></summary><ol><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\" class=\"only-in-en-us\">Research and learning</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\" class=\"only-in-en-us\">Collaboration and teamwork</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\" class=\"only-in-en-us\">Workflows and processes</a></li><li><a href=\"/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\" class=\"only-in-en-us\">Succeeding in job interviews</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Core\" class=\"only-in-en-us\">核心模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content\">使用 HTML 构建内容</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">开始学习 HTML</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">“头”里有什么——HTML 元信息</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">HTML 文本处理基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">强调与重要性</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/Lists\" class=\"only-in-en-us\">Lists</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">文档与网站架构</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">文本格式进阶</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Creating_links\">创建超链接</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">标记信件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">构建网页内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML 中的图片</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">视频和音频内容</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Mozilla 欢迎页面</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">HTML 表格基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">HTML 表格进阶特性和无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">作业：构建行星数据</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_forms\" class=\"only-in-en-us\">Forms and buttons in HTML</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">HTML 调试</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><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><em><a href=\"/zh-CN/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\" aria-current=\"page\">背景与边框</a></em></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=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting\">使用 JavaScript 动态编码</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">什么是 JavaScript？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/A_first_splash\">JavaScript 初体验</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/What_went_wrong\">查找并解决 JavaScript 代码的错误</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Variables\">如何存储你需要的信息——变量</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Math\">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Strings\">文本处理——JavaScript 中的字符串</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">有用的字符串方法</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Arrays\">数组</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">笑话生成器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Conditionals\">在代码中做决定——条件语句</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Loops\">循环吧，代码</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Functions\">函数——可复用的代码块</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">创建你自己的函数</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Return_values\">函数返回值</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Events\">事件介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Event_bubbling\">事件冒泡</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Image_gallery\">图片库</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript 对象基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/DOM_scripting\">DOM 脚本简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Network_requests\">从服务器获取数据</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/JSON\">使用 JSON</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">处理常见的 JavaScript 问题</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript 架构和库</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">客户端框架介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">框架的主要特性</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">React 入门</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">开始我们的 React 待办清单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">组件化我们的 React App</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\" class=\"only-in-en-us\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\" class=\"only-in-en-us\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\" class=\"only-in-en-us\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\" class=\"only-in-en-us\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility\">无障碍</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">什么是无障碍？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling\">解决常见的无障碍问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML\">HTML：无障碍的良好基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA 基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Multimedia\">多媒体无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Mobile\">移动端无障碍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">测验：无障碍疑难解答</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Core/Design_for_developers\" class=\"only-in-en-us\">为开发人员设计</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Core/Version_control\">版本控制</a></li><li class=\"section\"><a href=\"/en-US/docs/Learn_web_development/Extensions\" class=\"only-in-en-us\">扩展模块</a></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">对象原型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">面向对象编程基本概念</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">JavaScript 中的类</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">实践对象构造</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">为“弹球”示例添加新功能</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs\">客户端 Web API</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Web API 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">视频和音频 API</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">绘图</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">客户端存储</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">第三方 API</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS\">异步 JavaScript</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing\">异步 JavaScript 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Promises\">如何使用 Promise</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">如何实现基于 Promise 的 API</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">worker 简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">序列动画</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms\">Web 表单</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Your_first_form\">创建我的第一个表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">如何构建 HTML 表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">原生表单部件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">HTML5 的输入（input）类型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">其他表单控件</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">样式化 Web 表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">表单样式化进阶</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI 伪类</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Form_validation\">表单数据校验</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">发送表单数据</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools\">理解客户端工具</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">客户端工具概述</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">软件包管理基础</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\">介绍完整的工具链</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">部署我们的应用</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side\">服务端网站</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps\">服务端基础</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">服务端编程介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">客户端服务端交互概述</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">服务端 web 框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">站点安全</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django\">Django web 框架（Python）</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Django 介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">设置 Django 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Part 3: 使用模型</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django 教程 5：主页构建</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django 教程 7: 会话框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django 教程 8：用户授权与许可</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django 教程 9: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django 教程 10: 测试 Django 网页应用</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django 教程 11：部署 Django 到生产环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Web 应用安全</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">评估：DIY Django 微博客</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express web 框架（Node.js）</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Express/Node 入门</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">设置 Node 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express 教程：本地图书馆网站</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express 教程 2：创建站点框架</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express 教程 4：路由和控制器</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express 教程 5: 呈现图书馆数据</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express 教程 6: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express 教程 7：部署到生产环境</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance\">Web 性能</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Web 性能的重要性</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">什么是 web 性能？</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">感知性能</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">测量性能</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/Multimedia\">多媒体：图片</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/video\">多媒体：视频</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/HTML\">HTML 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/CSS\">CSS 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">web 性能的商业案例</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing\">测试</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Introduction\">跨浏览器测试介绍</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">测试的策略</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">处理常见的 HTML 和 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Feature_detection\">实现特性检测</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Automated_testing\">自动化测试简介</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">搭建自己的自动化测试环境</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Transform_animate\" class=\"only-in-en-us\">CSS 变换与动画化</a></li><li><a href=\"/en-US/docs/Learn_web_development/Extensions/Security_privacy\" class=\"only-in-en-us\">安全与隐私</a></li><li class=\"section\">更多资源</li><li class=\"toggle\"><details><summary><a href=\"/zh-CN/docs/Learn_web_development/Howto\">如何解决常见问题</a></summary><ol><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_HTML_problems\">使用 HTML 解决常见问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_CSS_problems\">解决常见的 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">解决 JavaSctript 代码的常见问题</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Web_mechanics\">Web 机制</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Tools_and_setup\">工具和安装</a></li><li><a href=\"/zh-CN/docs/Learn_web_development/Howto/Design_and_accessibility\">设计与无障碍</a></li></ol></details></li><li><a href=\"/en-US/docs/Learn_web_development/About\" class=\"only-in-en-us\">关于</a></li><li><a href=\"/en-US/docs/Learn_web_development/Educators\" class=\"only-in-en-us\">面向教育工作者的资源</a></li><li><a href=\"/en-US/docs/Learn_web_development/Changelog\" class=\"only-in-en-us\">更新日志</a></li></ol>","source":{"folder":"zh-cn/learn_web_development/core/styling_basics/backgrounds_and_borders","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/94f091326ce62f91a51e8cf31db9057f120d649e","filename":"index.md"},"summary":"在本课程中，我们将看看可以用 CSS 背景和边框做的一些创造性事情。从添加渐变、背景图像到圆角，背景和边框可以解决 CSS 中的许多样式问题。","title":"背景与边框","toc":[{"text":"CSS 的背景样式","id":"css_的背景样式"},{"text":"边框","id":"边框"},{"text":"技能测试！","id":"技能测试！"},{"text":"总结","id":"总结"}],"pageType":"learn-module-chapter"}}</script></body></html>