{"id":65,"date":"2024-12-01T09:28:53","date_gmt":"2024-12-01T01:28:53","guid":{"rendered":"https:\/\/note.yuncrown.com\/?p=65"},"modified":"2024-12-01T10:03:55","modified_gmt":"2024-12-01T02:03:55","slug":"css3%e7%89%b9%e6%80%a7","status":"publish","type":"post","link":"https:\/\/note.yuncrown.com\/index.php\/2024\/12\/01\/css3%e7%89%b9%e6%80%a7\/","title":{"rendered":"CSS3\u7279\u6027"},"content":{"rendered":"\n

resize<\/strong><\/p>\n\n\n\n

resize\u8c03\u6574\u5143\u7d20\u5927\u5c0f\uff0c\u5fc5\u987b\u8ddfoverflow\u914d\u5408\u4f7f\u7528<\/p>\n\n\n\n

background-origin<\/strong><\/p>\n\n\n\n

div {\n\/* border-box:\u4eceborder\u533a\u57df\u5f00\u59cb\u663e\u793a\u80cc\u666f\u56fe\u7247\uff08\u4ece\u8fb9\u6846\u5f00\u59cb\uff09 *\/\n\tbackground-origin: border-box;\n\t\/* content-box:\u4ececontent\u533a\u57df\u5f00\u59cb\u663e\u793a\u80cc\u666f\u56fe\u7247\uff08padding\u5185\u90e8\uff0c\u5185\u5bb9\u533a\uff09 *\/\n\tbackground-origin: content-box;\n\t\/* padding-box:\u4ecepadding\u533a\u57df\u5f00\u59cb\u663e\u793a\u80cc\u666f\u56fe\u7247\uff08\u9ed8\u8ba4\u503c\uff09 *\/\n\tbackground-origin: padding-box;\n}<\/code><\/pre>\n\n\n\n
background-clip<\/strong><\/p>\n\n\n\n
div {\n\t\/* border-box\uff1a\u4eceborder\u533a\u57df\u5f00\u59cb\u5411\u5916\u88c1\u526a\u56fe\u7247\uff08\u9ed8\u8ba4\u503c\uff09 *\/\n\tbackground-clip: border-box;\n\t\/* content-box\uff1a\u4ececontent\u533a\u57df\u5f00\u59cb\u5411\u5916\u88c1\u526a\u56fe\u7247 *\/\n\tbackground-clip: content-box;\n\t\/* padding-box\uff1a\u4ecepadding\u533a\u57df\u5f00\u59cb\u5411\u5916\u88c1\u526a\u56fe\u7247 *\/\n\tbackground-clip: padding-box;\n\t\/* text\uff1a\u80cc\u666f\u56fe\u53ea\u5448\u73b0\u5728\u6587\u5b57\u4e0a\uff08\u8981\u52a0-webkit-\u524d\u7f00\uff0c\u9700\u8981\u6587\u5b57\u8bbe\u7f6e\u4e3a\u900f\u660e\uff09 *\/\n\tbackground-clip: text;\n}<\/code><\/pre>\n\n\n\n
outline-offset\u662f\u72ec\u7acb\u5c5e\u6027\uff0c\u4e0d\u662foutline\u7684\u5b50\u5c5e\u6027<\/p>\n\n\n\n
text-shadow\uff1a\u6587\u5b57\u9634\u5f71<\/p>\n\n\n\n
white-space\uff1a\u6587\u5b57\u6362\u884c<\/p>\n\n\n\n
text-decoration\uff1a\u8bbe\u7f6e\u6587\u5b57\u7684\u4e0a\u5212\u7ebf\uff0c\u4e0b\u5212\u7ebf\uff0c\u5220\u9664\u7ebf<\/p>\n\n\n\n
-webkit-text-stroke\uff1a\u6587\u5b57\u63cf\u8fb9<\/p>\n\n\n\n
background-image: linear-gradient(red, yellow, green); \u7ebf\u6027\u6e10\u53d8\uff08\u4ece\u4e0a\u5f80\u4e0b\uff09<\/p>\n\n\n\n
background-image: linear-gradient(to right, red, yellow, green); \u7ebf\u6027\u6e10\u53d8\uff08\u4ece\u5de6\u5f80\u53f3\uff09<\/p>\n\n\n\n
background-image: radial-gradient(red, yellow, green);\u5f84\u5411\u6e10\u53d8\uff08\u5706\u5fc3\u5728\u4e2d\u95f4\uff09<\/p>\n\n\n\n
background-image: radial-gradient(at left top, red, yellow, green);\u5f84\u5411\u6e10\u53d8\uff08\u5706\u5fc3\u5728\u5de6\u4e0a\u89d2\uff09<\/p>\n\n\n\n
\u91cd\u590d\u6e10\u53d8\uff1a\u5728\u6ca1\u6709\u53d1\u751f\u6e10\u53d8\u7684\u533a\u57df\uff0c\u91cd\u65b0\u5f00\u59cb\u6e10\u53d8<\/p>\n\n\n\n
background-image: repeating-linear-gradient();\u91cd\u590d\u6e10\u53d8<\/p>\n\n\n\n
box-sizing: border-box;\u8fb9\u6846\u5bbd\u5ea6\u4e5f\u7b97\u5728\u8bbe\u7f6e\u7684\u5bbd\u9ad8\u5185\uff08\u9ed8\u8ba4\u8fb9\u6846\u5bbd\u5ea6\u4e0d\u8ba1\u7b97\u5728\u5185\uff09<\/p>\n\n\n\n
\u6587\u672c\u6ea2\u51fa\u540e\u622a\u6389\u6ea2\u51fa\u90e8\u5206\u6362\u6210\u4e09\u4e2a\u70b9<\/strong><\/p>\n\n\n\n
li {\n\t\/* \u4f7f\u7528text-overflow\u5fc5\u987b\u5b9a\u4e49overflow\u4e3a\u975evisible\u503c *\/\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n}<\/code><\/pre>\n\n\n\n
\u5f15\u5165\u9879\u76ee\u5b57\u4f53\u6216\u8005\u7f51\u7edc\u5b57\u4f53<\/strong><\/p>\n\n\n\n
\/* \u5b57\u4f53\u6587\u4ef6\u592a\u5927\uff0c\u4e0d\u9002\u5408\u5b8c\u5168\u5f15\u5165\u5230\u7f51\u9875\u91cc *\/\n\/* \u53ef\u4ee5\u5b9a\u5236\u5b57\u4f53 *\/\n\/* \u963f\u91cc\u5b57\u4f53\u751f\u6210\u7f51\u7ad9\u6216\u5176\u4ed6\u6536\u8d39\u5b57\u4f53\u7f51\u7ad9\u5b9a\u5236 *\/\n\/* https:\/\/www.iconfont.cn\/ *\/\n\/* \u53c2\u8003\u8fd9\u4e2a\u6559\u7a0bhttps:\/\/www.bilibili.com\/video\/BV1p84y1P7Z5?p=178&vd_source=3cccbc9031fea1afcc449d8ddf0403c9 *\/\n@font-face {\n    font-family: \"\u54c8\u54c8\u54c8\";\n    src: url(\".\/font\/\u65b9\u6b63\u624b\u8bb0.ttf\");\n}<\/code><\/pre>\n\n\n\n
BFC<\/em><\/p>\n\n\n\n
\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898<\/strong><\/p>\n\n\n\n
1. \u5143\u7d20\u5f00\u542fBFC\u540e\uff0c\u5176\u5b50\u5143\u7d20\u4e0d\u4f1a\u518d\u4ea7\u751fmargin\u584c\u9677\u95ee\u9898<\/p>\n\n\n\n
2. \u5143\u7d20\u5f00\u542fBFC\u540e\uff0c\u81ea\u5df1\u4e0d\u4f1a\u88ab\u5176\u4ed6\u6d6e\u52a8\u5143\u7d20\u8986\u76d6<\/p>\n\n\n\n
3. \u5143\u7d20\u5f00\u542fBFC\u540e\uff0c\u5c31\u7b97\u5176\u5b50\u5143\u7d20\u6d6e\u52a8\uff0c\u5143\u7d20\u81ea\u8eab\u9ad8\u5ea6\u4e5f\u4e0d\u4f1a\u584c\u9677<\/p>\n\n\n\n
\u5982\u4f55\u5f00\u542fBFC<\/strong><\/p>\n\n\n\n
\/* \u6839\u5143\u7d20\uff08html\uff09\u81ea\u52a8\u5f00\u542f *\/\n.father {\n\t\/* \u6d6e\u52a8\u5143\u7d20 *\/\n\tfloat: left;\n\t\/* \u7edd\u5bf9\u5b9a\u4f4d\uff0c\u56fa\u5b9a\u5b9a\u4f4d\u7684\u5143\u7d20 *\/\n\tposition: absolute;\n\t\/* \u884c\u4e1a\u5757\u5143\u7d20 *\/\n\tdisplay: inline-block;\n\t\/* \u8868\u683c\u5355\u5143\u683c\uff1atable\u3001thead\u3001tbody... *\/\n        display: table;\n\t\/* overflow\u503c\u4e0d\u4e3avisible\u7684\u5757\u5143\u7d20 *\/\n\toverflow: hidden;\n\t\/* \u4f38\u7f29\u9879\u76ee\uff0c\u7236\u5143\u7d20(body)\u52a0display: flex; *\/\n\t\/* display: flex; *\/\n\t\/* \u591a\u5217\u5bb9\u5668 *\/\n\tcolumn-count: 1;\n\t\/* display\u7684\u503c\u8bbe\u7f6e\u4e3aflow-root\uff08\u526f\u4f5c\u7528\u6700\u5c0f\uff0c\u6700\u5e38\u7528\uff09 *\/\n\tdisplay: flow-root;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
resize resize\u8c03\u6574\u5143\u7d20\u5927\u5c0f\uff0c\u5fc5\u987b\u8ddfoverflow\u914d\u5408\u4f7f\u7528 background-origin b […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[13,11],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-6","tag-css","tag-11"],"_links":{"self":[{"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":4,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/posts\/65\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}