{"id":6256,"date":"2022-03-16T14:06:11","date_gmt":"2022-03-16T06:06:11","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=6256"},"modified":"2022-03-22T17:01:02","modified_gmt":"2022-03-22T09:01:02","slug":"css-functions-gradient","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2022\/03\/16\/css-functions-gradient\/","title":{"rendered":"\u6f38\u8b8a\u51fd\u6578 gradient()"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">linear-gradient() \u7dda\u6027\u6f38\u8b8a<\/h3>\n\n\n\n<p>\u8a2d\u5b9a2\u7a2e\u4ee5\u4e0a\u984f\u8272\u7dda\u6027\u6f38\u8b8a\u3002<br>background-image: linear-gradient(<em>a<\/em>ngle&nbsp;| to&nbsp;side-or-corner,&nbsp;color-stop1,&nbsp;color-stop2, &#8230;);<\/p>\n\n\n\n<p><strong>\u8a2d\u5b9a\u503c<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>angle<\/td><td>\u5b9a\u7fa9\u6f38\u8b8a\u65b9\u5411\u89d2\u5ea6<br>180deg (default)<br>0deg ~ 360deg<\/td><\/tr><tr><td>side-or-corner<\/td><td>\u5b9a\u7fa9\u6f38\u8b8a\u8d77\u9ede\u4f4d\u7f6e<br>horizontal side :<br>left<br>right<br>vertical side :<br>top <br>bottom<\/td><\/tr><tr><td>color-stop1, color-stop2,&#8230;<\/td><td>\u5b9a\u7fa9\u6f38\u8b8a\u9577\u5ea6<br>0%~100% <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u57fa\u672c\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: conic-gradient(red, yellow, green);\n}\n\n\/* css\u7bc4\u4f8b-3\u7a2e\u984f\u8272\u4ee5\u4e0a\u6f38\u8b8a\u8a2d\u5b9a *\/\n#grad {\n  background-image: conic-gradient(red, yellow, green, blue, black);\n}\n\n\/* css\u7bc4\u4f8b-\u642d\u914d\u65b9\u5411\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: linear-gradient(to bottom right, red , blue);\n}\n\n\/* css\u7bc4\u4f8b-\u642d\u914d\u89d2\u5ea6\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: linear-gradient(180deg, red, blue);\n}\n\n\/* css\u7bc4\u4f8b-\u591a\u8272\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);\n}\n\n\/* css\u7bc4\u4f8b-\u900f\u660e\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">repeating-linear-gradient() \u91cd\u8907\u7dda\u6027\u6f38\u8b8a<\/h3>\n\n\n\n<p>\u8a2d\u5b9a2\u7a2e\u4ee5\u4e0a\u984f\u8272\u91cd\u8907\u7dda\u6027\u6f38\u8b8a\u3002<br>background-image: repeating-linear-gradient(<em>a<\/em>ngle&nbsp;| to&nbsp;side-or-corner,&nbsp;color-stop1,&nbsp;color-stop2, &#8230;);<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u57fa\u672c\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);\n}\n\n\/* css\u7bc4\u4f8b-\u4e0d\u540c\u89d2\u5ea6\u6f38\u8b8a\u8a2d\u5b9a *\/\n#grad1 {\n  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);\n}\n\n#grad2 {\n  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);\n}\n\n#grad3 {\n  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">radial-gradient() \u5f91\u5411\u6f38\u8b8a<\/h3>\n\n\n\n<p>\u8a2d\u5b9a2\u7a2e\u4ee5\u4e0a\u984f\u8272\u5f91\u5411\u6f38\u8b8a\u3002<br>background-image: radial-gradient(shape size&nbsp;at&nbsp;position, start-color, &#8230;, last-color);<\/p>\n\n\n\n<p><strong>\u8a2d\u5b9a\u503c<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>shape<\/td><td>\u5b9a\u7fa9\u6f38\u8b8a\u5f62\u72c0<br>ellipse (default)<br>circle<\/td><\/tr><tr><td>size<\/td><td>\u5b9a\u7fa9\u6f38\u8b8a\u5927\u5c0f<br>farthest-corner (default)<br>closest-side<br>closest-corner<br>farthest-side<\/td><\/tr><tr><td>position<\/td><td>\u5b9a\u7fa9\u6f38\u8b8a\u4e2d\u5fc3\u4f4d\u7f6e<br>center (default)<\/td><\/tr><tr><td>start-color, &#8230; , last-color<\/td><td>\u5b9a\u7fa9\u6f38\u8b8a\u9577\u5ea6<br>0%~100% <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u57fa\u672c\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: radial-gradient(red, green, blue);\n}\n\n\/* css\u7bc4\u4f8b-\u81ea\u8a02\u9593\u8ddd\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: radial-gradient(red 5%, green 15%, blue 60%);\n}\n\n\/* css\u7bc4\u4f8b-\u5713\u5f62\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: radial-gradient(circle, red, yellow, green);\n}\n\n\/* css\u7bc4\u4f8b-\u6f38\u5c64\u4e2d\u5fc3\u4f4d\u79fb *\/\n#grad1 {\n  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);\n}\n#grad2 {\n  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);\n}\n\n\/* css\u7bc4\u4f8b-\u900f\u660e\u6f38\u5c64\u8a2d\u5b9a *\/\n.radial-gradient {\n  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">repeating-radial-gradient() \u91cd\u8907\u5f91\u5411\u6f38\u8b8a<\/h3>\n\n\n\n<p>\u8a2d\u5b9a2\u7a2e\u4ee5\u4e0a\u984f\u8272\u91cd\u8907\u5f91\u5411\u6f38\u8b8a\u3002<br>background-image: repeating-radial-gradient(<em>shape size\u00a0<\/em>at<em>\u00a0position, start-color, &#8230;, last-color<\/em>);<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u57fa\u672c\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">conic-gradient() \u5713\u9310\u6f38\u8b8a<\/h3>\n\n\n\n<p>\u8a2d\u5b9a2\u7a2e\u4ee5\u4e0a\u984f\u8272\u5713\u9310\u6f38\u8b8a\u3002<br>background-image: conic-gradient([from&nbsp;angle] [at&nbsp;position,]&nbsp;color degree, color degree, &#8230;);<\/p>\n\n\n\n<p><strong>\u8a2d\u5b9a\u503c<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>from&nbsp;<em>angle<\/em><\/td><td>\u5b9a\u7fa9\u5713\u9310\u6f38\u8b8a\u89d2\u5ea6<br>0deg (default)<\/td><\/tr><tr><td>at&nbsp;<em>position<\/em><\/td><td>\u5b9a\u7fa9\u5713\u9310\u6f38\u8b8a\u4e2d\u5fc3<br>center (default)<\/td><\/tr><tr><td><em>color degree, &#8230;, color degree<\/em><\/td><td>\u5b9a\u7fa9\u5713\u9310\u6f38\u8b8a\u9577\u5ea6<br>0%~100% <br>0deg~360deg<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u57fa\u672c\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: conic-gradient(red, yellow, green);\n}\n\n\/* css\u7bc4\u4f8b-3\u7a2e\u984f\u8272\u4ee5\u4e0a\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: conic-gradient(red, yellow, green, blue, black);\n}\n\n\/* css\u7bc4\u4f8b-\u642d\u914d\u89d2\u5ea6\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)\n}\n\n\/* css\u7bc4\u4f8b-\u5713\u5f62\u908a\u6846\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad1 {\n  background-color: red; \/* For browsers that do not support gradients *\/\n  background-image: conic-gradient(red, yellow, green, blue, black);\n  border-radius: 50%;\n}\n\n\/* css\u7bc4\u4f8b-\u5713\u5f62\u908a\u6846\u642d\u914d\u89d2\u5ea6\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad1 {\n  background-color: red; \/* For browsers that do not support gradients *\/\n  background-image: conic-gradient(from 90deg, red, yellow, green);\n  border-radius: 50%;\n}\n\n\/* css\u7bc4\u4f8b-\u5713\u5f62\u908a\u6846\u4e2d\u5fc3\u9ede\u4f4d\u79fb\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad1 {\n  background-color: red; \/* For browsers that do not support gradients *\/\n  background-image: conic-gradient(at 60% 45%, red, yellow, green);\n  border-radius: 50%;\n}\n\n\/* css\u7bc4\u4f8b-\u5713\u5f62\u908a\u6846\u89d2\u5ea6+\u4e2d\u5fc3\u9ede\u4f4d\u79fb\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad1 {\n  background-color: red; \/* For browsers that do not support gradients *\/\n  background-image: conic-gradient(at 60% 45%, red, yellow, green);\n  border-radius: 50%;\n}\n\n\/* css\u7bc4\u4f8b-\u5713\u5f62\u908a\u6846\u8272\u584a\u5206\u5272\u8a2d\u5b9a *\/\n#grad1 {\n  background-color: red; \/* For browsers that do not support gradients *\/\n  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);\n  border-radius: 50%;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">repeating-conic-gradient() \u91cd\u8907\u5713\u9310\u6f38\u8b8a<\/h3>\n\n\n\n<p>\u8a2d\u5b9a2\u7a2e\u4ee5\u4e0a\u984f\u8272\u91cd\u8907\u5713\u9310\u6f38\u8b8a\u3002<br>background-image: repeating-conic-gradient([from<em>&nbsp;angle<\/em>] [at&nbsp;<em>position<\/em>,]&nbsp;<em>color degree, color degree, &#8230;<\/em>);<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u57fa\u672c\u6f38\u5c64\u8a2d\u5b9a *\/\n#grad {\n  background-image: repeating-conic-gradient(red 10%, yellow 20%);\n}\n\n\/* css\u7bc4\u4f8b-\u8272\u584a\u5206\u5272\u8a2d\u5b9a *\/\n#grad {\n  background-image: repeating-conic-gradient(red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);\n}\n<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>linear-gradient() \u7dda\u6027\u6f38\u8b8a \u8a2d\u5b9a2\u7a2e\u4ee5\u4e0a\u984f\u8272\u7dda\u6027\u6f38\u8b8a\u3002background-image: l&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,53,12,4],"tags":[],"class_list":["post-6256","post","type-post","status-publish","format-standard","hentry","category-css","category-css-functions","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=6256"}],"version-history":[{"count":148,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6256\/revisions"}],"predecessor-version":[{"id":7052,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6256\/revisions\/7052"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=6256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=6256"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=6256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}