{"id":168,"date":"2025-11-24T16:03:24","date_gmt":"2025-11-24T08:03:24","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=168"},"modified":"2025-11-24T16:03:24","modified_gmt":"2025-11-24T08:03:24","slug":"css3%e4%b8%ad%e7%9a%84%e5%ad%97%e4%bd%93%e5%8f%8a%e7%9b%b8%e5%85%b3%e5%b1%9e%e6%80%a7%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/24\/css3%e4%b8%ad%e7%9a%84%e5%ad%97%e4%bd%93%e5%8f%8a%e7%9b%b8%e5%85%b3%e5%b1%9e%e6%80%a7%e8%af%a6%e8%a7%a3\/","title":{"rendered":"CSS3\u4e2d\u7684\u5b57\u4f53\u53ca\u76f8\u5173\u5c5e\u6027\u8be6\u89e3"},"content":{"rendered":"\n<p>\u597d\u7684\uff0c\u963f\u6770\uff0c\u6211\u5e2e\u4f60\u6574\u7406\u4e00\u4efd <strong>CSS3 \u5b57\u4f53\u53ca\u76f8\u5173\u5c5e\u6027\u7684\u8be6\u89e3<\/strong>\uff0c\u5305\u542b\u5b57\u4f53\u8bbe\u7f6e\u3001\u6587\u672c\u6837\u5f0f\u3001\u5b57\u4f53\u6548\u679c\u7b49\uff0c\u5e26\u793a\u4f8b\uff0c\u65b9\u4fbf\u7406\u89e3\u548c\u5b9e\u9645\u5e94\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">CSS3 \u5b57\u4f53\u53ca\u76f8\u5173\u5c5e\u6027\u8be6\u89e3<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 \u5b57\u4f53\u7cfb\u5217\uff08font-family\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u6307\u5b9a\u6587\u672c\u4f7f\u7528\u7684\u5b57\u4f53\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u8bed\u6cd5<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfont-family: &quot;\u5b57\u4f53\u540d\u79f0&quot;, \u5907\u9009\u5b57\u4f53, \u901a\u7528\u5b57\u4f53\u65cf;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np {\n  font-family: &quot;Microsoft YaHei&quot;, &quot;Arial&quot;, sans-serif;\n}\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5e38\u7528\u901a\u7528\u5b57\u4f53\u65cf<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>serif<\/code>\uff1a\u6709\u886c\u7ebf\uff08\u5b8b\u4f53\u3001Times New Roman\uff09<\/li>\n\n\n\n<li><code>sans-serif<\/code>\uff1a\u65e0\u886c\u7ebf\uff08\u5fae\u8f6f\u96c5\u9ed1\u3001Arial\uff09<\/li>\n\n\n\n<li><code>monospace<\/code>\uff1a\u7b49\u5bbd\u5b57\u4f53\uff08Courier\uff09<\/li>\n\n\n\n<li><code>cursive<\/code>\uff1a\u624b\u5199\u4f53<\/li>\n\n\n\n<li><code>fantasy<\/code>\uff1a\u88c5\u9970\u6027\u5b57\u4f53<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 \u5b57\u4f53\u5927\u5c0f\uff08font-size\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u63a7\u5236\u6587\u672c\u5927\u5c0f\uff0c\u53ef\u7528\u957f\u5ea6\u3001\u767e\u5206\u6bd4\u6216\u5173\u952e\u5b57\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nh1 {\n  font-size: 24px;\n}\np {\n  font-size: 1em; \/* \u76f8\u5bf9\u4e8e\u7236\u5143\u7d20 *\/\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5e38\u7528\u5355\u4f4d<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>px<\/code>\uff1a\u56fa\u5b9a\u50cf\u7d20<\/li>\n\n\n\n<li><code>em<\/code>\uff1a\u76f8\u5bf9\u7236\u5143\u7d20\u5b57\u4f53\u5927\u5c0f<\/li>\n\n\n\n<li><code>rem<\/code>\uff1a\u76f8\u5bf9\u6839\u5143\u7d20\uff08html\uff09\u5b57\u4f53\u5927\u5c0f<\/li>\n\n\n\n<li><code>%<\/code>\uff1a\u76f8\u5bf9\u7236\u5143\u7d20\u5b57\u4f53\u5927\u5c0f<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 \u5b57\u4f53\u7c97\u7ec6\uff08font-weight\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u8bbe\u7f6e\u5b57\u4f53\u7c97\u7ec6\u7a0b\u5ea6\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u503c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>normal<\/code>\uff08400\uff09\u3001<code>bold<\/code>\uff08700\uff09<\/li>\n\n\n\n<li>\u6570\u5b57 <code>100~900<\/code>\uff0c100 \u6700\u7ec6\uff0c900 \u6700\u7c97<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nstrong {\n  font-weight: bold;\n}\nh2 {\n  font-weight: 600;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 \u5b57\u4f53\u6837\u5f0f\uff08font-style\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u63a7\u5236\u5b57\u4f53\u6837\u5f0f\uff0c\u5982\u659c\u4f53\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u503c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>normal<\/code>\uff1a\u6b63\u5e38<\/li>\n\n\n\n<li><code>italic<\/code>\uff1a\u659c\u4f53<\/li>\n\n\n\n<li><code>oblique<\/code>\uff1a\u503e\u659c\uff08\u4e0e italic \u7c7b\u4f3c\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nem {\n  font-style: italic;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5\ufe0f\u20e3 \u5b57\u4f53\u53d8\u4f53\uff08font-variant\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u63a7\u5236\u5c0f\u578b\u5927\u5199\u5b57\u6bcd\u7b49\u6548\u679c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e38\u7528\u503c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>normal<\/code>\uff1a\u9ed8\u8ba4<\/li>\n\n\n\n<li><code>small-caps<\/code>\uff1a\u5c0f\u578b\u5927\u5199\u5b57\u6bcd<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nh3 {\n  font-variant: small-caps;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6\ufe0f\u20e3 \u6587\u672c\u88c5\u9970\uff08text-decoration\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u6dfb\u52a0\u4e0b\u5212\u7ebf\u3001\u5220\u9664\u7ebf\u7b49\u6548\u679c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e38\u7528\u503c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>none<\/code>\uff1a\u65e0\u88c5\u9970<\/li>\n\n\n\n<li><code>underline<\/code>\uff1a\u4e0b\u5212\u7ebf<\/li>\n\n\n\n<li><code>overline<\/code>\uff1a\u4e0a\u5212\u7ebf<\/li>\n\n\n\n<li><code>line-through<\/code>\uff1a\u5220\u9664\u7ebf<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\na {\n  text-decoration: underline;\n}\ndel {\n  text-decoration: line-through;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7\ufe0f\u20e3 \u6587\u672c\u5bf9\u9f50\uff08text-align\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u63a7\u5236\u6bb5\u843d\u6216\u5757\u7ea7\u5143\u7d20\u4e2d\u6587\u672c\u7684\u6c34\u5e73\u5bf9\u9f50\u65b9\u5f0f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u503c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>left<\/code>\uff1a\u5de6\u5bf9\u9f50<\/li>\n\n\n\n<li><code>right<\/code>\uff1a\u53f3\u5bf9\u9f50<\/li>\n\n\n\n<li><code>center<\/code>\uff1a\u5c45\u4e2d<\/li>\n\n\n\n<li><code>justify<\/code>\uff1a\u4e24\u7aef\u5bf9\u9f50<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np {\n  text-align: justify;\n}\nh1 {\n  text-align: center;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8\ufe0f\u20e3 \u6587\u672c\u7f29\u8fdb\uff08text-indent\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u9996\u884c\u7f29\u8fdb\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np {\n  text-indent: 2em;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">9\ufe0f\u20e3 \u6587\u672c\u95f4\u8ddd<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b57\u7b26\u95f4\u8ddd\uff08letter-spacing\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nh2 {\n  letter-spacing: 2px; \/* \u5b57\u7b26\u95f4\u8ddd *\/\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5355\u8bcd\u95f4\u8ddd\uff08word-spacing\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np {\n  word-spacing: 5px; \/* \u5355\u8bcd\u95f4\u8ddd *\/\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u884c\u9ad8\uff08line-height\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np {\n  line-height: 1.6; \/* \u884c\u95f4\u8ddd *\/\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">10\ufe0f\u20e3 \u6587\u672c\u6ea2\u51fa\uff08text-overflow\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u63a7\u5236\u5355\u884c\u6587\u672c\u6ea2\u51fa\u663e\u793a\u6548\u679c\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u914d\u5408\u4f7f\u7528<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ndiv {\n  white-space: nowrap;     \/* \u4e0d\u6362\u884c *\/\n  overflow: hidden;        \/* \u8d85\u51fa\u9690\u85cf *\/\n  text-overflow: ellipsis; \/* \u7528\u7701\u7565\u53f7\u663e\u793a *\/\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">11\ufe0f\u20e3 \u5b57\u4f53\u5bfc\u5165\uff08@font-face\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f5c\u7528<\/h3>\n\n\n\n<p>\u81ea\u5b9a\u4e49\u5b57\u4f53\uff0c\u53ef\u4ece\u7f51\u7edc\u6216\u672c\u5730\u6587\u4ef6\u52a0\u8f7d\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n@font-face {\n  font-family: &quot;MyFont&quot;;\n  src: url(&quot;myfont.woff2&quot;) format(&quot;woff2&quot;),\n       url(&quot;myfont.woff&quot;) format(&quot;woff&quot;);\n}\n\np {\n  font-family: &quot;MyFont&quot;, sans-serif;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">12\ufe0f\u20e3 \u7efc\u5408\u793a\u4f8b<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;p class=&quot;fancy-text&quot;&gt;\u8fd9\u662f\u4e00\u4e2a\u6f02\u4eae\u7684\u6587\u5b57\u793a\u4f8b&amp;lt;\/p&gt;\n\n&amp;lt;style&gt;\n.fancy-text {\n  font-family: &quot;Georgia&quot;, serif;\n  font-size: 18px;\n  font-weight: 600;\n  font-style: italic;\n  font-variant: small-caps;\n  text-align: center;\n  text-decoration: underline;\n  letter-spacing: 1px;\n  word-spacing: 3px;\n  line-height: 1.8;\n}\n&amp;lt;\/style&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u603b\u7ed3\u5efa\u8bae<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>font-family<\/strong>: \u4f18\u5148\u4f7f\u7528 web \u5b89\u5168\u5b57\u4f53\u6216\u81ea\u5b9a\u4e49\u5b57\u4f53\u3002<\/li>\n\n\n\n<li><strong>font-size<\/strong>: \u63a8\u8350\u4f7f\u7528 <code>em\/rem<\/code> \u505a\u54cd\u5e94\u5f0f\u5b57\u4f53\u3002<\/li>\n\n\n\n<li><strong>font-weight &amp; font-style<\/strong>: \u63d0\u5347\u6587\u5b57\u5c42\u6b21\u611f\u3002<\/li>\n\n\n\n<li><strong>text-align \/ line-height \/ letter-spacing<\/strong>: \u63d0\u5347\u53ef\u8bfb\u6027\u548c\u7f8e\u89c2\u5ea6\u3002<\/li>\n\n\n\n<li><strong>@font-face<\/strong>: \u652f\u6301\u4e2a\u6027\u5316\u5b57\u4f53\uff0c\u6ce8\u610f\u517c\u5bb9\u6027\u3002<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u597d\u7684\uff0c\u963f\u6770\uff0c\u6211\u5e2e\u4f60\u6574\u7406\u4e00\u4efd CSS3 \u5b57\u4f53\u53ca\u76f8\u5173\u5c5e\u6027\u7684\u8be6\u89e3\uff0c\u5305\u542b\u5b57\u4f53\u8bbe\u7f6e\u3001\u6587\u672c\u6837&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/24\/css3%e4%b8%ad%e7%9a%84%e5%ad%97%e4%bd%93%e5%8f%8a%e7%9b%b8%e5%85%b3%e5%b1%9e%e6%80%a7%e8%af%a6%e8%a7%a3\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-168","post","type-post","status-publish","format-standard","hentry","category-css"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=168"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/168\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/168\/revisions\/169"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}