1 css\u4e2d\u6bcf\u884c\u90fd\u6709\u884c\u9ad8\uff0c \u6280\u5de7\uff1a\u5982\u679c\u4e00\u6bb5\u6587\u672c\u53ea\u6709\u4e00\u884c\uff0c\u5982\u679c\u6b64\u65f6\u8bbe\u7f6e\u884c\u9ad8 = \u76d2\u5b50\u9ad8<\/strong>\uff0c\u5c31\u53ef\u4ee5\u4fdd\u8bc1\u5355\u884c\u6587\u672c\u5782\u76f4\u5c45\u4e2d\u3002<\/p>\n \u591a\u884c\u60c5\u51b5\u4e0b\uff1a<\/p>\n \u53ef\u7528\u4e8e\u6307\u5b9a\u884c\u5185\u5143\u7d20<\/strong>\uff08inline\uff09\u3001\u884c\u5185\u5757\u5143\u7d20<\/strong>\uff08inline-block\uff09\u3001\u8868\u683c\u7684\u5355\u5143\u683c<\/strong>\uff08table-cell\uff09\u7684\u5782\u76f4\u5bf9\u9f50\u65b9\u5f0f\uff0c\u4e3b\u8981\u662f\u7528\u4e8e\u56fe\u7247\u3001\u8868\u683c\u3001\u6587\u672c\u7684\u5bf9\u9f50\u3002<\/p>\n \u4e0a\u9762\u8fd9\u51e0\u4e2a\u5c5e\u6027\u53ef\u4ee5\u8fde\u5199\uff0c\u4f46\u662f\u6709\u4e00\u4e2a\u8981\u6c42\uff0cfont\u5c5e\u6027\u8fde\u5199\u81f3\u5c11\u8981\u6709\u5b57\u53f7\u548c\u5b57\u4f53<\/strong>\uff0c\u5426\u5219\u8fde\u5199\u662f\u4e0d\u751f\u6548\u7684\uff08\u76f8\u5f53\u4e8e\u6ca1\u6709\u8fd9\u4e00\u884c\u4ee3\u7801\uff09\u3002<\/p>\n \u6240\u6709\u7684\u4e2d\u6587\u5b57\u4f53\uff0c\u90fd\u6709\u82f1\u8bed\u522b\u540d \u884c\u9ad8\u53ef\u4ee5\u7528\u767e\u5206\u6bd4\uff0c\u8868\u793a\u5b57\u53f7\u7684\u767e\u5206\u4e4b\u591a\u5c11\u3002<\/p>\n \u9f20\u6807\u7684\u5c5e\u6027 \u5e38\u7528<\/strong><\/p>\n \u7ebf\u6027\u6e10\u53d8\uff1a\u6cbf\u7740\u67d0\u6761\u76f4\u7ebf\u671d\u4e00\u4e2a\u65b9\u5411\u4ea7\u751f\u6e10\u53d8\u6548\u679c\u3002<\/p>\n<\/li>\n \u65b9\u5411\u53ef\u4ee5\u662f\uff1a \u5f84\u5411\u6e10\u53d8\uff1a\u4ece\u4e00\u4e2a\u4e2d\u5fc3\u70b9<\/strong>\u5f00\u59cb\u6cbf\u7740\u56db\u5468<\/strong>\u4ea7\u751f\u6e10\u53d8\u6548\u679c\u3002<\/p>\n<\/li>\n \u4e2d\u5fc3\u70b9\u7684\u4f4d\u7f6e\u53ef\u4ee5\u662f\uff1aat left right center bottom top\u3002\u5982\u679c\u4ee5\u50cf\u7d20\u4e3a\u5355\u4f4d\uff0c\u5219\u4e2d\u5fc3\u70b9\u53c2\u7167\u7684\u662f\u76d2\u5b50\u7684\u5de6\u4e0a\u89d2\u3002<\/p>\n<\/li>\n \u91cd\u590d\u6e10\u53d8\u3002<\/p>\n<\/li>\n \u4e5f\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528background\u76f4\u63a5\u5c06\u591a\u4e2a\u5c5e\u6027\u5199\u5728\u4e00\u4e2a\u58f0\u660e\u4e2d\u3002<\/p>\n \u7b49\u4ef7\u4e8e\uff1a<\/p>\n \u5e38\u89c4\u989c\u8272\u8868\u793a\uff1a<\/p>\n HSLA\u8868\u793a\u6cd5\uff1a<\/p>\n H\u7684\u53d6\u503c\u53ef\u4ee5\u53c2\u8003\u8272\u76d8\uff1a<\/p>\n \u8bbe\u7f6e\u900f\u660e\u5ea6\u7684\u5176\u4ed6\u65b9\u5f0f\uff1a<\/p>\n \u8d85\u5927\u578b\u56fe\u7247\u8bbe\u7f6e\u6210\u80cc\u666f\u5bb9\u6613\u51fa\u73b0\u5de6\u53f3\u6eda\u52a8\u6761<\/p>\n \u6b63\u786e\u505a\u6cd5\uff1a<\/p>\n \u5c06banner\u56fe\u4f5c\u4e3adiv\u7684\u80cc\u666f\u56fe\uff0c\u8fd9\u6837\u7684\u8bdd\uff0c\u80cc\u666f\u56fe\u8d85\u51fadiv\u7684\u90e8\u5206\uff0c\u4f1a\u81ea\u52a8\u79fb\u6ea2\u51fa\u3002<\/p>\n \u53ef\u4ee5\u7ed9\u4e00\u4e2a\u76d2\u5b50\u540c\u65f6\u8bbe\u7f6e\u591a\u4e2a\u80cc\u666f\uff0c\u7528\u4ee5\u9017\u53f7\u9694\u5f00\u5373\u53ef\u3002\u53ef\u7528\u4e8e\u81ea\u9002\u5e94\u5c40\u3002<\/p>\n \u867d\u7136 \u5b57\u4f53\u5c5e\u6027 CSS\u6ca1\u6709\u9ed8\u8ba4\u5355\u4f4d\u3002 1 in=2.54cm=25.4mm=72pt=6pc\u3002 in\uff1a\u82f1\u5bf8Inche […]<\/p>\n","protected":false},"author":1,"featured_media":126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"class_list":["post-236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-31"],"_links":{"self":[{"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/posts\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":1,"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":237,"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/posts\/236\/revisions\/237"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/media\/126"}],"wp:attachment":[{"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/162.14.82.114\/index.php\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}in<\/code>=2.54cm<\/code>=25.4mm<\/code>=72pt<\/code>=6pc<\/code>\u3002<\/p>\n\n
in<\/code>\uff1a\u82f1\u5bf8Inches (1 \u82f1\u5bf8 = 2.54 \u5398\u7c73)<\/li>\ncm<\/code>\uff1a\u5398\u7c73Centimeters<\/li>\nmm<\/code>\uff1a\u6beb\u7c73Millimeters<\/li>\npt<\/code>\uff1a\u70b9Points\uff0c\u6216\u8005\u53eb\u82f1\u9551 (1\u70b9 = 1\/72\u82f1\u5bf8)<\/li>\npc<\/code>\uff1a\u76ae\u5361Picas (1 \u76ae\u5361 = 12 \u70b9)<\/li>\n<\/ul>\n<\/blockquote>\npx<\/code>\uff1a\u50cf\u7d20 em<\/code>\uff1a\u5370\u5237\u5355\u4f4d\u76f8\u5f53\u4e8e12\u4e2a\u70b9 %<\/code>\uff1a\u767e\u5206\u6bd4\uff0c\u76f8\u5bf9\u5468\u56f4\u7684\u6587\u5b57\u7684\u5927\u5c0f\uff0c\u4e0d\u540c\u5206\u8fa8\u7387\u5355\u4e2a\u50cf\u7d20\u957f\u5ea6\u4e0d\u4e00\u6837\u3002<\/p>\nfont-size:200%<\/code><\/pre>\nfont\u5b57\u4f53\u5c5e\u6027<\/h2>\n
line-height<\/code>\uff0c\u884c\u9ad8\u3001\u5b57\u53f7\uff0c\u4e00\u822c\u90fd\u662f\u5076\u6570<\/strong>\uff0c\u8fd9\u6837\u53ef\u4ee5\u4fdd\u8bc1\u6587\u5b57\u5728\u884c\u4e2d\u592e\u3002<\/p>\n![\"img\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714849.png\")
<\/div>\n<\/div>\nvertical-align<\/h2>\n
![\"image-20220711222954711\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714851.png\")
<\/div><\/p>\n\/\/\u5b57\u53f7+\u884c\u9ad8+\u5b57\u4f53\uff1a\nfont-size:14px;\nline-height:24px;\nfont-family:"\u5b8b\u4f53";\n==>font: \u52a0\u7c97 \u5b57\u53f7\/\u884c\u9ad8\/ \u5b57\u4f53\n==>font: 400 14px\/24px "\u5b8b\u4f53";\nPS\uff1a400\u662fnomal\uff0c700\u662fbold\u3002<\/code><\/pre>\n\n
font-family: "\u5fae\u8f6f\u96c5\u9ed1","\u5b8b\u4f53";<\/code>\u8868\u793a\u5982\u679c\u7528\u6237\u6ca1\u6709\u5fae\u8f6f\u96c5\u9ed1\u5c31\u4f7f\u7528\u5b8b\u4f53<\/p>\n<\/li>\nfont-family: "Times New Roman","\u5fae\u8f6f\u96c5\u9ed1","\u5b8b\u4f53";<\/code>\u6240\u6709\u7684\u4e2d\u6587\u4e0d\u80fd\u5339\u914d\u82f1\u8bed\u5b57\u4f53\uff0c\u5c31\u81ea\u52a8\u7684\u53d8\u4e3a\u540e\u9762\u7684\u4e2d\u6587\u5b57\u4f53<\/p>\n<\/li>\nfont:12px\/30px "Times New Roman","Microsoft YaHei","SimSun";<\/code><\/p>\n<\/li>\n\n
font:12px\/200% "SimSun"<\/code>==font:12px\/24px "SimSun"<\/code><\/li>\nfont:16px\/48px "SimSun"<\/code>==font:12px\/300% "SimSun"<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\u6587\u672c\u5c5e\u6027<\/h1>\n
\u6587\u672c\u5c5e\u6027<\/h2>\n
![\"img\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714852.png\")
<\/div>\n<\/div>\n\u5217\u8868\u5c5e\u6027<\/h2>\n
ul li{\n list-style-image:url(images\/\u5927\u8001\u5a46.png);\n margin-left:80px;\n}\n\/*\u7b2c\u4e8c\u884c\u4ee3\u7801\u8868\u793a\u5728\u5217\u8868\u9879\u524d\u9762\u653e\u4e00\u4e2a\u56fe\u7247\n\u7b2c\u4e8c\u4e2a\u662f\u4e3a\u4e86\u8ba9\u56fe\u7247\u5b8c\u6574\u663e\u793a\u51fa\u6765*\/<\/code><\/pre>\n![\"img\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714853.png\")
<\/div>\n<\/div>\noverflow\u5c5e\u6027<\/h2>\n
overflow<\/code>\u5c5e\u6027\u7684\u5c5e\u6027\u503c\u53ef\u4ee5\u662f\uff1a<\/p>\n\n
visible<\/code>\uff1a\u9ed8\u8ba4\u503c\u3002\u591a\u4f59\u7684\u5185\u5bb9\u4e0d\u526a\u5207\u4e5f\u4e0d\u6dfb\u52a0\u6eda\u52a8\u6761\uff0c\u4f1a\u5168\u90e8\u663e\u793a\u51fa\u6765\u3002<\/li>\nhidden<\/code>\uff1a\u4e0d\u663e\u793a\u8d85\u8fc7\u5bf9\u8c61\u5c3a\u5bf8\u7684\u5185\u5bb9\u3002<\/li>\nauto<\/code>\uff1a\u5982\u679c\u5185\u5bb9\u4e0d\u8d85\u51fa\uff0c\u5219\u4e0d\u663e\u793a\u6eda\u52a8\u6761\uff1b\u5982\u679c\u5185\u5bb9\u8d85\u51fa\uff0c\u5219\u663e\u793a\u6eda\u52a8\u6761\u3002<\/li>\nscroll<\/code>\uff1aWindows \u5e73\u53f0\u4e0b\uff0c\u65e0\u8bba\u5185\u5bb9\u662f\u5426\u8d85\u51fa\uff0c\u603b\u662f\u663e\u793a\u6eda\u52a8\u6761\u3002Mac \u5e73\u53f0\u4e0b\uff0c\u548c auto<\/code> \u5c5e\u6027\u76f8\u540c\u3002<\/li>\n<\/ul>\n<!doctype html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport"\n content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">\n <meta http-equiv="X-UA-Compatible" content="ie=edge">\n <meta name="Generator" content="EditPlus\u00ae">\n <meta name="Author" content="">\n <meta name="Keywords" content="">\n <meta name="Description" content="">\n <title>Overflow<\/title>\n <style type="text\/css">\n div{\n width:100px;\n height: 100px;\n background-color: #00cc66;\n margin-right: 100px;\n float: left;\n }\n #div1{\n overflow: auto;\n }\n #div2{\n overflow: visible;\n }\n #div3{\n overflow: hidden;\n }\n <\/style>\n<\/head>\n<body>\n <div id="div1">\u98a0\u72c2\u67f3\u7d6e\u968f\u98ce\u53bb\uff0c\u8f7b\u8584\u6843\u82b1\u9010\u6c34\u6d41 \u4f55\u65b9\u53ef\u5316\u8eab\u5343\u4ebf\uff0c\u4e00\u6811\u6885\u82b1\u4e00\u653e\u7fc1\u3002 \u8299\u84c9\u4e0d\u53ca\u7f8e\u4eba\u5986\uff0c\u6c34\u6bbf\u98ce\u6765\u73e0\u7fe0\u9999\u3002<\/div>\n <div id="div2">\u98a0\u72c2\u67f3\u7d6e\u968f\u98ce\u53bb\uff0c\u8f7b\u8584\u6843\u82b1\u9010\u6c34\u6d41 \u4f55\u65b9\u53ef\u5316\u8eab\u5343\u4ebf\uff0c\u4e00\u6811\u6885\u82b1\u4e00\u653e\u7fc1\u3002 \u8299\u84c9\u4e0d\u53ca\u7f8e\u4eba\u5986\uff0c\u6c34\u6bbf\u98ce\u6765\u73e0\u7fe0\u9999\u3002<\/div>\n <div id="div3">\u98a0\u72c2\u67f3\u7d6e\u968f\u98ce\u53bb\uff0c\u8f7b\u8584\u6843\u82b1\u9010\u6c34\u6d41 \u4f55\u65b9\u53ef\u5316\u8eab\u5343\u4ebf\uff0c\u4e00\u6811\u6885\u82b1\u4e00\u653e\u7fc1\u3002 \u8299\u84c9\u4e0d\u53ca\u7f8e\u4eba\u5986\uff0c\u6c34\u6bbf\u98ce\u6765\u73e0\u7fe0\u9999\u3002<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n![\"image-20220711233929326\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714854.png\")
<\/div><\/p>\ncursor\u5c5e\u6027<\/h2>\n
cursor<\/code>\u6709\u4ee5\u4e0b\u51e0\u4e2a\u5c5e\u6027\u503c\uff1a<\/p>\n\n
auto<\/code>\uff1a\u9ed8\u8ba4\u503c\u3002\u6d4f\u89c8\u5668\u6839\u636e\u5f53\u524d\u60c5\u51b5\u81ea\u52a8\u786e\u5b9a\u9f20\u6807\u5149\u6807\u7c7b\u578b\u3002<\/li>\npointer<\/code>\uff1aIE6.0\uff0c\u7ad6\u8d77\u4e00\u53ea\u624b\u6307\u7684\u624b\u5f62\u5149\u6807\u3002\u5c31\u50cf\u901a\u5e38\u7528\u6237\u5c06\u5149\u6807\u79fb\u5230\u8d85\u94fe\u63a5\u4e0a\u65f6\u90a3\u6837\u3002<\/li>\nhand<\/code>\uff1a\u548cpointer<\/code>\u7684\u4f5c\u7528\u4e00\u6837\uff1a\u7ad6\u8d77\u4e00\u53ea\u624b\u6307\u7684\u624b\u5f62\u5149\u6807\u3002\u5c31\u50cf\u901a\u5e38\u7528\u6237\u5c06\u5149\u6807\u79fb\u5230\u8d85\u94fe\u63a5\u4e0a\u65f6\u90a3\u6837\u3002<\/li>\n<\/ul>\n![\"VeryCapture_20220711234406\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714855.jpg\")
<\/div>\n<\/div>\n\u6ee4\u955c<\/h2>\n
![\"image-20220711234720925\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714856.png\")
<\/div><\/p>\ndiv img.blur {filter: blur(4px);}\n<div><img class="blur" src=".\/tulip.jpg" alt="tulip"><span>blur(4px)<\/span><\/div><\/code><\/pre>\n\u5bfc\u822a\u680f\u7684\u5236\u4f5c<\/h2>\n
<!doctype html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport"\n content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">\n <meta http-equiv="X-UA-Compatible" content="ie=edge">\n <title>\u5bfc\u822a\u680f<\/title>\n <style type="text\/css">\n ul{\n list-style: none;\n width: 420px;\n height: 60px;\n background-color:mediumslateblue;\n }\n li{\n float: left;\n margin-right: 30px;\n margin-top: 16px;\n }\n a{\n text-decoration: none;\n font-size: 20px;\n color: #BBBBBB;\n font-family: \u5fae\u8f6f\u96c5\u9ed1\uff0cSimSun;\n }\n <\/style>\n<\/head>\n<body>\n <ul>\n <li><a href="">web<\/li>\n <li><a href="">pwn<\/li>\n <li><a href="">reverse<\/li>\n <li><a href="">misc<\/li>\n <li><a href="">Crypto<\/li>\n <\/ul>\n<\/body>\n<\/html><\/code><\/pre>\n![\"image-20220712000213777\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714857.png\")
<\/div>\n<\/div>\n\u80cc\u666f\u5c5e\u6027<\/h1>\n
background\u5c5e\u6027<\/h2>\n
\n
background-color<\/code><\/p>\n<\/li>\nbackground-image<\/code><\/p>\n\n
background-image: linear-gradient(\u65b9\u5411, \u8d77\u59cb\u989c\u8272, \u7ec8\u6b62\u989c\u8272);<\/code><\/pre>\n<\/li>\nto left<\/code>\u3001to right<\/code>\u3001to top<\/code>\u3001to bottom<\/code>\u3001\u89d2\u5ea630deg<\/code>\uff08\u6307\u7684\u662f\u987a\u65f6\u9488\u65b9\u541130\u00b0\uff09\u3002<\/p>\n<\/li>\nbackground-image: radial-gradient(\u8f90\u5c04\u7684\u534a\u5f84\u5927\u5c0f, \u4e2d\u5fc3\u7684\u4f4d\u7f6e, \u8d77\u59cb\u989c\u8272, \u7ec8\u6b62\u989c\u8272);<\/code><\/pre>\n<\/li>\n![\"img\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714858.png\")
<\/div>\n<\/div>\n<\/li>\n<\/ul>\n<\/li>\nbackground-repeat<\/code><\/p>\n\n
background-position<\/code><\/p>\n\n
backattachment<\/code><\/p>\n\n
background-size<\/code><\/p>\n\n
background-size:500px 500px;\nbackground-size:50% 50%;\nbackground-size:100% auto;\nbackground-size:cover;\nbackground-size:contain;<\/code><\/pre>\n<\/li>\ncover<\/code>\uff1a\u56fe\u7247\u59cb\u7ec8\u586b\u5145\u6ee1<\/strong>\u5bb9\u5668\uff0c\u4e14\u4fdd\u8bc1\u957f\u5bbd\u6bd4\u4e0d\u53d8<\/strong>\u3002\u56fe\u7247\u5982\u679c\u6709\u8d85\u51fa\u90e8\u5206\uff0c\u5219\u8d85\u51fa\u90e8\u5206\u4f1a\u88ab\u9690\u85cf\u3002<\/p>\n<\/li>\ncontain<\/code>\uff1a\u5c06\u56fe\u7247\u5b8c\u6574\u5730<\/strong>\u663e\u793a\u5728\u5bb9\u5668\u4e2d\uff0c\u4e14\u4fdd\u8bc1\u957f\u5bbd\u6bd4\u4e0d\u53d8<\/strong>\u3002\u53ef\u80fd\u4f1a\u5bfc\u81f4\u5bb9\u5668\u7684\u90e8\u5206\u533a\u57df\u7559\u767d\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\nbackground-origin<\/code><\/p>\n\n
background-origin: padding-box; \nbackground-origin: border-box;\nbackground-origin: content-box;<\/code><\/pre>\n<\/li>\n<\/ul>\n<\/li>\nbackground-clip<\/code><\/p>\n\n
border-box<\/code> \u8d85\u51fa border-box \u7684\u90e8\u5206\uff0c\u5c06\u88c1\u526a\u6389<\/li>\npadding-box<\/code> \u8d85\u51fa padding-box \u7684\u90e8\u5206\uff0c\u5c06\u88c1\u526a\u6389<\/li>\ncontent-box<\/code> \u8d85\u51fa content-box \u7684\u90e8\u5206\uff0c\u5c06\u88c1\u526a\u6389<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nbackground:red url(1.jpg) no-repeat 100px 100px fixed;<\/code><\/pre>\nbackground-color:red;\nbackground-image:url(1.jpg);\nbackground-repeat:no-repeat;\nbackground-position:100px 100px;\nbackground-attachment:fixed;<\/code><\/pre>\nbackground-color:rgb(255,0,0);\nbackground-color:rgb(0,0,0);\nbackground-color:red;\nbackground-color:rgba(255,255,0,0.3)\nRGBA \u5373\uff1aRed \u7ea2\u3001Green \u7eff\u3001Blue \u84dd\u3001Alpha \u900f\u660e\u5ea6\u3002\nR\u3001G\u3001B \u7684\u53d6\u503c\u8303\u56f4\u662f\uff1a0~255\uff1b\u900f\u660e\u5ea6\u7684\u53d6\u503c\u8303\u56f4\u662f 0~1\u3002\nbackground-color: #ff0000;\/*16\u8fdb\u5236\u8868\u793a*\/\n==>background-color:#f00;\nbackground-color:#112233;\n==>background-color:#123;\n #000 \u9ed1\n #fff \u767d\n #f00 \u7ea2\n #222 \u6df1\u7070\n #333 \u7070\n #ccc \u6d45\u7070\n\/*PS:\u53ea\u6709\u4e09\u5bf9\u6570\u5b57\u90fd\u4e00\u6837\u624d\u53ef\u4ee5\u7b80\u5199\uff0c\u4efb\u4f55\u4e00\u7ec4\u4e0d\u4e00\u6837\u90fd\u4e0d\u884c\uff01\uff01\uff01*\/<\/code><\/pre>\nbackground-color: hsla(240,50%,50%,0.4);<\/code><\/pre>\n\n
H<\/code> \u8272\u8c03\uff0c\u53d6\u503c\u8303\u56f4 0~360\u30020\u6216360\u8868\u793a\u7ea2\u8272\u3001120\u8868\u793a\u7eff\u8272\u3001240\u8868\u793a\u84dd\u8272\u3002<\/li>\nS<\/code> \u9971\u548c\u5ea6\uff0c\u53d6\u503c\u8303\u56f4 0%~100%\u3002\u503c\u8d8a\u5927\uff0c\u8d8a\u9c9c\u8273\u3002<\/li>\nL<\/code> \u4eae\u5ea6\uff0c\u53d6\u503c\u8303\u56f4 0%~100%\u3002\u4eae\u5ea6\u6700\u5927\u65f6\u4e3a\u767d\u8272\uff0c\u6700\u5c0f\u65f6\u4e3a\u9ed1\u8272\u3002<\/li>\nA<\/code> \u900f\u660e\u5ea6\uff0c\u53d6\u503c\u8303\u56f4 0~1\u3002<\/li>\n<\/ul>\n![\"img\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714859.png\")
<\/div>\n<\/div>\n\n
opacity: 0.3;<\/code> \u4f1a\u5c06\u6574\u4e2a\u76d2\u5b50\u53ca\u5b50\u76d2\u5b50\u8bbe\u7f6e\u900f\u660e\u5ea6\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u5f53\u76d2\u5b50\u8bbe\u7f6e\u534a\u900f\u660e\u7684\u65f6\u5019\uff0c\u4f1a\u5f71\u54cd\u91cc\u9762\u7684\u5b50\u76d2\u5b50\u3002<\/li>\nbackground: transparent;<\/code> \u53ef\u4ee5\u5355\u72ec\u8bbe\u7f6e\u900f\u660e\u5ea6\uff0c\u4f46\u8bbe\u7f6e\u7684\u662f\u5b8c\u5168\u900f\u660e\uff08\u4e0d\u53ef\u8c03\u8282\u900f\u660e\u5ea6\uff09\u3002<\/li>\n<\/ul>\n\u901a\u680fbanner<\/h2>\n
<img src="XXX" alt=""> <\/code><\/pre>\ndiv{\n height: 465px;\n background-image: url(http:\/\/img.smyhvae.com\/20170813_1053.jpg);\n background-position: center top;\n background-repeat: no-repeat;\n}<\/code><\/pre>\n\u540c\u65f6\u9002\u914d\u591a\u4e2a\u80cc\u666f<\/h2>\n
<!DOCTYPE html>\n<html>\n<head lang="en">\n <meta charset="UTF-8">\n <title><\/title>\n <style>\n .box {\n height: 416px;\n border: 1px solid #000;\n margin: 100px auto;\n \/* \u7ed9\u76d2\u5b50\u52a0\u591a\u4e2a\u80cc\u666f\uff0c\u6309\u7167\u80cc\u666f\u8bed\u6cd5\u683c\u5f0f\u4e66\u5199\uff0c\u591a\u4e2a\u80cc\u666f\u4f7f\u7528\u9017\u53f7\u9694\u5f00 *\/\n background: url(images\/bg1.png) no-repeat left top,\n url(images\/bg2.png) no-repeat right top,\n url(images\/bg3.png) no-repeat right bottom,\n url(images\/bg4.png) no-repeat left bottom,\n url(images\/bg5.png) no-repeat center;\n }\n <\/style>\n<\/head>\n<body>\n<div class="box"><\/div>\n<\/body>\n<\/html><\/code><\/pre>\nclip-path<\/h2>\n
clip-path<\/code>\u5c5e\u6027\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u53ea\u6709\u5143\u7d20\u7684\u90e8\u5206\u533a\u57df\u53ef\u4ee5\u663e\u793a\u7684\u526a\u5207\u533a\u57df\u3002\u533a\u57df\u5185\u7684\u90e8\u5206\u663e\u793a\uff0c\u533a\u57df\u5916\u7684\u9690\u85cf\u3002<\/p>\nclip-path<\/code>\u4e0d\u662f\u80cc\u666f\u5c5e\u6027\uff0c\u4f46\u8fd9\u4e2a\u5c5e\u6027\u975e\u5e38\u5f3a\u5927\uff0c\u4f46\u5f80\u5f80\u4f1a\u7ed3\u5408\u80cc\u666f\u5c5e\u6027\u4e00\u8d77\u4f7f\u7528\uff0c\u8fbe\u5230\u4e00\u4e9b\u6548\u679c\u3002<\/p>\nclip-path: circle(40%);<\/code><\/pre>\n![\"image-20220712141514227\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714860.png\")
<\/div>\n<\/div>\nclip-path: ellipse(130px 140px at 10% 20%);<\/code><\/pre>\n![\"image-20220712141538363\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714861.png\")
<\/div>\n<\/div>\nclip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);<\/code><\/pre>\n![\"image-20220712141601933\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714862.png\")
<\/div>\n<\/div>\nclip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');<\/code><\/pre>\n![\"image-20220712141618076\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714863.png\")
<\/div>\n<\/div>\nclip-path<\/code>\u5c5e\u6027\u7684\u597d\u5904\u662f\uff0c\u5373\u4f7f\u505a\u4e86\u4efb\u4f55\u88c1\u526a\uff0c\u5bb9\u5668\u7684\u5360\u4f4d\u5927\u5c0f\u662f\u4e0d\u53d8\u7684<\/strong>\u3002\u6bd4\u5982\u4e0a\u65b9\u4ee3\u7801\u4e2d\uff0c\u5bb9\u5668\u7684\u5360\u4f4d\u5927\u5c0f\u4e00\u76f4\u90fd\u662f 320px * 320px\u3002\u8fd9\u6837\u7684\u8bdd\uff0c\u4e5f\u65b9\u4fbf\u6211\u4eec\u505a\u4e00\u4e9b\u52a8\u753b\u6548\u679c\u3002<\/p>\n![\"img\"](\"https:\/\/pic-for-be.oss-cn-hangzhou.aliyuncs.com\/img\/202208231714864.png\")
<\/div>\n<\/div>\n<\/h1>\n","protected":false},"excerpt":{"rendered":"