{"id":9058,"date":"2019-11-10T23:41:32","date_gmt":"2019-11-10T15:41:32","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9058"},"modified":"2020-02-03T17:42:05","modified_gmt":"2020-02-03T09:42:05","slug":"css-value-type","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2019\/11\/css-value-type\/","title":{"rendered":"CSS\u503c\u7c7b\u578b\u6587\u6863\u5927\u5168"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9058\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=9058<\/a><br \/>\n\u672c\u6587\u6b22\u8fce\u5206\u4eab\u4e0e\u805a\u5408\uff0c\u5168\u6587\u8f6c\u8f7d\u5c31\u4e0d\u5fc5\u4e86\uff0c\u5c0a\u91cd\u7248\u6743\uff0c\u5708\u5b50\u5c31\u8fd9\u4e48\u5927\uff0c\u82e5\u6025\u7528\u53ef\u4ee5\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<style>.css-type-h4,.css-type-ul{font-family:consolas,\"Liberation Mono\",courier,monospace;}\n.css-type-ul[class]{columns:180px; padding:0; list-style: none; line-height:1.5;}\n.css-type-ul li{margin: 8px 0;}\narticle > dl{border-left: 2px solid #ddd;    padding-left: 10px;}\narticle dd{margin-left: 0;}<\/style>\n<p><script>window.wxShareImgUrl = 'https:\/\/www.zhangxinxu.com\/study\/image\/share\/201911-css-values-type.png';<\/script><\/p>\n<p style=\"background-color:#f4e3d7;\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201911\/cover-css-values-type.png\" width=\"484\" height=\"300\" alt=\"CSS\u5c5e\u6027\u503c\u7c7b\u578b\u5927\u5168\" class=\"aligncenter size-medium\" \/><\/p>\n<p>\u4ee5\u524d\u4ecb\u7ecd\u8fc7<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2011\/03\/css-css3-unit-units\/\">CSS\u5355\u4f4d\u5927\u5168<\/a>\uff0c\u8fd9\u91cc\u4ecb\u7ecd\u4e0bCSS\u6570\u636e\u7c7b\u578b\u5927\u5168\u3002<\/p>\n<p>CSS\u6570\u636e\u7c7b\u578b\u90fd\u662f\u7528<code>&lt;&gt;<\/code>\u62ec\u8d77\u6765\u8868\u793a\u3002<\/p>\n<p>\u672c\u6587\u7c7b\u4f3c\u53c2\u8003\u6587\u6863\uff0c\u8f9b\u82e6\u6574\u7406\uff0c\u5168\u7f51\u72ec\u5bb6\uff0c\u5efa\u8bae\u52a0\u5165\u6536\u85cf\u5939\u6216\u8005\u4e91\u7b14\u8bb0\u4e4b\u7c7b\u3002<\/p>\n<h3>\u4e00\u3001\u7d22\u5f15<\/h3>\n<p>\u6309\u7167\u9996\u5b57\u6bcd\u6392\u5e8f\u3002<\/p>\n<ul class=\"css-type-ul\">\n<li><a href=\"#angle-zxx\">&lt;angle&gt;<\/a><\/li>\n<li><a href=\"#angle-percentage-zxx\">&lt;angle-percentage&gt;<\/a><\/li>\n<li class=\"hidden\"><a href=\"#angular-color-hint-zxx\">&lt;angular-color-hint&gt;<\/a><\/li>\n<li class=\"hidden\"><a href=\"#angular-color-stop-zxx\">&lt;angular-color-stop&gt;<\/a><\/li>\n<li><a href=\"#attr-fallback-zxx\">&lt;attr-fallback&gt;<\/a><\/li>\n<li><a href=\"#attr-name-zxx\">&lt;attr-name&gt;<\/a><\/li>\n<li><a href=\"#basic-shape-zxx\">&lt;basic-shape&gt;<\/a><\/li>\n<li><a href=\"#blend-mode-zxx\">&lt;blend-mode&gt;<\/a><\/li>\n<li><a href=\"#calc-product-zxx\">&lt;calc-product&gt;<\/a><\/li>\n<li><a href=\"#calc-sum-zxx\">&lt;calc-sum&gt;<\/a><\/li>\n<li><a href=\"#calc-value-zxx\">&lt;calc-value&gt;<\/a><\/li>\n<li><a href=\"#color-zxx\">&lt;color&gt;<\/a><\/li>\n<li><a href=\"#color-stop-zxx\">&lt;color-stop&gt;<\/a><\/li>\n<li><a href=\"#color-stop-list-zxx\">&lt;color-stop-list&gt;<\/a><\/li>\n<li class=\"hidden\"><a href=\"#counter-style-zxx\">&lt;counter-style&gt;<\/a><\/li>\n<li><a href=\"#custom-ident-zxx\">&lt;custom-ident&gt;<\/a><\/li>\n<li><a href=\"#dimension-zxx\">&lt;dimension&gt;<\/a><\/li>\n<li><a href=\"#filter-function-zxx\">&lt;filter-function&gt;<\/a><\/li>\n<li><a href=\"#flex-zxx\">&lt;flex&gt;<\/a><\/li>\n<li><a href=\"#frequency-zxx\">&lt;frequency&gt;<\/a><\/li>\n<li><a href=\"#frequency-percentage-zxx\">&lt;frequency-percentage&gt;<\/a><\/li>\n<li><a href=\"#gradient-zxx\">&lt;gradient&gt;<\/a><\/li>\n<li><a href=\"#ident-zxx\">&lt;ident&gt;<\/a><\/li>\n<li><a href=\"#image-zxx\">&lt;image&gt;<\/a><\/li>\n<li><a href=\"#integer-zxx\">&lt;integer&gt;<\/a><\/li>\n<li><a href=\"#length-zxx\">&lt;length&gt;<\/a><\/li>\n<li><a href=\"#length-percentage-zxx\">&lt;length-percentage&gt;<\/a><\/li>\n<li><a href=\"#number-zxx\">&lt;number&gt;<\/a><\/li>\n<li><a href=\"#number-percentage-zxx\">&lt;number-percentage&gt;<\/a><\/li>\n<li><a href=\"#percentage-zxx\">&lt;percentage&gt;<\/a><\/li>\n<li><a href=\"#position-zxx\">&lt;position&gt;<\/a><\/li>\n<li><a href=\"#quote-zxx\">&lt;quote&gt;<\/a><\/li>\n<li><a href=\"#ratio-zxx\">&lt;ratio&gt;<\/a><\/li>\n<li><a href=\"#resolution-zxx\">&lt;resolution&gt;<\/a><\/li>\n<li><a href=\"#shape-box-zxx\">&lt;shape-box&gt;<\/a><\/li>\n<li><a href=\"#shape-radius-zxx\">&lt;shape-radius&gt;<\/a><\/li>\n<li><a href=\"#side-or-corner-zxx\">&lt;side-or-corner&gt;<\/a><\/li>\n<li><a href=\"#string-zxx\">&lt;string&gt;<\/a><\/li>\n<li><a href=\"#time-zxx\">&lt;time&gt;<\/a><\/li>\n<li><a href=\"#time-percentage-zxx\">&lt;time-percentage&gt;<\/a><\/li>\n<li><a href=\"#timing-function-zxx\">&lt;timing-function&gt;<\/a><\/li>\n<li><a href=\"#toggle-value-zxx\">&lt;toggle-value&gt;<\/a><\/li>\n<li><a href=\"#transform-function-zxx\">&lt;transform-function&gt;<\/a><\/li>\n<li><a href=\"#type-or-unit-zxx\">&lt;type-or-unit&gt;<\/a><\/li>\n<li><a href=\"#url-zxx\">&lt;url&gt;<\/a><\/li>\n<li><a href=\"#url-modifier-zxx\">&lt;url-modifier&gt;<\/a><\/li>\n<li><a href=\"#zero-zxx\">&lt;zero&gt;<\/a><\/li>\n<\/ul>\n<h3>\u4e8c\u3001\u8be6\u7ec6<\/h3>\n<h4 id=\"angle-zxx\" class=\"css-type-h4\">&lt;angle&gt;<\/h4>\n<p>\u89d2\u5ea6\u503c\u3002\u652f\u6301\u8d1f\u503c\u3002\u683c\u5f0f\u662f\u6570\u503c+\u89d2\u5ea6\u5355\u4f4d\u3002<\/p>\n<p>\u89d2\u5ea6\u5355\u4f4d\u5305\u62ec\u4e0b\u9762\u8fd94\u4e2a\uff0c\u517c\u5bb9\u6027\u90fd\u662f\u4e00\u6837\u7684IE9+\u652f\u6301\u3002<\/p>\n<dl>\n<dt><strong>deg<\/strong><\/dt>\n<dd>\u89d2\u5ea6\u3002<\/dd>\n<dd>\u6211\u4eec\u65e5\u5e38\u6240\u8bf4\u201c\u539f\u5730\u65cb\u8f6c360\u5ea6\u201d\uff0c\u8fd9\u91cc\u7684\u201c\u5ea6\u201d\u5c31\u662f<code>deg<\/code>\u3002\u4e00\u4e2a\u5b8c\u6574\u7684\u5706\u662f<code>360deg<\/code>\u3002<\/dd>\n<dt><strong>grad<\/strong><\/dt>\n<dd>\u767e\u5206\u5ea6\u3002<\/dd>\n<dd>\u767e\u5206\u5ea6\u662f\u89d2\u7684\u6d4b\u91cf\u5355\u4f4d\uff0c\u5e38\u7528\u4e8e\u5efa\u7b51\u6216\u571f\u6728\u5de5\u7a0b\u7684\u89d2\u5ea6\u6d4b\u91cf\uff0c\u975e\u76f8\u5173\u4e13\u4e1a\u4eba\u58eb\u7528\u7684\u4e0d\u591a\u3002\u4e00\u4e2a\u5b8c\u6574\u7684\u5706\u662f<code>400grad<\/code>\u3002<\/dd>\n<dt><strong>rad<\/strong><\/dt>\n<dd>\u5f27\u5ea6\u3002<\/dd>\n<dd>\u5f27\u5ea6\u662f\u4e00\u79cd\u7528\u5f27\u957f\u4e0e\u534a\u5f84\u4e4b\u6bd4\u5ea6\u91cf\u5bf9\u5e94\u5706\u5fc3\u89d2\u89d2\u5ea6\u7684\u65b9\u5f0f\u3002\u4e00\u4e2a\u5b8c\u6574\u7684\u5706\u7684\u5f27\u5ea6\u662f2\u03c0\uff0c\u56e0\u6b64\uff0c\u4e00\u4e2a\u5b8c\u6574\u7684\u5706\u7684\u5f27\u5ea6\u5927\u7ea6\u662f<code>6.2832rad<\/code>\uff0c\u800c<code>1rad<\/code>\u5219\u662f180\/\u03c0\u89d2\u5ea6\u3002<\/dd>\n<dt><strong>turn<\/strong><\/dt>\n<dd>\u5708\u6570\u3002<\/dd>\n<dd>\u4e00\u4e2a\u5b8c\u6574\u7684\u5706\u662f1\u5708\uff0c\u4e5f\u5c31\u662f<code>1turn<\/code>\u3002\u540c\u68371\/4\u5706\u5c31\u662f<code>0.25turn<\/code>\u3002<\/dd>\n<\/dl>\n<p>\u4e0b\u8868\u662f\u89d2\u5ea6\u503c\u5404\u4e2a\u5355\u4f4d\u8f6c\u6362\u793a\u610f\uff08\u53d6\u81ea<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/angle\" rel=\"noopener\" target=\"_blank\">MDN<\/a>\uff09\uff1a<\/p>\n<table border=\"0\" width=\"100%\" class=\"params_table\" cellspacing=\"1\">\n<tbody>\n<tr>\n<td><img decoding=\"async\" alt=\"Angle90.png\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201911\/Angle90.png\"><\/td>\n<td>\u76f4\u89d2\uff1a<code>90deg = 100grad = 0.25turn \u2248 1.5708rad<\/code><\/td>\n<\/tr>\n<tr>\n<td><img decoding=\"async\" alt=\"Angle180.png\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201911\/Angle180.png\"><\/td>\n<td>\u5e73\u89d2\uff1a<code>180deg = 200grad = 0.5turn \u2248 3.1416rad<\/code><\/td>\n<\/tr>\n<tr>\n<td><img decoding=\"async\" alt=\"AngleMinus90.png\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201911\/AngleMinus90.png\"><\/td>\n<td>\u76f4\u89d2\uff08\u9006\u65f6\u9488\uff09\uff1a<code>-90deg = -100grad = -0.25turn \u2248 -1.5708rad<\/code><\/td>\n<\/tr>\n<tr>\n<td><img decoding=\"async\" alt=\"Angle0.png\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201911\/Angle0.png\"><\/td>\n<td>\u6ca1\u6709\u89d2\u5ea6\uff1a<code>0 = 0deg = 0grad = 0turn = 0rad<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"angle-percentage-zxx\" class=\"css-type-h4\">&lt;angle-percentage&gt;<\/h4>\n<p>\u8868\u793aCSS\u503c\u7684\u6570\u636e\u7c7b\u578b\u53ef\u4ee5\u662f<code>&lt;angle&gt;<\/code>\u7c7b\u578b\uff0c\u4e5f\u53ef\u4ee5\u662f<code>&lt;percentage&gt;<\/code>\u7c7b\u578b\u3002<\/p>\n<p>\u5982\u679c\u662f<code>&lt;percentage&gt;<\/code>\u7c7b\u578b\uff0c\u5b9e\u9645\u4e0a\u4f1a\u89e3\u6790\u4e3a<code>&lt;angle&gt;<\/code>\u7c7b\u578b\uff0c\u56e0\u6b64\u8fd9\u79cd\u7c7b\u578b\u53ef\u4ee5\u7528\u5728<code>calc()<\/code>\u8868\u8fbe\u5f0f\u4e2d\u3002<\/p>\n<p>\u76ee\u524d\u8fd8\u6ca1\u6709\u4ec0\u4e48CSS\u5c5e\u6027\u7684\u503c\u7b26\u5408\u4e0a\u9762\u7684\u6570\u636e\u7c7b\u578b\u3002<\/p>\n<h4 id=\"angular-color-hint-zxx\" class=\"css-type-h4 hidden\">&lt;angular-color-hint&gt;<\/h4>\n<h4 id=\"angular-color-stop-zxx\" class=\"css-type-h4 hidden\">&lt;angular-color-stop&gt;<\/h4>\n<h4 id=\"attr-fallback-zxx\" class=\"css-type-h4\">&lt;attr-fallback&gt;<\/h4>\n<p>fallback\u7684\u6982\u5ff5\u5728<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=5804\">CSS\u53d8\u91cf<\/a>\u90a3\u91cc\u5c31\u6709\u6240\u4f53\u73b0\uff0c\u4f8b\u5982\u4e0b\u9762\u4ee3\u7801\u4e2d\u7684<code>#cd0000<\/code>\u5c31\u662ffallback\u515c\u5e95\u5907\u4efd\u503c\uff1a<\/p>\n<pre>.var-fallback {\r\n    background-color: var(--color-zhangxinxu, #cd0000);\r\n}<\/pre>\n<p>\u800c<code>&lt;attr-fallback&gt;<\/code>\u662f\u9488\u5bf9<code>attr()<\/code>\u8868\u8fbe\u5f0f\u800c\u8a00\u7684\u3002<\/p>\n<p>\u5927\u5bb6\u5bf9<code>attr()<\/code>\u8868\u8fbe\u5f0f\u7684\u5370\u8c61\u5e94\u8be5\u90fd\u5728<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=739\">content\u5185\u5bb9\u751f\u6210<\/a>\u65f6\u5019\uff0c\u90a3\u8fd8\u662f\u8001\u8bed\u6cd5\uff1a<\/p>\n<pre>attr( &lt;attr-name&gt; )<\/pre>\n<p>\u800c\u8fd9\u91cc\u6240\u8bf4<code>&lt;attr-fallback&gt;<\/code>\u662f<code>attr()<\/code>\u8868\u8fbe\u5f0f\u7ecf\u8fc7\u6269\u5c55\u540e\u7684\u5168\u65b0\u7684\u8bed\u6cd5\u3002<\/p>\n<pre>attr( &lt;attr-name&gt; &lt;type-or-unit&gt;? [ , &lt;attr-fallback&gt; ]? )<\/pre>\n<p>\u591a\u4e86<code>&lt;type-or-unit&gt;<\/code>\u548c<code>&lt;attr-fallback&gt;<\/code>\u8fd9\u4e24\u4e2a\u53ef\u9009\u7c7b\u578b\u3002<\/p>\n<p>\u6211\u4eec\u76f4\u63a5\u770b\u4e00\u4e2a\u4f8b\u5b50\uff0c\u4ee5\u4fbf\u5feb\u901f\u4e86\u89e3\u8fd9\u4e24\u4e2a\u53ef\u9009\u53c2\u6570\u662f\u4ec0\u4e48\u610f\u601d\u3002<\/p>\n<p>\u6211\u4eec\u8981\u5b9e\u73b0\u8fd9\u6837\u4e00\u4e2a\u529f\u80fd\uff0c\u5143\u7d20\u7684\u5bbd\u5ea6\u662f\u6839\u636e\u8bbe\u7f6e\u7684<code>size<\/code>\u5c5e\u6027\u503c\u51b3\u5b9a\u7684\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;button size=\"80\"&gt;\u5bbd\u5ea680px&lt;\/button&gt;\r\n&lt;button size=\"120\"&gt;\u5bbd\u5ea6120px&lt;\/button&gt;\r\n&lt;button size=\"160\"&gt;\u5bbd\u5ea6160px&lt;\/button&gt;<\/pre>\n<p>\u5219\u53ef\u4ee5\u4f7f\u7528\u4e0b\u9762\u7684CSS\u8bed\u6cd5\uff1a<\/p>\n<pre>button[size] {\r\n    width: attr(size px, auto);\r\n}<\/pre>\n<p>\u5176\u4e2d\uff0c<code>px<\/code>\u5c31\u662f<code>&lt;type-or-unit&gt;<\/code>\uff0c\u8868\u793a<code>size<\/code>\u503c\u5355\u4f4d\u662fpx\uff0c\u5982\u679c\u6ca1\u6709\u8fd9\u4e2a\u53c2\u6570\uff0c\u5219\u4ee5\u5b57\u7b26\u4e32\u663e\u793a<code>size<\/code>\u7684\u5c5e\u6027\u503c\uff1b<code>auto<\/code>\u5c31\u662f<code>&lt;attr-fallback&gt;<\/code>\u7c7b\u578b\u3002\u8868\u793a\u5982\u679c\u5143\u7d20\u6ca1\u6709\u8bbe\u7f6e<code>size<\/code>\u5c5e\u6027\u503c\uff0c\u6216\u8005\u8bbe\u7f6e\u7684<code>size<\/code>\u503c\u65e0\u6cd5\u6b63\u786e\u89e3\u6790\uff0c\u5c31\u6309\u7167<code>auto<\/code>\u6e32\u67d3\u3002<\/p>\n<p>But\uff01\u76ee\u524d\u5c1a\u672a\u6709\u6d4f\u89c8\u5668\u652f\u6301\u8be5\u8bed\u6cd5\uff0c\u9057\u61be\u3002<\/p>\n<h4 id=\"attr-name-zxx\" class=\"css-type-h4\">&lt;attr-name&gt;<\/h4>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre>.attr-name::before {\r\n  content: attr(data-zhangxinxu);\r\n}<\/pre>\n<p>\u4e0a\u9762\u7684<code>data-zhangxinxu<\/code>\u5c31\u662f<code>&lt;attr-name&gt;<\/code>\u7c7b\u578b\u3002<\/p>\n<h4 id=\"basic-shape-zxx\" class=\"css-type-h4\">&lt;basic-shape&gt;<\/h4>\n<p><code>&lt;basic-shape&gt;<\/code>\u7c7b\u578b\u7528\u5728<code>clip-path<\/code>\uff0c<code>shape-outside<\/code>\u4ee5\u53ca<code>offset-path<\/code>\u5c5e\u6027\u4e2d\uff0c\u8868\u793a\u57fa\u7840\u5f62\u72b6\u3002<\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre>clip-path: inset(22% 12% 15px 35px);\r\nclip-path: circle(6rem at 12rem 8rem);\r\nclip-path: ellipse(115px 55px at 50% 40%);\r\nclip-path: polygon(50% 20%, 90% 80%, 10% 80%);\r\nclip-path: path(evenodd, \"M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z\");<\/pre>\n<p><strong>\u5f62\u72b6\u65b9\u6cd5\u8bed\u6cd5<\/strong><\/p>\n<dl>\n<dt><strong>inset()<\/strong><\/dt>\n<dd>\n<pre>inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )<\/pre>\n<\/dd>\n<dd>\u5b9a\u4e49\u5185\u5d4c\u77e9\u5f62\u3002\u53ef\u4ee5\u6307\u5b9a\u5706\u89d2\u5927\u5c0f\uff0c\u751f\u6210\u5706\u89d2\u77e9\u5f62\u5f62\u72b6\u3002<\/dd>\n<dt><strong>circle()<\/strong><\/dt>\n<dd>\n<pre>circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )<\/pre>\n<\/dd>\n<dd>\u5b9a\u4e49\u5706\u5f62\u3002\u53ef\u4ee5\u6307\u5b9a\u5706\u7684\u534a\u5f84\u5927\u5c0f\u548c\u5706\u5fc3\u4f4d\u7f6e\u3002<\/dd>\n<dt><strong>ellipse()<\/strong><\/dt>\n<dd>\n<pre>ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )<\/pre>\n<\/dd>\n<dd>\u5b9a\u4e49\u692d\u5706\u3002\u53ef\u4ee5\u6307\u5b9a\u692d\u5706\u7684\u534a\u5f84\u5927\u5c0f\u548c\u5706\u5fc3\u4f4d\u7f6e\u3002<\/dd>\n<dt><strong>polygon()<\/strong><\/dt>\n<dd>\n<pre>polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )<\/pre>\n<\/dd>\n<dd>\u5b9a\u4e49\u591a\u8fb9\u5f62\u3002 \u53ef\u4ee5\u6307\u5b9a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8043\">\u586b\u5145\u89c4\u5219<\/a>\u662f<code>nonzero<\/code>\uff08\u9ed8\u8ba4\u503c\uff09\u8fd8\u662f<code>evenodd<\/code>\uff0c\u4ee5\u53ca\u5177\u4f53\u5f62\u72b6\u53c2\u6570\u3002<\/dd>\n<dt><strong>path()<\/strong><\/dt>\n<dd>\n<pre>path( [&lt;fill-rule&gt;,]? &lt;string&gt;)<\/pre>\n<\/dd>\n<dd>\u5b9a\u4e49\u8def\u5f84\u3002<code>&lt;fill-rule&gt;<\/code>\u8868\u793a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8043\">\u586b\u5145\u89c4\u5219<\/a>\uff0c<code>&lt;string&gt;<\/code>\u5c31\u662fSVG Path\u8def\u5f84\u4e86\uff0c\u9700\u8981\u5f15\u53f7\u3002<\/dd>\n<\/dl>\n<h4 id=\"blend-mode-zxx\" class=\"css-type-h4\">&lt;blend-mode&gt;<\/h4>\n<p><code>&lt;blend-mode&gt;<\/code>\u662f\u6df7\u5408\u6a21\u5f0f\u7c7b\u578b\uff0c\u7528\u5728<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=4819\">background-blend-mode\u8fd9mix-blend-mode<\/a>\u8fd9\u4e24\u4e2a\u6df7\u5408\u6a21\u5f0f\u5c5e\u6027\u4e0a\u3002<\/p>\n<p>\u5305\u62ec\u4e0b\u9762\u8fd9\u4e9b\u5177\u4f53\u7684\u503c\uff1a<\/p>\n<dl>\n<dt><strong>normal<\/strong><\/dt>\n<dd>\u6b63\u5e38\u5448\u73b0\uff0c\u8c01\u5728\u4e0a\u9762\u663e\u793a\u8c01\u3002<\/dd>\n<dt><strong>multiply<\/strong><\/dt>\n<dd>\u6b63\u7247\u53e0\u5e95\u3002\u6a21\u62df\u989c\u6599\u7684\u989c\u8272\u6df7\u5408\u3002\u989c\u8272\u4f1a\u53d8\u5f97\u66f4\u6697\u3002<\/dd>\n<dt><strong>screen<\/strong><\/dt>\n<dd>\u6ee4\u8272\u3002\u6a21\u62df\u81ea\u7136\u5149\u989c\u8272\u6df7\u5408\u3002\u989c\u8272\u4f1a\u53d8\u5f97\u66f4\u4eae\u4e00\u4e9b\u3002<\/dd>\n<dt><strong>overlay<\/strong><\/dt>\n<dd>\u53e0\u52a0\u3002\u5e95\u4e0b\u989c\u8272\u66f4\u6df1\u5219\u8d70multiply\u6a21\u5f0f\uff0c\u5e95\u4e0b\u989c\u8272\u66f4\u6d45\u5219\u8d70screen\u6a21\u5f0f\u3002<\/dd>\n<dt><strong>darken<\/strong><\/dt>\n<dd>\u6df1\u8272\u3002\u54ea\u4e2a\u989c\u8272\u6df1\u663e\u793a\u54ea\u4e2a\u3002<\/dd>\n<dt><strong>lighten<\/strong><\/dt>\n<dd>\u6d45\u8272\u3002\u54ea\u4e2a\u989c\u8272\u6d45\u663e\u793a\u54ea\u4e2a\u3002<\/dd>\n<dt><strong>color-dodge<\/strong><\/dt>\n<dd>\u989c\u8272\u51cf\u6de1\u3002\u6700\u7ec8\u989c\u8272\u662f\u5e95\u8272\u9664\u4ee5\u9876\u8272\u7684\u5012\u6570\u7684\u7ed3\u679c\u3002<\/dd>\n<dt><strong>color-burn<\/strong><\/dt>\n<dd>\u989c\u8272\u52a0\u6df1\u3002\u6700\u7ec8\u989c\u8272\u662f\u53cd\u8f6c\u5e95\u90e8\u989c\u8272\u3001\u5c06\u503c\u9664\u4ee5\u9876\u90e8\u989c\u8272\u5e76\u53cd\u8f6c\u8be5\u503c\u7684\u7ed3\u679c\u3002<\/dd>\n<dt><strong>hard-light<\/strong><\/dt>\n<dd>\u5f3a\u5149\u3002\u4e0a\u9762\u7684\u989c\u8272\u66f4\u6df1\u7684\u65f6\u5019\u8868\u73b0\u4e3amultiply\uff0c\u4e0a\u9762\u989c\u8272\u66f4\u6de1\u7684\u65f6\u5019\u8868\u73b0\u4e3ascreen\u3002\u8fd9\u4e2a\u503c\u548coverlay\u503c\u7c7b\u4f3c\uff0c\u53ea\u662f\u4e0a\u4e0b\u5c42\u4f5c\u7528\u6761\u4ef6\u5bf9\u6362\u4e86\u3002<\/dd>\n<dt><strong>soft-light<\/strong><\/dt>\n<dd>\u67d4\u5149\u3002\u6700\u7ec8\u7684\u989c\u8272\u7c7b\u4f3c\u4e8ehard-light\u5f3a\u5149\uff0c\u4f46\u66f4\u67d4\u548c\u3002\u6b64\u6df7\u5408\u6a21\u5f0f\u7684\u884c\u4e3a\u7c7b\u4f3c\u4e8e\u5f3a\u5149\u3002\u8fd9\u79cd\u6548\u679c\u7c7b\u4f3c\u4e8e\u5c06\u6f2b\u5c04\u7684\u805a\u5149\u706f\u7167\u5c04\u5728\u80cc\u666f\u4e0a\u3002<\/dd>\n<dt><strong>difference<\/strong><\/dt>\n<dd>\u5dee\u503c\u3002\u6700\u540e\u7684\u989c\u8272\u662f\u4ece\u8f83\u6d45\u7684\u989c\u8272\u4e2d\u51cf\u53bb\u4e24\u79cd\u989c\u8272\u4e2d\u8f83\u6df1\u7684\u989c\u8272\u7684\u7ed3\u679c\u3002\u9ed1\u8272\u5c42\u65e0\u6548\uff0c\u800c\u767d\u8272\u5c42\u53cd\u8f6c\u53e6\u4e00\u5c42\u7684\u989c\u8272\u3002<\/dd>\n<dt><strong>exclusion<\/strong><\/dt>\n<dd>\u6392\u9664\u3002\u7c7b\u4f3cdifference\uff0c\u4f46\u6bd4difference\u5bf9\u6bd4\u5ea6\u8f83\u4f4e\u3002\u4e0edifference\u4e00\u6837\uff0c\u9ed1\u8272\u5c42\u6ca1\u6709\u6548\u679c\uff0c\u800c\u767d\u8272\u5c42\u53cd\u8f6c\u53e6\u4e00\u5c42\u7684\u989c\u8272\u3002<\/dd>\n<dt><strong>hue<\/strong><\/dt>\n<dd>\u8272\u8c03\u3002\u6700\u7ec8\u989c\u8272\u5177\u6709\u9876\u90e8\u989c\u8272\u7684\u8272\u8c03\uff0c\u800c\u4f7f\u7528\u5e95\u90e8\u989c\u8272\u7684\u9971\u548c\u5ea6\u548c\u4eae\u5ea6\u3002<\/dd>\n<dt><strong>saturation<\/strong><\/dt>\n<dd>\u9971\u548c\u5ea6\u3002\u6700\u7ec8\u989c\u8272\u5177\u6709\u9876\u90e8\u989c\u8272\u7684\u9971\u548c\u5ea6\uff0c\u540c\u65f6\u4f7f\u7528\u5e95\u90e8\u989c\u8272\u7684\u8272\u8c03\u548c\u4eae\u5ea6\u3002\u7eaf\u7070\u8272\u7684\u80cc\u666f\uff0c\u6ca1\u6709\u9971\u548c\u5ea6\uff0c\u5c31\u6ca1\u6709\u6548\u679c\u3002<\/dd>\n<dt><strong>color<\/strong><\/dt>\n<dd>\u989c\u8272\u3002\u6700\u7ec8\u989c\u8272\u5177\u6709\u9876\u90e8\u989c\u8272\u7684\u8272\u8c03\u548c\u9971\u548c\u5ea6\uff0c\u800c\u4f7f\u7528\u5e95\u90e8\u989c\u8272\u7684\u4eae\u5ea6\u3002\u8be5\u6548\u679c\u4fdd\u7559\u4e86\u7070\u5ea6\uff0c\u5e76\u53ef\u7528\u4e8e\u7ed9\u524d\u666f\u7740\u8272\u3002<\/dd>\n<dt><strong>luminosity<\/strong><\/dt>\n<dd>\u4eae\u5ea6\u3002\u6700\u7ec8\u989c\u8272\u5177\u6709\u9876\u90e8\u989c\u8272\u7684\u4eae\u5ea6\uff0c\u800c\u4f7f\u7528\u5e95\u90e8\u989c\u8272\u7684\u8272\u8c03\u548c\u9971\u548c\u5ea6\u3002\u8fd9\u79cd\u6df7\u5408\u6a21\u5f0f\u76f8\u5f53\u4e8ecolor\uff0c\u4f46\u5c42\u662f\u4ea4\u6362\u7684\u3002<\/dd>\n<\/dl>\n<h4 id=\"calc-product-zxx\" class=\"css-type-h4\">&lt;calc-product&gt;<\/h4>\n<p><code>calc()<\/code>\u65b9\u6cd5\u4e2d\u4e00\u79cd\u7c7b\u578b\u3002\u4f8b\u5982\uff1a<\/p>\n<pre>.some-zxx-class {\r\n    width: calc( 100px \/ 3 + 30px * 2);\r\n}<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<ul>\n<li><code>100px \/ 3 + 30px * 2<\/code>\u6307\u7684\u5c31\u662f<code>&lt;calc-sum&gt;<\/code>\uff1b<\/li>\n<li><code>100px \/ 3<\/code>\u548c<code>30px * 2<\/code>\u5c31\u662f<code>&lt;calc-product&gt;<\/code>\uff1b<\/li>\n<li><code>100px<\/code>\uff0c<code>3<\/code>\uff0c<code>30px<\/code>\uff0c<code>2<\/code>\u5c31\u662f<code>&lt;calc-value&gt;<\/code>\u3002<\/li>\n<\/ul>\n<p>\u5b8c\u6574\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;calc()&gt;  = calc( &lt;calc-sum&gt; )\r\n&lt;min()&gt;   = min( &lt;calc-sum&gt;# )\r\n&lt;max()&gt;   = max( &lt;calc-sum&gt;# )\r\n&lt;clamp()&gt; = clamp( &lt;calc-sum&gt;#{3} )\r\n&lt;calc-sum&gt; = &lt;calc-product&gt; [ [ '+' | '-' ] &lt;calc-product&gt; ]*\r\n&lt;calc-product&gt; = &lt;calc-value&gt; [ [ '*' | '\/' ] &lt;calc-value&gt; ]*\r\n&lt;calc-value&gt; = &lt;number&gt; | &lt;dimension&gt; | &lt;percentage&gt; | ( &lt;calc-sum&gt; )<\/pre>\n<h4 id=\"calc-sum-zxx\" class=\"css-type-h4\">&lt;calc-sum&gt;<\/h4>\n<p><code>calc()<\/code>\u65b9\u6cd5\u4e2d\u4e00\u79cd\u7c7b\u578b\uff0c\u8868\u793aCSS\u6570\u5b66\u8ba1\u7b97\u51fd\u6570\u5185\u7684\u6574\u4e2a\u8ba1\u7b97\u8868\u8fbe\u5f0f\u3002<\/p>\n<p>\u5177\u4f53\u53c2\u89c1<a href=\"#calc-product-zxx\">&lt;calc-product&gt;<\/a>\u3002<\/p>\n<h4 id=\"calc-value-zxx\" class=\"css-type-h4\">&lt;calc-value&gt;<\/h4>\n<p><code>calc()<\/code>\u65b9\u6cd5\u4e2d\u4e00\u79cd\u7c7b\u578b\uff0c\u8868\u793a\u8ba1\u7b97\u8868\u8fbe\u5f0f\u4e2d\u5404\u4e2a\u5177\u4f53\u7684\u8ba1\u7b97\u9879\u3002<\/p>\n<p>\u5177\u4f53\u53c2\u89c1<a href=\"#calc-product-zxx\">&lt;calc-product&gt;<\/a>\u3002<\/p>\n<h4 id=\"color-zxx\" class=\"css-type-h4\">&lt;color&gt;<\/h4>\n<p>\u8868\u793a\u8272\u503c\u7c7b\u578b\u3002\u8fd9\u4e2a\u7c7b\u578b\u503c\u4e4b\u524d\u6709\u6587\u7ae0\u4e13\u95e8\u6df1\u5165\u4ecb\u7ecd\uff1a\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2015\/07\/know-css1-css3-color\/\">CSS1-CSS3 &lt;color&gt;\u989c\u8272\u77e5\u8bc6\u77e5\u591a\u5c11\uff1f<\/a>\u201d<\/p>\n<p>\u8fd9\u91cc\u662f\u6982\u8981\uff1a<\/p>\n<dl>\n<dt><strong>\u989c\u8272\u5173\u952e\u5b57<\/strong><\/dt>\n<dd>\u4f8b\u5982<code>'red'<\/code>, <code>'blue'<\/code>\u7b49\u3002\u76ee\u524d\u5168\u90e8147\u4e2a\u989c\u8272\u5173\u952e\u5b57\u53ca\u5bf9\u5e94\u989c\u8272\u503c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=1064\">\u53c2\u89c1\u8fd9\u91cc<\/a>\u3002<\/dd>\n<dt><strong>transparent<\/strong><\/dt>\n<dd><code>transparent<\/code>\u5173\u952e\u5b57\uff0c\u4f8b\u5982\uff1a<code>color:transparent<\/code>\u3002<\/dd>\n<dt><strong>currentColor<\/strong><\/dt>\n<dd>\u989c\u8272\u53d8\u91cf\u3002\u8be6\u89c1\u201c<a href=\"http:\/\/www.zhangxinxu.com\/wordpress\/?p=4385\">currentColor-CSS3\u8d85\u9ad8\u6821\u7ea7\u597d\u7528CSS\u5173\u952e\u5b57<\/a>\u201d\u8fd9\u7bc7\u6587\u7ae0\u3002<\/dd>\n<dt><strong>RGB\u989c\u8272<\/strong><\/dt>\n<dd>\u8bed\u6cd5\u5305\u62ec\uff1a<code>#RRGGBB[AA]<\/code>\uff0c<code>#RGB[A]<\/code>\uff0c<code>rgb[a](R, G, B[, A])<\/code>\u4ee5\u53ca<code>rgb[a](R G B[ \/ A])<\/code>\uff08CSS Colors Level 4\u4e2d\u65b0\u589e\uff09\u3002<\/dd>\n<dt><strong>HSL\u989c\u8272<\/strong><\/dt>\n<dd>\u8bed\u6cd5\u5305\u62ec\uff1a<code>hsl[a](H, S, L[, A])<\/code>\uff0c\u4ee5\u53caCSS Colors Level 4\u4e2d\u65b0\u589e\u7684<code>hsl[a](H S L[ \/ A])<\/code>\u3002<\/dd>\n<dt><strong>\u7cfb\u7edf\u989c\u8272<\/strong><\/dt>\n<dd>\u7cfb\u7edf\u989c\u8272\u5173\u952e\u5b57\uff0c\u4e0d\u540c\u64cd\u4f5c\u7cfb\u7edf\u4ee5\u53ca\u4e0d\u540c\u64cd\u4f5c\u7cfb\u7edf\u4e3b\u9898\u4e0b\u7684\u5177\u4f53\u8868\u73b0\u7684\u989c\u8272\u662f\u4e0d\u4e00\u6837\u7684\uff0c\u56e0\u6b64\u4e0d\u63a8\u8350\u5728\u5bf9\u5916\u7684\u4ea7\u54c1\u4e2d\u4f7f\u7528\u3002<\/dd>\n<\/dl>\n<h4 id=\"color-stop-zxx\" class=\"css-type-h4\">&lt;color-stop&gt;<\/h4>\n<p><code>&lt;color-stop&gt;<\/code>\u5c5e\u4e8eCSS Images Module Level\u4e2d\u7684\u7c7b\u578b\u503c\uff0c\u8868\u793a\u989c\u8272\u65ad\u70b9\u3002<\/p>\n<p>\u591a\u51fa\u73b0\u5728CSS\u6e10\u53d8\u4e2d\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>.zxx-gradient {\r\n    background-image: linear-gradient(red 20%, blue 80%);\r\n}<\/pre>\n<p>\u5176\u4e2d<code>red 20%<\/code>\u4ee5\u53ca<code>blue 80%<\/code>\u5c31\u662f<code>&lt;color-stop&gt;<\/code>\u7c7b\u578b\u3002<\/p>\n<h4 id=\"color-stop-list-zxx\" class=\"css-type-h4\">&lt;color-stop-list&gt;<\/h4>\n<p><code>&lt;color-stop-list&gt;<\/code>\u8868\u793a\u591a\u4e2a<code>&lt;color-stop&gt;<\/code>\u7684\u96c6\u5408\u3002<\/p>\n<p>\u501f\u7528\u4e0a\u9762<code>&lt;color-stop&gt;<\/code>\u7684\u4f8b\u5b50\uff0c\u5176\u4e2d<code>red 20%, blue 80%<\/code>\u5c31\u5c5e\u4e8e<code>&lt;color-stop-list&gt;<\/code>\u3002<\/p>\n<h4 id=\"counter-style-zxx\" class=\"css-type-h4 hidden\">&lt;counter-style&gt;<\/h4>\n<h4 id=\"custom-ident-zxx\" class=\"css-type-h4\">&lt;custom-ident&gt;<\/h4>\n<p><code>&lt;custom-ident&gt;<\/code>\u6570\u636e\u7c7b\u578b\u8868\u793a\u7528\u6237\u5b9a\u4e49\u7684\u7528\u4f5c\u6807\u8bc6\u7b26\u7684\u4efb\u610f\u5b57\u7b26\u4e32\u3002\u5b83\u662f\u533a\u5206\u5927\u5c0f\u5199\u7684\uff0c\u5e76\u4e14\u5728\u4e0d\u540c\u7684\u4e0a\u4e0b\u6587\u4e2d\u7981\u6b62\u67d0\u4e9b\u503c\u4ee5\u9632\u6b62\u6b67\u4e49\u3002<\/p>\n<p>\u4f8b\u5982CSS animation\u52a8\u753b\u81ea\u5b9a\u4e49\u7684\u52a8\u753b\u540d\u79f0\u3002<\/p>\n<pre>.zxx-animation {\r\n    animation: fadeIn .2s;\r\n}<\/pre>\n<p>\u4e0a\u9762\u7684<code>fadeIn<\/code>\u5c31\u662f<code>&lt;custom-ident&gt;<\/code>\u6570\u636e\u7c7b\u578b\u3002<\/p>\n<p>\u7c7b\u4f3c\u7684\u8fd8\u6709CSS Counter\u8ba1\u6570\u5668\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>.zxx-counter {\r\n    counter-reset: zhangxinxuCom;\r\n}<\/pre>\n<p><strong>\u7981\u6b62\u7684\u503c<\/strong><\/p>\n<p>\u4e3a\u4e86\u9632\u6b62\u51b2\u7a81\uff0c\u5e76\u4e0d\u662f\u6240\u6709\u7684\u5b57\u7b26\u4e32\u90fd\u5c5e\u4e8e<code>&lt;custom-ident&gt;<\/code>\uff0c\u4f8b\u5982CSS\u4e2d\u7684\u5168\u5c40\u5173\u952e\u5b57\u503c<code>unset<\/code>, <code>initial<\/code>, <code>inherit<\/code>\u4ee5\u53ca<code>none<\/code>\u90fd\u662f\u4e0d\u5141\u8bb8\u7684\u3002\u8fd8\u6709<code>disc<\/code>, <code>circle<\/code>, <code>square<\/code>, <code>decimal<\/code>\u7b49<code>list-style-type<\/code>\u5173\u952e\u5b57\u503c\u4e0d\u5141\u8bb8\uff0c<code>span<\/code>\u4e5f\u4e0d\u5141\u8bb8\uff0c\u56e0\u4e3a\u4e3a\u4f55grid\u5e03\u5c40\u4e2d<code>grid-row-start<\/code>\uff0c<code>grid-row-end<\/code>\uff0c<code>grid-column-start<\/code>\uff0c<code>grid-column-end<\/code>\u7b49\u5c5e\u6027\u51b2\u7a81\u3002<\/p>\n<h4 id=\"dimension-zxx\" class=\"css-type-h4\">&lt;dimension&gt;<\/h4>\n<p><code>&lt;dimension&gt;<\/code>\u8868\u793a\u5c3a\u5bf8\u7c7b\u578b\u3002\u7531\u6570\u5b57\u548c\u5355\u4f4d\u6784\u6210\uff0c\u4f8b\u5982<code>666px<\/code>\u3002<\/p>\n<h4 id=\"filter-function-zxx\" class=\"css-type-h4\">&lt;filter-function&gt;<\/h4>\n<p><code>&lt;filter-function&gt;<\/code>\u8868\u793a\u6ee4\u955c\u51fd\u6570\uff0c\u88ab\u7528\u5728<code>filter<\/code>\uff08\u672c\u8eab\u5e94\u7528\u6ee4\u955c\uff09\u548c<code>backdrop-filter<\/code>\uff08\u672c\u8eab\u4e0d\u5e94\u7528\u6ee4\u955c\uff0c\u540e\u9762\u5143\u7d20\u5e94\u7528\uff09\u5c5e\u6027\u4e2d\u3002<\/p>\n<p>\u8be5\u7c7b\u578b\u5305\u62ec\u7684\u503c\u6709\uff1a<\/p>\n<dl>\n<dt><strong>blur()<\/strong><\/dt>\n<dd>\u6a21\u7cca\u3002<\/dd>\n<dt><strong>brightness()<\/strong><\/dt>\n<dd>\u4eae\u5ea6\u53d8\u5316\u3002<\/dd>\n<dt><strong>contrast()<\/strong><\/dt>\n<dd>\u5bf9\u6bd4\u5ea6\u53d8\u5316\u3002<\/dd>\n<dt><strong>drop-shadow()<\/strong><\/dt>\n<dd>\u6295\u5f71\u3002<\/dd>\n<dt><strong>grayscale()<\/strong><\/dt>\n<dd>\u7070\u5ea6\u3002<\/dd>\n<dt><strong>hue-rotate()<\/strong><\/dt>\n<dd>\u8272\u8c03\u65cb\u8f6c\u3002<\/dd>\n<dt><strong>invert()<\/strong><\/dt>\n<dd>\u53cd\u76f8<\/dd>\n<dt><strong>opacity()<\/strong><\/dt>\n<dd>\u900f\u660e\u5ea6\u53d8\u5316\u3002<\/dd>\n<dt><strong>saturate()<\/strong><\/dt>\n<dd>\u9971\u548c\u5ea6\u53d8\u5316\u3002<\/dd>\n<dt><strong>sepia()<\/strong><\/dt>\n<dd>\u8910\u8272\u3002<\/dd>\n<\/dl>\n<h4 id=\"flex-zxx\" class=\"css-type-h4\">&lt;flex&gt;<\/h4>\n<p><code>&lt;flex&gt;<\/code>\u6570\u636e\u7c7b\u578b\u8868\u793agrid\u5bb9\u5668\u53ef\u4f38\u7f29\u7684\u957f\u5ea6\u3002\u88ab\u7528\u5728<code>grid-template-columns<\/code>\uff0c<code>grid-template-rows<\/code>\u4ee5\u53ca\u5176\u4ed6\u76f8\u5173\u5c5e\u6027\u4e2d\u3002<\/p>\n<p>\u8be5\u7c7b\u578b\u503c\u683c\u5f0f\u56fa\u5b9a\uff0c\u6570\u5b57\u540e\u9762\u8ddf\u7740\u5355\u4f4d<code>fr<\/code>\u3002<code>fr<\/code>\u5355\u4f4d\u8868\u793a\u7f51\u683c\u5bb9\u5668\u4e2d\u5269\u4f59\u7a7a\u95f4\u7684\u4efd\u6570\u3002<\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre>1fr    <span style=\"color:green;\">\/* \u6574\u6570\u503c *\/<\/span>\r\n2.5fr  <span style=\"color:green;\">\/* \u5c0f\u6570\u503c *\/<\/span><\/pre>\n<p>\u5173\u4e8eGrid\u5e03\u5c40\uff0c\u53ef\u4ee5\u53c2\u8003\u6211\u4e4b\u524d\u5199\u7684\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2018\/11\/display-grid-css-css3\/\">\u5199\u7ed9\u81ea\u5df1\u770b\u7684display: grid\u5e03\u5c40\u6559\u7a0b<\/a>\u201d\u4e00\u6587\u3002<\/p>\n<h4 id=\"frequency-zxx\" class=\"css-type-h4\">&lt;frequency&gt;<\/h4>\n<p><code>&lt;frequency&gt;<\/code>\u7c7b\u578b\u8868\u793a\u9891\u7387\uff0c\u8ddf\u7740\u4e0b\u9762\u4e24\u79cd\u5355\u4f4d\uff1a<\/p>\n<dl>\n<dt><strong>Hz<\/strong><\/dt>\n<dd>\u8d6b\u5179\u3002\u4f8b\u5982\uff1a<code>0Hz<\/code>, <code>666Hz<\/code>, <code>23333Hz<\/code>\u3002<\/dd>\n<dt><strong>kHz<\/strong><\/dt>\n<dd>\u5343\u8d6b\u5179\u3002\u4f8b\u5982\uff1a<code>0kHz<\/code>, <code>1.314kHz<\/code>, <code>5555kHz<\/code>\u3002<\/dd>\n<\/dl>\n<p>\u76ee\u524d\u8fd8\u6ca1\u6709\u4efb\u4f55CSS\u5c5e\u6027\u652f\u6301<code>&lt;frequency&gt;<\/code>\u7c7b\u578b\u3002<\/p>\n<h4 id=\"frequency-percentage-zxx\" class=\"css-type-h4\">&lt;frequency-percentage&gt;<\/h4>\n<p><code>&lt;frequency-percentage&gt;<\/code>\u7c7b\u578b\u8868\u793a\u503c\u65e2\u53ef\u4ee5\u662f<code>&lt;frequency&gt;<\/code>\u7c7b\u578b\uff0c\u53c8\u53ef\u4ee5\u662f<code>&lt;percentage&gt;<\/code>\u7c7b\u578b\u3002<\/p>\n<p>\u591a\u7528\u5728<code>calc()<\/code>\u8ba1\u7b97\u4e2d\u3002<\/p>\n<h4 id=\"gradient-zxx\" class=\"css-type-h4\">&lt;gradient&gt;<\/h4>\n<p><code>&lt;gradient&gt;<\/code>\u8868\u793a\u6e10\u53d8\u7c7b\u578b\u3002<\/p>\n<p>\u76ee\u524d\u67094\u7c7b\u6e10\u53d8\u7c7b\u578b\u3002\u5206\u522b\u662f\uff1a<\/p>\n<dl>\n<dt><strong>\u7ebf\u6027\u6e10\u53d8<\/strong><\/dt>\n<dd>\u4f8b\u5982\uff1a<\/p>\n<pre>.linear-gradient {\r\n    background: linear-gradient(#f69d3c, #3f87a6);\r\n}<\/pre>\n<\/dd>\n<dt><strong>\u5f84\u5411\u6e10\u53d8<\/strong><\/dt>\n<dd>\u4f8b\u5982\uff1a<\/p>\n<pre>.radial-gradient {\r\n    background: radial-gradient(#f69d3c, #3f87a6);\r\n}<\/pre>\n<\/dd>\n<dt><strong>\u91cd\u590d\u6e10\u53d8<\/strong><\/dt>\n<dd>\u4f8b\u5982\uff1a<\/p>\n<pre>.repeating-linear-gradient {\r\n    background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);\r\n}<\/pre>\n<pre>.repeating-radial-gradient {\r\n    background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);\r\n}<\/pre>\n<\/dd>\n<dt><strong>\u9525\u5f62\u6e10\u53d8<\/strong><\/dt>\n<dd>\u4f8b\u5982\uff1a<\/p>\n<pre>.linear-gradient {\r\n    background: conic-gradient(#f69d3c, #3f87a6);\r\n}<\/pre>\n<\/dd>\n<\/dl>\n<h4 id=\"ident-zxx\" class=\"css-type-h4\">&lt;ident&gt;<\/h4>\n<p><code>&lt;ident&gt;<\/code>\u662f\u6587\u672c\u6570\u636e\u7c7b\u578b\u4e2dCSS\u6807\u8bc6\u7b26\uff0c\u7531\u4e00\u7cfb\u5217\u7b26\u5408&lt;ident token&gt;\u8bed\u6cd5\u7684\u5b57\u7b26\u7ec4\u6210\u3002CSS\u5c5e\u6027\u63a5\u53d7\u4e24\u7c7b\u6807\u8bc6\u7b26\uff1a\u9884\u5b9a\u4e49\u7684\u5173\u952e\u5b57\u548c\u4f5c\u8005\u5b9a\u4e49\u7684\u6807\u8bc6\u7b26\u3002<\/p>\n<p>\u6ce8\u610f\uff1a<code>&lt;ident&gt;<\/code>\u4e0d\u9002\u7528\u4e8e\u5c5e\u6027\u503c\u5b9a\u4e49\uff0c\u5e94\u4f7f\u7528<code>&lt;custom ident&gt;<\/code>\u3002<code>&lt;ident&gt;<\/code>\u4e3a\u5b9a\u4e49\u5176\u4ed6\u53e5\u6cd5\u7ed3\u6784\u63d0\u4f9b\u4e86\u4fbf\u5229\u3002<\/p>\n<p>\u76ee\u524d\u6ca1\u6709CSS\u5c5e\u6027\u7b26\u5408\u8be5\u7c7b\u578b\u3002<\/p>\n<h4 id=\"image-zxx\" class=\"css-type-h4\">&lt;image&gt;<\/h4>\n<p>CSS <code>&lt;image&gt;<\/code>\u6570\u636e\u7c7b\u578b\u8868\u793a\u4e8c\u7ef4\u56fe\u50cf\u3002\u6709\u4e24\u79cd\u56fe\u50cf\uff1a\u7528<code>&lt;url&gt;<\/code>\u5f15\u7528\u7684\u666e\u901a\u56fe\u50cf\u548c\u7528<code>&lt;gradient&gt;<\/code>\u6216<code>element()<\/code>\uff08<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=1758\">\u6587\u7ae0\u4ecb\u7ecd\u70b9\u8fd9\u91cc<\/a>\uff09\u751f\u6210\u7684\u52a8\u6001\u56fe\u50cf\u3002\u9644\u52a0\u7684CSS\u56fe\u50cf\u51fd\u6570\u5305\u62ec <code>image()<\/code>\uff08\u76ee\u524d\u6ca1\u6709\u4efb\u4f55\u6d4f\u89c8\u5668\u652f\u6301\uff09, <code>image-set()<\/code>\uff08\u6839\u636e\u5c4f\u5e55\u6307\u5b9a\u4e0d\u540c\u56fe\u50cf\uff09, \u4ee5\u53ca<code>cross-fade()<\/code>\uff08<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=2671\">\u6587\u7ae0\u4ecb\u7ecd\u70b9\u8fd9\u91cc<\/a>\uff09\u3002<\/p>\n<p><code>&lt;image&gt;<\/code>\u6570\u636e\u7c7b\u578b\u53ef\u4ee5\u88ab\u591a\u79cdCSS\u5c5e\u6027\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a<code>background-image<\/code>\uff0c<code>border-image<\/code>\uff0c<code>content<\/code>\uff0c<code>cursor<\/code>\uff0c\u4ee5\u53ca<code>list-style-image<\/code>\u3002<\/p>\n<h4 id=\"integer-zxx\" class=\"css-type-h4\">&lt;integer&gt;<\/h4>\n<p><code>&lt;integer&gt;<\/code>\u8868\u793a\u6574\u6570\u6570\u503c\u7c7b\u578b\u3002\u7528\u5728<code>column-count<\/code>\uff0c<code>counter-increment<\/code>\uff0c<code>grid-column<\/code>\uff0c<code>grid-row<\/code>\u4ee5\u53ca<code>z-index<\/code>\u7b49CSS\u5c5e\u6027\u4e2d\u3002<\/p>\n<p>\u4e00\u4e9b\u65e7\u7684\u6d4f\u89c8\u5668\u6709\u6700\u5927\u503c\u9650\u5236\uff0c\u4f8b\u5982IE\u6700\u59272<sup>20<\/sup>-1\uff0c\u4e0d\u8fc7\u73b0\u5728\u65b0\u7684\u89c4\u5219\u5df2\u7ecf\u4e0d\u5728\u9650\u5b9a\u6570\u503c\u8303\u56f4\u4e86\u3002<\/p>\n<p>\u4e0b\u9762\u8fd9\u4e9b\u503c\u90fd\u662f\u6709\u6548\u7684\uff1a<\/p>\n<pre>12          \u6b63\u6570\r\n+123        \u6b63\u6570\u5e26\u52a0\u53f7\r\n-456        \u8d1f\u6570\r\n0           \u96f6\r\n+0          \u96f6\uff0c\u5e26\u52a0\u53f7\r\n-0          \u96f6\uff0c\u5e26\u8d1f\u53f7<\/pre>\n<p>\u4e0b\u9762\u8fd9\u4e9b\u503c\u90fd\u662f\u65e0\u6548\u7684\uff1a<\/p>\n<pre style=\"background-color:#f7f2f2;color:hotpink;\">12.0        &lt;number&gt;\u7c7b\u578b\uff0c\u975e&lt;integer&gt;\u7c7b\u578b\uff0c\u5c3d\u7ba1\u8868\u793a\u7684\u6570\u503c\u662f\u76f8\u7b49\u7684\u3002\r\n12.         \u5c0f\u6570\u70b9\u662f\u4e0d\u5141\u8bb8\u7684\u3002\r\n+---12      \u53ea\u5141\u8bb8\u4e00\u4e2a +\/- \u8d1f\u53f7\u3002\r\nten         \u5b57\u6bcd\u4e0d\u5141\u8bb8\u3002\r\n_5          \u4f4f\u5b57\u7b26\u4e0d\u5141\u8bb8\u3002\r\n\\35         Unicode\u8f6c\u4e49\u5b57\u7b26\u4e0d\u5141\u8bb8\uff0c\u867d\u7136\u4ee3\u8868\u7684\u5c31\u662f\u6574\u6570\uff08\u8fd9\u91cc\u662f5\uff09\u3002\r\n\\4E94       \u4e0d\u5141\u8bb8\u4f7f\u7528\u975e\u963f\u62c9\u4f2f\u6570\u5b57\uff0c\u5373\u4f7f\u8f6c\u4e49\u5f62\u5f0f\u3002\uff08\u8fd9\u91cc\u662f\u4e94\uff09\u3002\r\n3e4         \u4e0d\u5141\u8bb8\u4f7f\u7528\u79d1\u5b66\u7b26\u53f7\u3002<\/pre>\n<h4 id=\"length-zxx\" class=\"css-type-h4\">&lt;length&gt;<\/h4>\n<p><code>&lt;length&gt;<\/code>\u7c7b\u578b\u8868\u793a\u8ddd\u79bb\u503c\u3002\u8fd9\u79cd\u7c7b\u578b\u88ab\u591a\u4e2aCSS\u5c5e\u6027\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a<code>width<\/code>\uff0c<code>height<\/code>\uff0c<code>margin<\/code>\uff0c<code>padding<\/code>\uff0c<code>border-width<\/code>\uff0c<code>font-size<\/code>\uff0c<code>text-shadow<\/code>\u7b49\u3002<\/p>\n<p>\u8be5\u7c7b\u578b\u5305\u542b\u975e\u5e38\u591a\u79cd\u7c7b\u7684\u5355\u4f4d\u3002<\/p>\n<h5>\u76f8\u5bf9\u957f\u5ea6\u5355\u4f4d<\/h5>\n<p><strong><em>\u6587\u5b57\u76f8\u5173\u957f\u5ea6<\/em><\/strong><\/p>\n<dl>\n<dt><strong>cap<\/strong><sup style=\"color:#cd0000;\">\u5b9e\u9a8c<\/sup><\/dt>\n<dd>\u8868\u793a\u5143\u7d20\u5b57\u4f53\u7684\u201c\u5927\u5199\u9ad8\u5ea6\u201d\uff08\u5927\u5199\u5b57\u6bcd\u7684\u540d\u4e49\u9ad8\u5ea6\uff09\u3002<\/dd>\n<dt><strong>ch<\/strong><\/dt>\n<dd>\u5b57\u7b26<code>'0'<\/code>\uff08Unicode\u503c\u662fU+0030\uff09\u6240\u5360\u636e\u7684\u5bbd\u5ea6\u3002\u5173\u4e8e<code>ch<\/code>\u5355\u4f4d\u5b9e\u9645\u5e94\u7528\uff0c\u4e4b\u524d\u6211<span class=\"hidden\">\u5f20\u946b\u65ed www.zhangxinxu.com<\/span>\u6709<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=5503\">\u5199\u6587\u7ae0\u4ecb\u7ecd\u8fc7<\/a>\u3002<\/dd>\n<dt><strong>em<\/strong><\/dt>\n<dd>\u8868\u793a\u5143\u7d20\u7684\u8ba1\u7b97\u5b57\u4f53\u5927\u5c0f\u3002\u5982\u679c\u7528\u4e8e\u5b57\u4f53\u5927\u5c0f\u5c5e\u6027\u672c\u8eab\uff0c\u5219\u8868\u793a\u5143\u7d20\u7684\u7ee7\u627f\u5b57\u4f53\u5927\u5c0f\u3002<\/dd>\n<dt><strong>ex<\/strong><\/dt>\n<dd>\u8868\u793a\u5143\u7d20\u5f53\u524d\u7684x-height\uff0c\u4e5f\u5c31\u662f\u5b57\u6bcd<code>'x'<\/code>\u7684\u9ad8\u5ea6\u3002<\/dd>\n<dt><strong>ic<\/strong><sup style=\"color:#cd0000;\">\u5b9e\u9a8c<\/sup><\/dt>\n<dd>\u76f8\u5f53\u4e8e\u201c\u6c34\u201d\uff08CJK\u8bed\u8a00\u4f53\u7cfb\u4e2d\u6c34\uff0cU+6C34\uff09\u8fd9\u4e2a\u5b57\u5728\u5f53\u524d\u5b57\u4f53\u4e2d\u6e32\u67d3\u7684\u5c3a\u5bf8\u3002<\/dd>\n<dt><strong>lh<\/strong><sup style=\"color:#cd0000;\">\u5b9e\u9a8c<\/sup><\/dt>\n<dd>\u76f8\u5f53\u4e8e\u5f53\u524d\u5143\u7d20<code>line-height<\/code>\u5c5e\u6027\u7684\u8ba1\u7b97\u503c\uff0c\u4f1a\u8f6c\u6362\u4e3a\u7edd\u5bf9\u957f\u5ea6\u5355\u4f4d\u3002<\/dd>\n<dt><strong>rem<\/strong><\/dt>\n<dd>\u76f8\u5bf9\u4e8e\u6839\u5143\u7d20\u7684\u5b57\u4f53\u5927\u5c0f\u3002<\/dd>\n<dt><strong>rlh<\/strong><\/dt>\n<dd>\u76f8\u5bf9\u4e8e\u6839\u5143\u7d20\u7684\u884c\u9ad8\u5927\u5c0f\u3002<\/dd>\n<\/dl>\n<p><strong><em>\u89c6\u533a\u76f8\u5173\u957f\u5ea6<\/em><\/strong><\/p>\n<dl>\n<dt><strong>vh<\/strong><\/dt>\n<dd>\u6d4f\u89c8\u5668\u7a97\u53e3\u89c6\u533a1%\u7684\u9ad8\u5ea6\u3002<\/dd>\n<dt><strong>vw<\/strong><\/dt>\n<dd>\u6d4f\u89c8\u5668\u7a97\u53e3\u89c6\u533a1%\u7684\u5bbd\u5ea6\u3002<\/dd>\n<dt><strong>vi<\/strong><sup style=\"color:#cd0000;\">\u5b9e\u9a8c<\/sup><\/dt>\n<dd>\u6839\u5143\u7d20\u7684\u5185\u8054\u8f74\uff08\u9ed8\u8ba4\u6c34\u5e73\uff09\u7684\u65b9\u5411\u4e0a\u76841%\u7684\u521d\u59cb\u5305\u542b\u5757\u5927\u5c0f\u3002<\/dd>\n<dt><strong>vb<\/strong><sup style=\"color:#cd0000;\">\u5b9e\u9a8c<\/sup><\/dt>\n<dd>\u6839\u5143\u7d20\u7684\u5757\u72b6\u8f74\uff08\u9ed8\u8ba4\u5782\u76f4\uff09\u7684\u65b9\u5411\u4e0a\u76841%\u7684\u521d\u59cb\u5305\u542b\u5757\u5927\u5c0f\u3002<\/dd>\n<dt><strong>vmin<\/strong><\/dt>\n<dd>\u7b49\u4e8e<code>vh<\/code>\u548c<code>vw<\/code>\u8f83\u5c0f\u7684\u503c\u3002<\/dd>\n<dt><strong>vmax<\/strong><\/dt>\n<dd>\u7b49\u4e8e<code>vh<\/code>\u548c<code>vw<\/code>\u8f83\u5927\u7684\u503c\u3002<\/dd>\n<\/dl>\n<h5>\u7edd\u5bf9\u957f\u5ea6\u5355\u4f4d<\/h5>\n<dl>\n<dt><strong>px<\/strong><\/dt>\n<dd>\u5bf9\u4e8e\u5c4f\u5e55\u663e\u793a\uff0c1\u50cf\u7d20\u901a\u5e38\u8868\u793a\u4e00\u4e2a\u8bbe\u5907\u50cf\u7d20\uff08\u70b9\uff09\u3002\u7136\u800c\uff0c\u5bf9\u4e8e\u6253\u5370\u673a\u548c\u9ad8\u5206\u8fa8\u7387\u5c4f\u5e55\uff0c\u4e00\u4e2aCSS\u50cf\u7d20\u610f\u5473\u7740\u591a\u4e2a\u8bbe\u5907\u50cf\u7d20\u30021px=1\u82f1\u5bf8\u76841\/96\u3002<\/dd>\n<dt><strong>cm<\/strong><\/dt>\n<dd>\u5398\u7c73\u3002<code>1cm = 96px\/2.54<\/code><\/dd>\n<dt><strong>mm<\/strong><\/dt>\n<dd>\u6beb\u7c73\u3002<code>1mm = 1cm\/10<\/code><\/dd>\n<dt><strong>Q<\/strong><sup style=\"color:#cd0000;\">\u5b9e\u9a8c<\/sup><\/dt>\n<dd>1\/4\u6beb\u7c73\uff0c\u4e5f\u5c31\u662f1\/40\u5398\u7c73\u3002<\/dd>\n<dt><strong>in<\/strong><\/dt>\n<dd>\u82f1\u5bf8\u3002<code>1in = 2.54cm = 96px<\/code><\/dd>\n<dt><strong>pc<\/strong><\/dt>\n<dd>\u6d3e\u5361\u3002<code>1pc = 12pt = 1in\/6<\/code><\/dd>\n<dt><strong>pt<\/strong><\/dt>\n<dd>\u70b9\u3002<code>1pt = 1in\/72<\/code><\/dd>\n<\/dl>\n<h4 id=\"length-percentage-zxx\" class=\"css-type-h4\">&lt;length-percentage&gt;<\/h4>\n<p><code>&lt;length-percentage&gt;<\/code>\u7c7b\u578b\u8868\u793a\u65e2\u80fd\u662f\u957f\u5ea6\u503c\uff0c\u4e5f\u80fd\u662f\u767e\u5206\u6bd4\u503c\u3002<\/p>\n<p>\u4f8b\u5982\u5bbd\u5ea6width\u5c5e\u6027\uff0c\u6280\u80fd\u662f\u957f\u5ea6\u503c\uff0c\u4e5f\u80fd\u662f\u767e\u5206\u6bd4\u503c\u3002<\/p>\n<pre>.some-zxx-cl {\r\n    width: 200px;\r\n}\r\n.some-zxx-cl {\r\n    width: 20%;\r\n}<\/pre>\n<p>\u56e0\u6b64\uff0c\u4e0b\u9762\u7684<code>calc()<\/code>\u8ba1\u7b97\u4e5f\u662f\u5408\u6cd5\u7684\uff0c\u53ef\u89e3\u6790\u7684\uff1a<\/p>\n<pre>.by-\u946b\u7a7a\u95f4 {\r\n    width: calc(100% - 200px);\r\n}<\/pre>\n<h4 id=\"number-zxx\" class=\"css-type-h4\">&lt;number&gt;<\/h4>\n<p><code>&lt;number&gt;<\/code>\u7c7b\u578b\u8868\u793a\u503c\u53ef\u4ee5\u662f\u6574\u6570\u4e5f\u53ef\u4ee5\u662f\u5c0f\u6570\u3002<\/p>\n<p>\u8be5\u7c7b\u578b\u5c5e\u6027\u804c\u4e1a\u652f\u6301\u5e42\u8ba1\u7b97\u5f62\u5f0f\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>10e3        \u79d1\u5b66\u8bb0\u6570\u6cd5\r\n-3.4e-2     \u590d\u6742\u79d1\u5b66\u8bb0\u6570\u6cd5<\/pre>\n<h4 id=\"number-percentage-zxx\" class=\"css-type-h4\">&lt;number-percentage&gt;<\/h4>\n<p><code>&lt;number-percentage&gt;<\/code>\u7c7b\u578b\u8868\u793a\u503c\u65e2\u53ef\u4ee5\u662f<code>&lt;number&gt;<\/code>\u7c7b\u578b\uff0c\u53c8\u53ef\u4ee5\u662f<code>&lt;percentage&gt;<\/code>\u7c7b\u578b\u3002<\/p>\n<p>\u4f8b\u5982\u7f29\u653e\uff1a<\/p>\n<pre>.scale-zxx {\r\n    transform: scale(1.5);\r\n}\r\n.scale-zxx {\r\n    transform: scale(150%);\r\n}<\/pre>\n<p>\u5176\u4e2d\uff0cscale()\u65b9\u6cd5\u5185\u7684\u503c\u5c31\u662f<code>&lt;number-percentage&gt;<\/code>\u7c7b\u578b\uff0c<code>1.5<\/code>\u548c<code>150%<\/code>\u4f5c\u7528\u4e00\u6a21\u4e00\u6837\u3002<\/p>\n<h4 id=\"percentage-zxx\" class=\"css-type-h4\">&lt;percentage&gt;<\/h4>\n<p><code>&lt;percentage&gt;<\/code>\u662f\u767e\u5206\u6bd4\u503c\u6570\u636e\u7c7b\u578b\uff0c\u901a\u5e38\u76f8\u5bf9\u4e8e\u7236\u8f88\u5143\u7d20\u5bf9\u8c61\u8fdb\u884c\u8ba1\u7b97\u3002\u652f\u6301\u7684CSS\u5c5e\u6027\u6709\uff1a<code>width<\/code>\uff0c<code>height<\/code>\uff0c<code>margin<\/code>\uff0c<code>padding<\/code>\u4ee5\u53ca<code>font-size<\/code>\u7b49\u3002<\/p>\n<pre>.percentage-zxx {\r\n    margin-left: 23%;\r\n}<\/pre>\n<h4 id=\"position-zxx\" class=\"css-type-h4\">&lt;position&gt;<\/h4>\n<p>CSS <code>&lt;position&gt;<\/code>\u6570\u636e\u7c7b\u578b\u8868\u793a\u7528\u4e8e\u8bbe\u7f6e\u76f8\u5bf9\u4e8e\u5143\u7d20\u6846\u7684\u4f4d\u7f6e\u7684\u4e8c\u7ef4\u5750\u6807\u3002\u5e38\u7528\u4e8e<code>background-position<\/code>\u548c<code>offset-anchor<\/code>\u5c5e\u6027\u4e2d\u3002<\/p>\n<p>\u8fd9\u4e2a\u7c7b\u578b\u7684\u503c\u4e4b\u524d\u4e13\u95e8\u5199\u6587\u7ae0\u8be6\u7ec6\u4ecb\u7ecd\u8fc7\uff1a\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=4711\">CSS &lt;position&gt;\u503c\u7b80\u4ecb\u5e76\u7406\u89e3background\u767e\u5206\u6bd4\u5b9a\u4f4d<\/a>\u201d\u3002\u8fd9\u91cc\u4e0d\u8d58\u8ff0\u3002<\/p>\n<h4 id=\"quote-zxx\" class=\"css-type-h4\">&lt;quote&gt;<\/h4>\n<p><code>&lt;quote&gt;<\/code>\u7c7b\u578b\u51fa\u73b0\u5728CSS Generated Content Module\u89c4\u8303\u6587\u6863\u4e2d\u3002\u8868\u793a\u5f15\u53f7\uff0c\u5f80\u5f80\u548c\u8bed\u8a00\u76f8\u5173\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;quote&gt; = open-quote | close-quote | no-open-quote | no-close-quote<\/pre>\n<p>\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=739\">content\u5185\u5bb9\u751f\u6210\u6280\u672f\u4ee5\u53ca\u5e94\u7528<\/a>\u201d\u8fd9\u7bc7\u6587\u7ae0\u6709\u8be6\u7ec6\u4ecb\u7ecd\uff0c\u53ef\u4ee5\u793a\u610f\u4e0b\u5176\u4e2d\u5bf9\u5e94\u7684CSS\u4ee3\u7801\uff1a<\/p>\n<pre><span style=\"color:green;\">\/* \u4e3a\u4e0d\u540c\u8bed\u8a00\u6307\u5b9a\u5f15\u53f7\u7684\u8868\u73b0 *\/<\/span>\r\n:lang(en) &gt; q {quotes: '\"' '\"';}\r\n:lang(no) &gt; q {quotes: \"\u00ab\" \"\u00bb\";}\r\n:lang(ch) &gt; q {quotes: \"\u201c\" \"\u201d\";}\r\n\r\n<span style=\"color:green;\">\/* \u5728q\u6807\u7b7e\u7684\u524d\u540e\u63d2\u5165\u5f15\u53f7 *\/<\/span>\r\nq:before {content: open-quote;}\r\nq:after  {content: close-quote;}<\/pre>\n<p>\u5176\u4e2d\u51fa\u73b0\u7684<code>open-quote<\/code>\u548c<code>close-quote<\/code>\u5c31\u662f<code>&lt;quote&gt;<\/code>\u7c7b\u578b\u3002<\/p>\n<h4 id=\"ratio-zxx\" class=\"css-type-h4\">&lt;ratio&gt;<\/h4>\n<p><code>&lt;ratio&gt;<\/code>\u6570\u636e\u7c7b\u578b\u7528\u6765\u63cf\u8ff0\u5a92\u4f53\u67e5\u8be2\u4e2d\u7684\u7eb5\u6a2a\u6bd4\uff0c\u8868\u793a\u4e24\u4e2a\u65e0\u5355\u4f4d\u503c\u4e4b\u95f4\u7684\u6bd4\u4f8b\u3002<\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre><span style=\"color:green;\">\/* \u6a2a\u7eb5\u6bd4\u5927\u4e8e16:9\u7684\u65f6\u5019... *\/<\/span>\r\n@media screen and (min-aspect-ratio: 16\/9) { ... }<\/pre>\n<h4 id=\"resolution-zxx\" class=\"css-type-h4\">&lt;resolution&gt;<\/h4>\n<p><code>&lt;resolution&gt;<\/code>\u6570\u636e\u7c7b\u578b\u7528\u4e8e\u63cf\u8ff0\u5a92\u4f53\u67e5\u8be2\u4e2d\u7684\u5206\u8fa8\u7387\uff0c\u8868\u793a\u8f93\u51fa\u8bbe\u5907\u7684\u50cf\u7d20\u5bc6\u5ea6\uff0c\u5373\u5206\u8fa8\u7387\u3002<\/p>\n<p>\u652f\u6301\u4ee5\u4e0b\u8fd9\u4e9b\u5355\u4f4d\uff1a<\/p>\n<dl>\n<dt><strong>dpi<\/strong><\/dt>\n<dd>\u8868\u793a\u6bcf\u82f1\u5bf8\u70b9\u6570\u3002\u5c4f\u5e55\u901a\u5e38\u6bcf\u82f1\u5bf8\u5305\u542b72\u621696\u70b9\uff0c\u4f46\u6253\u5370\u6587\u6863\u7684dpi\u901a\u5e38\u8981\u5927\u5f97\u591a\u3002\u56e0\u4e3a1\u82f1\u5bf8\u662f2.54\u5398\u7c73\uff0c1dpi\u22480.39 dpcm\u3002IE9+\u6d4f\u89c8\u5668\u652f\u6301\u3002<\/dd>\n<dt><strong>dpcm<\/strong><\/dt>\n<dd>\u8868\u793a\u6bcf\u5398\u7c73\u7684\u70b9\u6570\u3002\u56e0\u4e3a1\u82f1\u5bf8\u662f2.54\u5398\u7c73\uff0c1dpcm\u22482.54 dpi\u3002IE9+\u6d4f\u89c8\u5668\u652f\u6301\u3002<\/dd>\n<dt><strong>dppx<\/strong><\/dt>\n<dd>\u8868\u793a\u6bcf\u50cf\u7d20\u5355\u4f4d\u7684\u70b9\u6570\u3002\u7531\u4e8eCSS in\uff08\u82f1\u5bf8\uff09\u4e0eCSS px\uff08\u50cf\u7d20\uff09\u76841:96\u56fa\u5b9a\u6bd4\u7387\uff0c1dppx\u76f8\u5f53\u4e8e96dpi\uff0c\u5bf9\u5e94\u4e8e\u7531<code>image-resolution<\/code>\u5b9a\u4e49\u7684CSS\u4e2d\u663e\u793a\u7684\u56fe\u50cf\u7684\u9ed8\u8ba4\u5206\u8fa8\u7387\u3002IE\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\uff0cEdge12+\u652f\u6301\u3002\u3002<\/dd>\n<dt><strong>x<\/strong><\/dt>\n<dd><code>dppx<\/code>\u7684\u522b\u540d\u3002<\/dd>\n<\/dl>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre><span style=\"color:green;\">\/* \u5982\u679c\u6bcf\u82f1\u5bf8\u50cf\u7d20\u70b9\u5927\u4e8e300... *\/<\/span>\r\n@media print and (min-resolution: 300dpi) { ... }<\/pre>\n<h4 id=\"shape-box-zxx\" class=\"css-type-h4\">&lt;shape-box&gt;<\/h4>\n<p><code>&lt;shape-box&gt;<\/code>\u6570\u636e\u7c7b\u578b\u6e90\u81eaCSS Shapes Module\u89c4\u8303\u6587\u6863\uff0c\u4e0eCSS shapes\u5e03\u5c40\u5bc6\u5207\u6709\u5173\uff0c\u5173\u4e8eCSS Shapes\u5e03\u5c40\uff0c\u4e0d\u5f97\u4e0d\u63d0\u6211\u7684\u8fd9\u7bc7\u6587\u7ae0\uff1a\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2019\/02\/css-css3-shapes\/\">\u5199\u7ed9\u81ea\u5df1\u770b\u7684CSS shapes\u5e03\u5c40\u6559\u7a0b<\/a>\u201d\uff0c\u5176\u4e2d\u6709\u4ecb\u7ecd\u5230<code>&lt;shape-box&gt;<\/code>\u3002<\/p>\n<p>CSS <code>shape-outside<\/code>\u5c5e\u6027\u8bed\u6cd5\u662f\u8fd9\u6837\u7684\uff1a<\/p>\n<pre>shape-outside: none | [ &lt;basic-shape&gt; || &lt;shape-box&gt; ] | &lt;image&gt;<\/pre>\n<p><code>&lt;shape-box&gt;<\/code>\uff08\u56fe\u5f62\u76d2\u5b50\uff09\u662f<code>&lt;box&gt;<\/code>\u76d2\u5b50\u5916\u52a0<code>margin-box<\/code>\uff0c\u800c<code>&lt;box&gt;<\/code>\u6570\u636e\u7c7b\u578b\u5305\u62ec<code>border-box<\/code>\uff0c<code>padding-box<\/code>\u548c<code>content-box<\/code>\u3002<\/p>\n<p>\u8fd9\u91cc\u7684<code>&lt;shape-box&gt;<\/code>\u662f\u7528\u6765\u6307\u5b9a\u6587\u5b57\u73af\u7ed5\u7684\u65f6\u5019\u662f\u4f9d\u7167\u54ea\u4e2a\u76d2\u5b50\u7684\u8fb9\u7f18\u6765\u8ba1\u7b97\u7684\u3002<\/p>\n<h4 id=\"shape-radius-zxx\" class=\"css-type-h4\">&lt;shape-radius&gt;<\/h4>\n<p>\u5728CSS Shapes\u5e03\u5c40\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u5f62\u72b6\u6307\u5b9a\u4e3a<a href=\"#basic-shape-zxx\">&lt;basic-shape&gt;<\/a>\uff0c\u5176\u4e2d\u5706\u5f62\u548c\u692d\u5706\u4e2d\u6307\u5b9a\u534a\u5f84\u7684\u53c2\u6570\u5c31\u662f<code>&lt;shape-radius&gt;<\/code>\u7c7b\u578b\uff0c\u6807\u8bb0\uff1a<\/p>\n<pre>circle() = circle( [<span style=\"color:#cd0000;\">&lt;shape-radius&gt;<\/span>]? [at &lt;position&gt;]? )\r\nellipse() = ellipse( [<span style=\"color:#cd0000;\">&lt;shape-radius&gt;{2}<\/span>]? [at &lt;position&gt;]? )<\/pre>\n<p><code>&lt;shape-radius&gt;<\/code>\u7c7b\u578b\u672c\u8eab\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side<\/pre>\n<h4 id=\"side-or-corner-zxx\" class=\"css-type-h4\">&lt;side-or-corner&gt;<\/h4>\n<p><code>&lt;side-or-corner&gt;<\/code>\u8868\u793a\u8fb9\u89d2\u7c7b\u578b\uff0c\u4e3b\u8981\u7528\u5728\u7ebf\u6027\u6e10\u53d8\u4e2d\u3002<\/p>\n<p>\u8bed\u6cd5\u4e3a\uff1a<\/p>\n<pre>&lt;side-or-corner&gt; = [left | right] || [top | bottom]<\/pre>\n<p>\u8fd8\u53ef\u4ee5\u4f7f\u7528to\u5173\u952e\u5b57\u6307\u5b9a\u65b9\u5411\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>.zxx-gradient {\r\n    background: linear-gradient(to right, deepskyblue, skyblue);\r\n}<\/pre>\n<h4 id=\"string-zxx\" class=\"css-type-h4\">&lt;string&gt;<\/h4>\n<p>CSS <code>&lt;string&gt;<\/code>\u7c7b\u578b\u8868\u793a\u4e00\u7cfb\u5217\u7684\u5b57\u7b26\uff0c\u5b57\u7b26\u6570\u636e\u7c7b\u578b\u5728\u591a\u4e2aCSS\u5c5e\u6027\u4e2d\u5e94\u7528\uff0c\u5982<code>content<\/code>\uff0c<code>font-family<\/code>\u4ee5\u53ca<code>quotes<\/code>\u7b49\u3002<\/p>\n<p>\u793a\u610f\uff1a<\/p>\n<pre>.by-author::before {\r\n   content: '\u5982\u679c\u53d1\u73b0\u672c\u6587\u76d7\u7528\uff0c\u6b22\u8fce\u53cd\u9988\u7ed9zhangxinxu';\r\n}<\/pre>\n<pre>.some-font {\r\n   font-family: 'Microsoft Yahei';\r\n}<\/pre>\n<h4 id=\"time-zxx\" class=\"css-type-h4\">&lt;time&gt;<\/h4>\n<p><code>&lt;time&gt;<\/code>\u662f\u65f6\u95f4\u6570\u636e\u7c7b\u578b\uff0c\u591a\u7528\u5728<code>animation<\/code>\uff0c<code>transition<\/code>\u4ee5\u53ca\u76f8\u5173CSS\u5c5e\u6027\u4e2d\u3002<\/p>\n<p>\u652f\u6301\u4e24\u4e2a\u5355\u4f4d\uff0c\u5982\u4e0b\uff1a<\/p>\n<dl>\n<dt><strong>s<\/strong><\/dt>\n<dd>\u79d2\u3002<\/dd>\n<dt><strong>ms<\/strong><\/dt>\n<dd>\u6beb\u79d2\u30021\u79d2=1000\u6beb\u79d2\u3002<\/dd>\n<\/dl>\n<h4 id=\"time-percentage-zxx\" class=\"css-type-h4\">&lt;time-percentage&gt;<\/h4>\n<p><code>&lt;time-percentage&gt;<\/code>\u6570\u636e\u7c7b\u578b\uff0c\u8868\u793a\u503c\u662f<code>&lt;time&gt;<\/code>\u7c7b\u578b\u6216\u8005<code>&lt;percentage&gt;<\/code>\u7c7b\u578b\u3002<\/p>\n<h4 id=\"timing-function-zxx\" class=\"css-type-h4\">&lt;timing-function&gt;<\/h4>\n<p><code>&lt;timing-function&gt;<\/code>\u6307\u65f6\u95f4\u51fd\u6570\u7c7b\u578b\uff0c\u76ee\u524d\u5e94\u7528\u5c31\u662f\u5728CSS animation\u52a8\u753b\u4e2d\u7684\u8d1d\u65af\u5c14\u51fd\u6570\u66f2\u7ebf\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>.timing-function {\r\n    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);\r\n}<\/pre>\n<h4 id=\"toggle-value-zxx\" class=\"css-type-h4\">&lt;toggle-value&gt;<\/h4>\n<p><code>&lt;toggle-value&gt;<\/code>\u6570\u636e\u7c7b\u578b\u8868\u793a\u5207\u6362\u6570\u636e\u7c7b\u578b\uff0c\u7528\u5728<code>toggle()<\/code>\u51fd\u6570\u4e2d\uff08\u76ee\u524d\u8fd8\u6ca1\u6709\u6d4f\u89c8\u5668\u652f\u6301\uff09\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>toggle( <toggle-value># )<\/pre>\n<p><strong>\u5173\u4e8etoggle()\u51fd\u6570<\/strong><\/p>\n<p>\u8fd9\u91cc\u591a\u5634\u4e3e\u4e24\u4e2a\u4f8b\u5b50\u4ecb\u7ecd\u4e0b\u8fd9\u4e2a\u672a\u6765\u5f88\u53ef\u80fd\u51fa\u73b0\u7684\u65b0\u51fd\u6570\u3002<\/p>\n<p>\u4e0b\u9762\u7684\u793a\u4f8b\u901a\u5e38\u4f7f&lt;em&gt;\u5143\u7d20\u53d8\u4e3a\u659c\u4f53\uff0c\u4f46\u5982\u679c\u5143\u7d20\u4f4d\u4e8e\u659c\u4f53\u5185\u5bb9\u4e2d\uff0c\u5219\u4f7f\u5b83\u4eec\u53d8\u4e3a\u6b63\u5e38\u6837\u5f0f\uff1a<\/p>\n<pre>em { font-style: toggle(italic, normal); }<\/pre>\n<p>\u4e0b\u9762\u7684\u793a\u4f8b\u5faa\u73af\u5d4c\u5957\u5217\u8868\u7684\u6807\u8bb0\uff0c\u4ee5\u4fbf\u6700\u5916\u5c42\u5217\u8868\u5177\u6709\u5706\u76d8\u6807\u8bb0\uff0c\u4f46\u5d4c\u5957\u5217\u8868\u4f7f\u7528\u5706\u5f62\u3001\u65b9\u5f62\u3001\u957f\u65b9\u4f53\uff0c\u7136\u540e\u5728\u6807\u8bb0\u5f62\u72b6\u5217\u8868\u4e2d\u91cd\u590d\u6b64\u64cd\u4f5c\uff0c\u518d\u6b21\u4f7f\u7528disc\u5f00\u59cb\uff08\u5bf9\u4e8e\u7b2c\u4e94\u4e2a\u5217\u8868\u6df1\u5ea6\uff09\u3002<\/p>\n<pre>ul { list-style-type: toggle(disc, circle, square, box); }<\/pre>\n<h4 id=\"transform-function-zxx\" class=\"css-type-h4\">&lt;transform-function&gt;<\/h4>\n<p><code>&lt;transform-function&gt;<\/code>\u8868\u793a\u8868\u793a\u5f71\u54cd\u5143\u7d20\u5916\u89c2\u7684\u8f6c\u6362\u7684\u6570\u636e\u7c7b\u578b\uff0c\u4f8b\u5982\u65cb\u8f6c\uff0c\u7f29\u653e\uff0c\u79fb\u52a8\u7b49\uff0c\u7528\u5728<code>transform<\/code>\u5c5e\u6027\u4e2d\u3002<\/p>\n<p>transform\u53d8\u6362\u7684\u5e95\u5c42\u90fd\u662f\u77e9\u9635\u8ba1\u7b97\uff0c\u652f\u6301\u7684<code>&lt;transform-function&gt;<\/code>\u503c\u5305\u62ec\u4e0b\u9762\u8fd9\u4e9b\uff1a<\/p>\n<h5>\u77e9\u9635\u53d8\u6362<\/h5>\n<dl>\n<dt><strong>matrix()<\/strong><\/dt>\n<dd>2D\u77e9\u9635\u53d8\u6362\u3002<\/dd>\n<dt><strong>matrix3d()<\/strong><\/dt>\n<dd>3D\u77e9\u9635\u53d8\u6362\u3002<\/dd>\n<\/dl>\n<h5>\u900f\u89c6<\/h5>\n<dl>\n<dt><strong>perspective()<\/strong><\/dt>\n<dd>\u8bbe\u7f6e\u7528\u6237\u4e0ez=0\u5e73\u9762\u4e4b\u95f4\u7684\u8ddd\u79bb\u3002<\/dd>\n<\/dl>\n<h5>\u65cb\u8f6c<\/h5>\n<dl>\n<dt><strong>rotate()<\/strong><\/dt>\n<dd>\u56f4\u7ed5\u67d0\u4e00\u4e2a\u70b9\u8fdb\u884c2d\u65cb\u8f6c\u3002<\/dd>\n<dt><strong>rotate3d()<\/strong><\/dt>\n<dd>\u4e3a\u4e86\u67d0\u4e00\u4e2a\u70b9\u76843d\u7a7a\u95f4\u65cb\u8f6c\u3002<\/dd>\n<dt><strong>rotateX()<\/strong><\/dt>\n<dd>\u6c34\u5e73\u8f74\u65cb\u8f6c\u3002<\/dd>\n<dt><strong>rotateY()<\/strong><\/dt>\n<dd>\u5782\u76f4\u8f74\u65cb\u8f6c\u3002<\/dd>\n<dt><strong>rotateZ()<\/strong><\/dt>\n<dd>Z\u8f74\u65cb\u8f6c\u3002<\/dd>\n<\/dl>\n<h5>\u7f29\u653e<\/h5>\n<dl>\n<dt><strong>scale()<\/strong><\/dt>\n<dd>2d\u7f29\u653e\u3002<\/dd>\n<dt><strong>scale3d()<\/strong><\/dt>\n<dd>3d\u7f29\u653e\u3002<\/dd>\n<dt><strong>scaleX()<\/strong><\/dt>\n<dd>\u6c34\u5e73\u8f74\u7f29\u653e\u3002<\/dd>\n<dt><strong>scaleY()<\/strong><\/dt>\n<dd>\u5782\u76f4\u5219\u7f29\u653e\u3002<\/dd>\n<dt><strong>scaleZ()<\/strong><\/dt>\n<dd>Z\u8f74\u7f29\u653e\u3002<\/dd>\n<\/dl>\n<h5>\u503e\u659c<\/h5>\n<dl>\n<dt><strong>skew()<\/strong><\/dt>\n<dd>\u5728\u4e8c\u7ef4\u5e73\u9762\u4e0a\u503e\u659c\u5143\u7d20\u3002<\/dd>\n<dt><strong>skewX()<\/strong><\/dt>\n<dd>\u6c34\u5e73\u65b9\u5411\u503e\u659c\u3002<\/dd>\n<dt><strong>skewY()<\/strong><\/dt>\n<dd>\u5782\u76f4\u65b9\u5411\u503e\u659c\u3002<\/dd>\n<\/dl>\n<h5>\u4f4d\u79fb<\/h5>\n<dl>\n<dt><strong>translate()<\/strong><\/dt>\n<dd>2d\u4f4d\u79fb\u3002<\/dd>\n<dt><strong>translate3d()<\/strong><\/dt>\n<dd>3d\u4f4d\u79fb\u3002<\/dd>\n<dt><strong>translateX()<\/strong><\/dt>\n<dd>\u6c34\u5e73\u8f74\u4f4d\u79fb\u3002<\/dd>\n<dt><strong>translateY()<\/strong><\/dt>\n<dd>\u5782\u76f4\u5219\u4f4d\u79fb\u3002<\/dd>\n<dt><strong>translateZ()<\/strong><\/dt>\n<dd>Z\u8f74\u4f4d\u79fb\u3002<\/dd>\n<\/dl>\n<h4 id=\"type-or-unit-zxx\" class=\"css-type-h4\">&lt;type-or-unit&gt;<\/h4>\n<p><code>&lt;type-or-unit&gt;<\/code>\u8868\u793a\u7c7b\u578b\u6216\u8005\u5355\u4f4d\uff0c\u7528\u5728CSS <code>attr()<\/code>\u51fd\u6570\u65b9\u6cd5\u4e2d\u3002<\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;stock&gt;\r\n  &lt;wood length=\"12\"\/&gt;\r\n  &lt;wood length=\"5\"\/&gt;\r\n  &lt;metal length=\"19\"\/&gt;\r\n  &lt;wood length=\"4\"\/&gt;\r\n&lt;\/stock&gt;\r\n\r\nstock &gt; * {\r\n    display: block;\r\n    width: <span style=\"color:#cd0000;\">attr(length em)<\/span>; <span style=\"color:green;\">\/* \u9ed8\u8ba4\u662f0 *\/<\/span>\r\n    height: 1em;\r\n    border: solid thin;\r\n    margin: 0.5em;\r\n}<\/pre>\n<p>\u5176\u4e2d<code>em<\/code>\u5c31\u5c5e\u4e8e<code>&lt;type-or-unit&gt;<\/code>\u7c7b\u578b\uff0c\u7528\u7684\u662funit\u7c7b\u578b\u3002<\/p>\n<p>\u53c8\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;span class=\"attr-as-color\" data-color=\"#34538b\"&gt;color\u5c5e\u6027\u8d4b\u8272&lt;\/span&gt;\r\n\r\n.attr-as-color {\r\n    color: attr(data-color color);\r\n}<\/pre>\n<p>\u6b64\u65f6\uff0c<code>attr()<\/code>\u65b9\u6cd5\u4e2d\u7684<code>color<\/code>\u5c31\u662f<code>&lt;type-or-unit&gt;<\/code>\u7c7b\u578b\uff0c\u7528\u7684\u662ftype\u7c7b\u578b\u3002<\/p>\n<p><code>&lt;type-or-unit&gt;<\/code>\u652f\u6301\u7684\u5b8c\u6210\u7c7b\u578b\u5982\u4e0b\uff1a<\/p>\n<dl>\n<dt><strong>string<\/strong><\/dt>\n<dd>\u5c5e\u6027\u503c\u4f5c\u4e3a\u5b57\u7b26\u4e32\u3002<\/dd>\n<dt><strong>color<\/strong><\/dt>\n<dd>\u5c5e\u6027\u503c\u4f5c\u4e3a\u8272\u503c\u7c7b\u578b\u3002<\/dd>\n<dt><strong>url<\/strong><\/dt>\n<dd>\u5c5e\u6027\u503c\u4f5c\u4e3aURL\u5730\u5740\uff0c\u53ef\u4ee5\u7528\u5728<code>url()<\/code>\u65b9\u6cd5\u4e2d\u3002<\/dd>\n<dt><strong>interger<\/strong><\/dt>\n<dd>\u5c5e\u6027\u503c\u4f5c\u4e3a\u6574\u6570\u3002<\/p>\n<pre>.example {\r\n    z-index: attr(data-z-index interger);\r\n}<\/pre>\n<\/dd>\n<dt><strong>number<\/strong><\/dt>\n<dd>\u5c5e\u6027\u503c\u4f5c\u4e3a\u6570\u503c\u3002<\/dd>\n<dt><strong>length, angle, time, frequency<\/strong><\/dt>\n<dd>\u4f5c\u4e3a\u957f\u5ea6\u503c\uff0c\u89d2\u5ea6\u503c\uff0c\u65f6\u95f4\u6216\u8005\u9891\u7387\u3002<\/dd>\n<dt><strong>%<\/strong><\/dt>\n<dd><\/dd>\n<dt><strong>\u5355\u4f4d\u5173\u952e\u5b57<\/strong><\/dt>\n<p><code>&lt;length&gt;<\/code>\uff0c<code> &lt;angle&gt;<\/code>\uff0c<code>&lt;time&gt;<\/code>\uff0c\u548c<code>&lt;frequency&gt;<\/code>\u5355\u4f4d\u4e2d\u4efb\u610f\u5339\u914d\u7684\u4e00\u4e2a\u5173\u952e\u5b57\uff0c\u4f8b\u5982<code>deg<\/code>, <code>em<\/code>, <code>ms<\/code>\u7b49\u3002\n<\/dl>\n<h4 id=\"url-zxx\" class=\"css-type-h4\">&lt;url&gt;<\/h4>\n<p><code>&lt;url&gt;<\/code>\u6307\u7684\u662f\u5916\u90e8\u8d44\u6e90\u5f15\u7528\u6570\u636e\u7c7b\u578b\uff0c\u5e38\u7528\u5728<code>background-image<\/code>\uff0c<code>cursor<\/code>\u4ee5\u53ca<code>list-style<\/code>\u7b49CSS\u5c5e\u6027\u4ee5\u53ca<code>@font-face<\/code>\u7b49CSS\u89c4\u5219\u4e2d\u3002<\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre>header {\r\n    background: url(zxx-banner.png) no-repeat top;\r\n}<\/pre>\n<pre>ul {\r\n  list-style: square url(https:\/\/www.example.com\/zxx-ball.png);\r\n}<\/pre>\n<h4 id=\"url-modifier-zxx\" class=\"css-type-h4\">&lt;url-modifier&gt;<\/h4>\n<p><code>&lt;url-modifier&gt;<\/code>\u8868\u793aURL\u4fee\u9970\u7b26\u6570\u636e\u7c7b\u578b\u3002<\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre>header {\r\n    background: url(zxx-banner.png xxx) no-repeat top;\r\n}<\/pre>\n<p>\u540e\u9762\u7684<code>xxx<\/code>\u5c31\u662fURL\u4fee\u9970\u7b26\uff0c\u4e0d\u8fc7\u6211\u67e5\u4e86\u76ee\u524d\u6240\u6709\u7684\u6a21\u5757\u89c4\u8303\u6587\u6863\uff0c\u5bf9\u4e86\u8fd9\u4e2aURL\u4fee\u9970\u7b26\u5e76\u6ca1\u6709\u5b9a\u4e49\u3002<\/p>\n<blockquote><p>This specification does not define any &lt;url-modifier&gt;s, but other specs may do so.<\/p><\/blockquote>\n<p>\u89c4\u5219\u5404\u81ea\u4e3a\u653f\u6709\u65f6\u5019\u4e5f\u6709\u4e0d\u597d\u7684\u5730\u65b9\u3002<\/p>\n<h4 id=\"zero-zxx\" class=\"css-type-h4\">&lt;zero&gt;<\/h4>\n<p><code>&lt;zero&gt;<\/code>\u6570\u636e\u7c7b\u578b\u8868\u793a<code>0<\/code>\uff0c\u5c31\u662f\u5982\u5b57\u9762\u770b\u5230\u7684\u663e\u793a\u7684\u503c\u662f0\u7684\u6570\u5b57\u3002\u4ec5\u8ba1\u7b97\u4e3a\u503c\u4e3a0\u7684<code>&lt;number&gt;<\/code>\u7684\u8868\u8fbe\u5f0f\uff08\u4f8b\u5982<code>calc(0)<\/code>\uff09\u4e0e<code>&lt;zero&gt;<\/code>\u4e0d\u5339\u914d\uff1b\u53ea\u6709<code>&lt;number-token&gt;<\/code>\u624d\u5339\u914d\u3002<\/p>\n<h3>\u4e09\u3001\u7ed3\u8bed<\/h3>\n<p>\u8fd8\u6709\u4e0d\u5c11\u9057\u6f0f\uff0c\u6b22\u8fce\u8865\u5145\u3002<\/p>\n<p>\u672c\u6587\u5bf9\u4e8e\u7406\u89e3\u65b0\u7684CSS\u4e16\u754c\u4f53\u7cfb\u975e\u5e38\u91cd\u8981\uff0c\u4e92\u76f8\u63ba\u6742\u4ea4\u7ec7\u4e0e\u878d\u5408\uff0c\u5426\u5219\u4ee5\u540e\u65b0CSS\u7279\u6027\u51fa\u6765\u5c31\u66f4\u96be\u7406\u89e3\u4e0e\u8bb0\u5fc6\u4e86\u3002<\/p>\n<p>\u611f\u8c22\u9605\u8bfb\uff0c\u6b22\u8fce\u5206\u4eab\uff0c\u6b22\u8fce\u6536\u85cf\uff01<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/emoji\/1f60f.svg\" width=\"20\" height=\"20\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u6b22\u8fce\u5206\u4eab\uff0c\u52ff\u5168\u6587\u8f6c\u8f7d\uff0c\u5982\u679c\u5185\u5bb9\u4f60\u5b9e\u5728\u559c\u6b22\uff0c\u53ef\u4ee5\u52a0\u5165\u6536\u85cf\u5939\uff0c\u6c38\u4e0d\u8fc7\u671f\uff0c\u800c\u4e14\u8fd8\u4f1a\u53ca\u65f6\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u9519\u8bef\uff0c\u9605\u8bfb\u4f53\u9a8c\u4e5f\u66f4\u597d\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=9058\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=9058<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201911\/cover-css-values-type.png\" width=\"161\" height=\"100\" alt=\"CSS\u5c5e\u6027\u503c\u7c7b\u578b\u5927\u5168\" class=\"alignright size-medium\" \/><\/p>\n<p>\u7206\u809d\u6574\u7406\u4e86\u5168\u90e8\u8fd150\u4e2aCSS data type \u6570\u636e\u7c7b\u578b\uff0c\u8fd9\u4e9b\u57fa\u7840\u7684\u6982\u5ff5\u5bf9\u4e8e\u7406\u89e3\u65b0\u7684CSS\u4e16\u754c\u4f53\u7cfb\u975e\u5e38\u91cd\u8981\uff0c\u72ec\u4e00\u65e0\u4e8c\u7684\u6587\u6863\u6574\u7406\uff0c\u5305\u542b\u5927\u91cf\u6709\u7528\u7684CSS\u77e5\u8bc6\u70b9\uff0c\u5e0c\u671b\u53ef\u4ee5\u5bf9\u60a8\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1518,1168,1509,1513,1512,1510,1511,1515,1514,1516,1517,446,751],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9058"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=9058"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/9058\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=9058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=9058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=9058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}