{"id":582,"date":"2024-12-28T17:41:39","date_gmt":"2024-12-28T09:41:39","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=582"},"modified":"2024-12-28T17:41:39","modified_gmt":"2024-12-28T09:41:39","slug":"css-%e5%92%8c-html-%e5%8f%af%e4%bb%a5%e9%80%9a%e8%bf%87%e5%93%aa%e4%ba%9b%e6%96%b9%e5%bc%8f%e4%bd%bf%e6%96%87%e6%9c%ac%e5%9c%a8%e8%a7%86%e8%a7%89%e4%b8%8a%e8%a2%ab%e8%be%b9%e6%a1%86%e8%a6%86%e7%9b%96","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2024\/12\/28\/css-%e5%92%8c-html-%e5%8f%af%e4%bb%a5%e9%80%9a%e8%bf%87%e5%93%aa%e4%ba%9b%e6%96%b9%e5%bc%8f%e4%bd%bf%e6%96%87%e6%9c%ac%e5%9c%a8%e8%a7%86%e8%a7%89%e4%b8%8a%e8%a2%ab%e8%be%b9%e6%a1%86%e8%a6%86%e7%9b%96\/","title":{"rendered":"CSS \u548c HTML \u53ef\u4ee5\u901a\u8fc7\u54ea\u4e9b\u65b9\u5f0f\u4f7f\u6587\u672c\u5728\u89c6\u89c9\u4e0a\u88ab\u8fb9\u6846\u8986\u76d6\u6216\u9690\u85cf\uff1f"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">CSS \u548c HTML \u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u4f7f\u6587\u672c\u5728\u89c6\u89c9\u4e0a\u88ab\u8fb9\u6846\u8986\u76d6\u6216\u9690\u85cf\u3002\u5e38\u89c1\u7684\u505a\u6cd5\u662f\u5229\u7528 <strong><code>overflow<\/code><\/strong>\u3001<strong><code>text-indent<\/code><\/strong> \u6216 <strong><code>clip-path<\/code><\/strong> \u7b49 CSS \u5c5e\u6027\u6765\u8fbe\u5230\u9690\u85cf\u6548\u679c\uff0c\u4e0b\u9762\u662f\u51e0\u79cd\u65b9\u6cd5\uff1a<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>\u4f7f\u7528 <code>overflow: hidden<\/code> \u9690\u85cf\u6587\u672c<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>overflow<\/code> \u5c5e\u6027\u63a7\u5236\u5f53\u5185\u5bb9\u6ea2\u51fa\u5176\u5bb9\u5668\u65f6\u7684\u884c\u4e3a\u3002\u901a\u8fc7\u8bbe\u7f6e <code>overflow: hidden<\/code>\uff0c\u4f60\u53ef\u4ee5\u8ba9\u6ea2\u51fa\u5bb9\u5668\u8fb9\u6846\u7684\u6587\u672c\u88ab\u9690\u85cf\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n    &lt;p&gt;This text will be hidden if it overflows the container boundary.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    width: 200px;           \/* \u8bbe\u7f6e\u5bb9\u5668\u5bbd\u5ea6 *\/\n    height: 50px;           \/* \u8bbe\u7f6e\u5bb9\u5668\u9ad8\u5ea6 *\/\n    overflow: hidden;       \/* \u8d85\u51fa\u5bb9\u5668\u8fb9\u754c\u7684\u6587\u672c\u4f1a\u88ab\u9690\u85cf *\/\n    border: 2px solid #000; \/* \u5bb9\u5668\u8fb9\u6846 *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u5bb9\u5668\u7684\u5927\u5c0f\u9650\u5236\u4e86\u6587\u672c\u7684\u53ef\u89c1\u533a\u57df\uff0c\u8d85\u51fa\u5bb9\u5668\u8fb9\u754c\u7684\u90e8\u5206\u5c06\u88ab\u9690\u85cf\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>\u4f7f\u7528 <code>text-indent<\/code> \u4f7f\u6587\u672c\u6ea2\u51fa\u5bb9\u5668<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u901a\u8fc7\u8bbe\u7f6e\u8d1f\u503c\u7684 <code>text-indent<\/code>\uff0c\u53ef\u4ee5\u5c06\u6587\u672c\u79fb\u51fa\u5bb9\u5668\u7684\u53ef\u89c6\u533a\u57df\uff0c\u4ece\u800c\u5728\u89c6\u89c9\u4e0a\u201c\u8986\u76d6\u201d\u6587\u672c\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n    &lt;p&gt;This text will be pushed out of the container to hide it visually.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    width: 200px;            \/* \u8bbe\u7f6e\u5bb9\u5668\u5bbd\u5ea6 *\/\n    height: 50px;            \/* \u8bbe\u7f6e\u5bb9\u5668\u9ad8\u5ea6 *\/\n    border: 2px solid #000;  \/* \u5bb9\u5668\u8fb9\u6846 *\/\n    overflow: hidden;        \/* \u786e\u4fdd\u8d85\u51fa\u7684\u6587\u672c\u88ab\u9690\u85cf *\/\n}\n\np {\n    text-indent: -9999px;    \/* \u5c06\u6587\u672c\u79fb\u52a8\u5230\u5bb9\u5668\u5916\u90e8 *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u79cd\u65b9\u6cd5\u4f1a\u5c06\u6587\u672c\u63a8\u5230\u5bb9\u5668\u5916\uff0c\u5bfc\u81f4\u6587\u672c\u4e0d\u53ef\u89c1\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. <strong>\u4f7f\u7528 <code>clip-path<\/code> \u526a\u88c1\u6587\u672c<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>clip-path<\/code> \u53ef\u4ee5\u88c1\u526a\u5143\u7d20\uff0c\u4f7f\u5b83\u4eec\u53ea\u663e\u793a\u5176\u4e2d\u7684\u4e00\u90e8\u5206\uff0c\u5176\u4ed6\u90e8\u5206\u5219\u88ab\u201c\u526a\u6389\u201d\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528 <code>clip-path<\/code> \u6765\u5b9a\u4e49\u4e00\u4e2a\u53ef\u89c6\u533a\u57df\uff0c\u9690\u85cf\u6587\u672c\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n    &lt;p&gt;This text will be clipped.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    width: 200px;             \/* \u8bbe\u7f6e\u5bb9\u5668\u5bbd\u5ea6 *\/\n    height: 50px;             \/* \u8bbe\u7f6e\u5bb9\u5668\u9ad8\u5ea6 *\/\n    overflow: hidden;         \/* \u786e\u4fdd\u8d85\u51fa\u7684\u6587\u672c\u88ab\u9690\u85cf *\/\n    border: 2px solid #000;   \/* \u5bb9\u5668\u8fb9\u6846 *\/\n}\n\np {\n    clip-path: inset(0 0 0 100%);  \/* \u526a\u88c1\u6587\u672c\uff0c\u9690\u85cf\u53f3\u4fa7\u7684\u90e8\u5206 *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u91cc\uff0c<code>clip-path: inset(0 0 0 100%)<\/code> \u4f1a\u5c06\u6587\u672c\u4ece\u53f3\u4fa7\u201c\u526a\u6389\u201d\uff0c\u8ba9\u5176\u770b\u8d77\u6765\u88ab\u5bb9\u5668\u7684\u8fb9\u6846\u8986\u76d6\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4. <strong>\u5229\u7528 <code>position: absolute<\/code> \u79fb\u52a8\u6587\u672c<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u901a\u8fc7\u5c06\u6587\u672c\u7684 <code>position<\/code> \u8bbe\u7f6e\u4e3a <code>absolute<\/code>\uff0c\u5e76\u5c06\u5176\u4f4d\u7f6e\u79fb\u52a8\u5230\u5bb9\u5668\u5916\u90e8\uff0c\u4f60\u4e5f\u53ef\u4ee5\u8ba9\u6587\u672c\u201c\u88ab\u8fb9\u6846\u8986\u76d6\u201d\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n    &lt;p&gt;This text is positioned outside the container.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    width: 200px;             \/* \u8bbe\u7f6e\u5bb9\u5668\u5bbd\u5ea6 *\/\n    height: 50px;             \/* \u8bbe\u7f6e\u5bb9\u5668\u9ad8\u5ea6 *\/\n    border: 2px solid #000;   \/* \u5bb9\u5668\u8fb9\u6846 *\/\n    position: relative;       \/* \u4e3a\u5bb9\u5668\u8bbe\u7f6e\u76f8\u5bf9\u5b9a\u4f4d *\/\n}\n\np {\n    position: absolute;       \/* \u7edd\u5bf9\u5b9a\u4f4d *\/\n    top: 0;\n    left: -9999px;            \/* \u5c06\u6587\u672c\u79fb\u5230\u5bb9\u5668\u5916\u9762 *\/\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">5. <strong>\u4f7f\u7528 <code>text-shadow<\/code> \u6765\u9690\u85cf\u6587\u672c<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u867d\u7136 <code>text-shadow<\/code> \u4e3b\u8981\u7528\u4e8e\u7ed9\u6587\u672c\u6dfb\u52a0\u9634\u5f71\u6548\u679c\uff0c\u4f46\u4f60\u4e5f\u53ef\u4ee5\u5229\u7528\u5b83\u6765\u5c06\u6587\u672c\u201c\u8986\u76d6\u201d\u6389\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n    &lt;p&gt;This text will have a shadow that covers it.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n    width: 200px;\n    height: 50px;\n    border: 2px solid #000;\n    overflow: hidden;\n}\n\np {\n    text-shadow: 0 0 0 white;  \/* \u4f7f\u7528\u767d\u8272\u9634\u5f71\u8986\u76d6\u6587\u672c *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u79cd\u65b9\u6cd5\u5e76\u4e0d\u662f\u771f\u6b63\u201c\u9690\u85cf\u201d\u6587\u672c\uff0c\u800c\u662f\u901a\u8fc7\u4e3a\u6587\u672c\u6dfb\u52a0\u4e00\u4e2a\u4e0e\u80cc\u666f\u989c\u8272\u76f8\u540c\u7684\u9634\u5f71\uff0c\u4f7f\u5b83\u770b\u8d77\u6765\u597d\u50cf\u88ab\u8986\u76d6\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u603b\u7ed3<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>overflow: hidden<\/code><\/strong>\uff1a\u9002\u7528\u4e8e\u9690\u85cf\u5bb9\u5668\u5916\u90e8\u6ea2\u51fa\u7684\u6587\u672c\u3002<\/li>\n\n\n\n<li><strong><code>text-indent: -9999px<\/code><\/strong>\uff1a\u5c06\u6587\u672c\u63a8\u5230\u5bb9\u5668\u5916\u90e8\uff0c\u4ece\u800c\u9690\u85cf\u3002<\/li>\n\n\n\n<li><strong><code>clip-path<\/code><\/strong>\uff1a\u901a\u8fc7\u88c1\u526a\u6587\u672c\u6765\u9690\u85cf\u90e8\u5206\u5185\u5bb9\u3002<\/li>\n\n\n\n<li><strong><code>position: absolute<\/code><\/strong>\uff1a\u5c06\u6587\u672c\u5b9a\u4f4d\u5230\u5bb9\u5668\u5916\u90e8\u3002<\/li>\n\n\n\n<li><strong><code>text-shadow<\/code><\/strong>\uff1a\u901a\u8fc7\u9634\u5f71\u8986\u76d6\u6587\u672c\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e9b\u65b9\u6cd5\u4e2d\uff0c<code>overflow: hidden<\/code> \u548c <code>text-indent<\/code> \u662f\u6700\u5e38\u7528\u4e14\u76f4\u63a5\u7684\u65b9\u6cd5\uff0c\u9002\u7528\u4e8e\u5927\u591a\u6570\u60c5\u51b5\u3002\u5982\u679c\u9700\u8981\u7cbe\u786e\u63a7\u5236\u6587\u672c\u7684\u53ef\u89c1\u90e8\u5206\uff0c<code>clip-path<\/code> \u6216\u7edd\u5bf9\u5b9a\u4f4d\u53ef\u80fd\u4f1a\u66f4\u5408\u9002\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS \u548c HTML \u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u4f7f\u6587\u672c\u5728\u89c6\u89c9\u4e0a\u88ab\u8fb9\u6846\u8986\u76d6\u6216\u9690\u85cf\u3002\u5e38\u89c1\u7684\u505a\u6cd5\u662f\u5229\u7528 overflow\u3001te [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-582","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=582"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/582\/revisions"}],"predecessor-version":[{"id":583,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/582\/revisions\/583"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}