{"json_modified": "2016-06-28T06:46:56.520698", "uuid": "4bda662f-78ed-4e82-a306-281a1c3b92f1", "title": "linear-gradient", "url": "/ja/docs/Web/CSS/linear-gradient", "tags": ["CSS", "CSS3", "css3-images", "CSS Reference"], "translations": [{"uuid": "9f5aeb8c-a90b-4882-a0dc-a907b4b1866b", "title": "linear-gradient()", "url": "/en-US/docs/Web/CSS/linear-gradient", "tags": ["CSS Image", "CSS", "Reference", "Graphics", "Web", "CSS Function", "NeedsNewCompatTable", "Layout"], "summary": "The CSS <code>linear-gradient()</code> function creates an <a href=\"/en-US/docs/Web/CSS/image\" title=\"The &lt;image&gt; CSS data type represents a 2D image. There are two kinds of images in CSS: plain static images, often referenced using a URL, and dynamically-generated images like gradients or representations of parts of the tree.\"><code>&lt;image&gt;</code></a> which represents a linear gradient of colors. The result of this function is an object of the CSS <a href=\"/en-US/docs/Web/CSS/gradient\" title=\"The &lt;gradient&gt; CSS data type denotes a CSS &lt;image&gt; made of a progressive transition between two or more colors. A CSS gradient is not a CSS &lt;color&gt; but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the one of the element it applies to.\"><code>&lt;gradient&gt;</code></a> data type. Like any other gradient, a CSS linear gradient is not a CSS <a href=\"/en-US/docs/Web/CSS/color_value\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;color&gt;</code></a> but an image with <a href=\"/en-US/docs/Web/CSS/image#no_intrinsic\">no intrinsic dimensions</a>; that is, it has neither natural or preferred size, nor ratio. Its concrete size will match the size\u00a0of the element it applies to.", "localization_tags": [], "locale": "en-US", "last_edit": "2016-05-11T12:25:36", "review_tags": []}, {"uuid": "dc770f5e-cb8d-4fce-8645-aee8a0202e8e", "title": "linear-gradient", "url": "/fr/docs/Web/CSS/linear-gradient", "tags": ["CSS", "Fonction", "R\u00e9f\u00e9rence"], "summary": "Les d\u00e9grad\u00e9s lin\u00e9aires sont d\u00e9finis par un axe :\u00a0la <em>ligne du d\u00e9grad\u00e9</em>. Chaque point de cette ligne aura une couleur diff\u00e9rente. Les lignes perpendiculaires \u00e0 la ligne du d\u00e9grad\u00e9 ont chacune une couleur qui est celle du point se situant sur la ligne du d\u00e9grad\u00e9 \u00e0 ce niveau.", "localization_tags": [], "locale": "fr", "last_edit": "2016-05-21T10:01:20", "review_tags": []}, {"uuid": "eb7b59db-de5d-4a29-bfd1-f15a7bb45aa5", "title": "linear-gradient", "url": "/ko/docs/Web/CSS/linear-gradient", "tags": ["CSS", "\ud3b8\ub78c", "CSS \uc774\ubbf8\uc9c0", "\uadf8\ub798\ud53d", "CSS \ud568\uc218", "\uc6f9", "\ub808\uc774\uc544\uc6c3"], "summary": "CSS\uc758\u00a0<code>linear-gradient()</code>\u00a0\ud568\uc218\ub294 \uc120\ud615 \uceec\ub7ec \uadf8\ub808\ub514\uc5b8\ud2b8\ub97c \ub098\ud0c0\ub0b4\ub294 <a href=\"/ko/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;image&gt;</code></a>\ub97c \ub9cc\ub4e4\uc5b4\ub0b8\ub2e4. \uc774 \ud568\uc218\uc758 \uacb0\uacfc \uac12\uc740 CSS <a href=\"/ko/docs/Web/CSS/gradient\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;gradient&gt;</code></a> \ub370\uc774\ud130 \ud615\uc758 \uac1d\uccb4\ub2e4. \ub2e4\ub978 \uadf8\ub808\ub514\uc5b8\ud2b8\ucc98\ub7fc CSS \uc120\ud615 \uadf8\ub808\ub514\uc5b8\ud2b8\ub3c4 CSS <a href=\"/ko/docs/Web/CSS/color_value\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;color&gt;</code></a>\uac00 \uc544\ub2c8\uba70 \ubcf8\ub798\uc758 \ud06c\uae30\uac00 \uc5c6\ub294(<a href=\"/en/CSS/image#no_intrinsic\" style=\"font-size: 13.63636302948px; line-height: 19.0909080505371px;\" title=\"en/CSS/image#no_intrinsic\">no intrinsic dimensions</a>)\u00a0<span style=\"font-size: 14px; line-height: 1.5;\">\uc774\ubbf8\uc9c0\ub2e4. \uc989, \ubbf8\ub9ac \uc815\ud574\uc9c4 \ub610\ub294 \uc6b0\uc120\uc2dc\ub418\ub294 \ud06c\uae30\ub098 \ube44\uc728\uc740 \uc5c6\ub2e4</span><span style=\"font-size: 14px; line-height: 1.5;\">. \uc2e4\uc81c\uc801\uc778 \ud06c\uae30\ub294 \uadf8\ub808\ub514\uc5b8\ud2b8\uac00 \uc801\uc6a9\ub418\ub294 \uc694\uc18c\uc5d0 \ub9de\ucd94\uc5b4\uc9c4\ub2e4.</span>", "localization_tags": [], "locale": "ko", "last_edit": "2016-06-28T06:44:08", "review_tags": []}, {"uuid": "5c67aab0-8c50-41d4-a656-f7f1a657d696", "title": "linear-gradient", "url": "/zh-CN/docs/Web/CSS/linear-gradient", "tags": [], "summary": "CSS <code>linear-gradient()</code>\u00a0\u51fd\u6570\u521b\u5efa\u4e86\u4e00\u4e2a\u5448\u73b0\u7ebf\u6027\u6e10\u53d8\u989c\u8272\u7684\u00a0<a href=\"/zh-CN/docs/Web/CSS/image\" title=\"&#x6B64;&#x9875;&#x9762;&#x4ECD;&#x672A;&#x88AB;&#x672C;&#x5730;&#x5316;, &#x671F;&#x5F85;&#x60A8;&#x7684;&#x7FFB;&#x8BD1;!\"><code>&lt;image&gt;</code></a>\u3002\u8be5\u51fd\u6570\u7ed3\u679c\u662f\u4e00\u4e2aCSS <a href=\"/zh-CN/docs/Web/CSS/gradient\" title=\"&#x6B64;&#x9875;&#x9762;&#x4ECD;&#x672A;&#x88AB;&#x672C;&#x5730;&#x5316;, &#x671F;&#x5F85;&#x60A8;&#x7684;&#x7FFB;&#x8BD1;!\"><code>&lt;gradient&gt;</code></a>\u5bf9\u8c61\u7684\u6570\u636e\u7c7b\u578b\u3002\u50cf\u5176\u4ed6\u6e10\u53d8\u4e00\u6837, \u7ebf\u6027\u6e10\u53d8\u4e0d\u662f\u4e00\u4e2acss<a href=\"/zh-CN/docs/Web/CSS/color_value\" title=\"&#x6B64;&#x9875;&#x9762;&#x4ECD;&#x672A;&#x88AB;&#x672C;&#x5730;&#x5316;, &#x671F;&#x5F85;&#x60A8;&#x7684;&#x7FFB;&#x8BD1;!\"><code>&lt;color&gt;</code></a>\u4e14\u56fe\u50cf<a href=\"/en-US/docs/Web/CSS/image#no_intrinsic\">\u65e0\u5185\u5728\u5c3a\u5bf8</a>\uff1b\u5c31\u662f\u8bf4, \u5b83\u6ca1\u6709\u9ed8\u8ba4\u6216\u8005\u9996\u9009\u7684\u5927\u5c0f\u6216\u8005\u662f\u6bd4\u4f8b\u3002\u5b83\u7684\u5177\u4f53\u5c3a\u5bf8\u5927\u5c0f\u548c\u5b83\u5bf9\u5e94\u7684\u5143\u7d20\u7684\u5927\u5c0f\u76f8\u5339\u914d\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-05-23T19:45:19", "review_tags": ["technical", "editorial"]}, {"uuid": "93d2552a-b4a8-4911-a557-62050fabdbfe", "title": "linear-gradient", "url": "/es/docs/Web/CSS/linear-gradient", "tags": [], "summary": "La funci\u00f3n CSS <code>linear-gradient()</code> crea una <a href=\"/es/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;image&gt;</code></a> la cual representa un degradado lineal de colores. El resultado de esta funci\u00f3n es un objeto CSS de tipo dato <a href=\"/es/docs/Web/CSS/gradient\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;gradient&gt;</code></a>. C\u00f3mo cualquier otro degradado, un degradado lineal en CSS no es CSS <a href=\"/es/docs/Web/CSS/color_value\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;color&gt;</code></a> sino una imagen <a href=\"/en/CSS/image#no_intrinsic\">sin dimensiones intr\u00ednsecas</a>; que significa, que no tiene un tama\u00f1o natural o predefinido, no hay un radio. Su tama\u00f1o concreto se ajustar\u00e1 al del elemento al cual se le aplica.", "localization_tags": ["inprogress"], "locale": "es", "last_edit": "2016-01-27T14:00:50", "review_tags": []}, {"uuid": "51de7082-2845-4905-ac42-246cc3cdb0ba", "title": "linear-gradient()", "url": "/de/docs/Web/CSS/linear-gradient", "tags": [], "summary": "Die CSS <code>linear-gradient()</code> Funktion erstellt ein <a href=\"/de/docs/Web/CSS/image\" title=\"Die Beschreibung hier&#xFC;ber wurde bisher noch nicht geschrieben; bitte erw&#xE4;ge, mitzuwirken!\"><code>&lt;image&gt;</code></a> welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS <a href=\"/de/docs/Web/CSS/gradient\" title=\"Die Beschreibung hier&#xFC;ber wurde bisher noch nicht geschrieben; bitte erw&#xE4;ge, mitzuwirken!\"><code>&lt;gradient&gt;</code></a> Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS <a href=\"/de/docs/Web/CSS/Farben\" title=\"Die Beschreibung hier&#xFC;ber wurde bisher noch nicht geschrieben; bitte erw&#xE4;ge, mitzuwirken!\"><code>&lt;color&gt;</code></a> sondern ein Bild mit <a href=\"/en/CSS/image#no_intrinsic\" title=\"en/CSS/image#no_intrinsic\">keinen spezifischen Dimensionen</a>; Also hat er weder eine nat\u00fcrliche oder bevorzugte Gr\u00f6\u00dfe, noch ein Gr\u00f6\u00dfenverh\u00e4ltnis. Seine genaue Gr\u00f6\u00dfe wird durch die Gr\u00f6\u00dfe seines zugeh\u00f6rigen Elements bedingt.", "localization_tags": ["inprogress"], "locale": "de", "last_edit": "2016-01-27T14:05:45", "review_tags": ["editorial"]}], "modified": "2016-06-28T06:46:55", "label": "linear-gradient", "localization_tags": [], "locale": "ja", "id": 14985, "last_edit": "2016-06-28T06:46:45", "summary": "CSS \u306e <code>linear-gradient()</code> \u95a2\u6570\u306f\u3001\u8272\u306e\u7dda\u5f62\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u3059 <a href=\"/ja/docs/Web/CSS/image\" title=\"CSS &#x306E; &lt;image&gt; &#x30C7;&#x30FC;&#x30BF;&#x578B;&#x306F;&#x3001;2 &#x6B21;&#x5143;&#x306E;&#x753B;&#x50CF;&#x3092;&#x8868;&#x73FE;&#x3057;&#x307E;&#x3059;&#x3002;CSS &#x3067;&#x306F;&#x753B;&#x50CF;&#x306F; 2 &#x7A2E;&#x985E;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;URL &#x3092;&#x4F7F;&#x3063;&#x3066;&#x53C2;&#x7167;&#x3055;&#x308C;&#x308B;&#x3053;&#x3068;&#x306E;&#x591A;&#x3044;&#x3054;&#x304F;&#x666E;&#x901A;&#x306E;&#x9759;&#x7684;&#x306A;&#x753B;&#x50CF;&#x3068;&#x3001;&#x30B0;&#x30E9;&#x30C7;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3084;&#x6728;&#x69CB;&#x9020;&#x306E;&#x4E00;&#x90E8;&#x5206;&#x3092;&#x8868;&#x73FE;&#x3059;&#x308B;&#x3088;&#x3046;&#x306A;&#x52D5;&#x7684;&#x306B;&#x751F;&#x6210;&#x3055;&#x308C;&#x305F;&#x753B;&#x50CF;&#x3067;&#x3059;&#x3002;\"><code>&lt;image&gt;</code></a> \u3092\u4f5c\u308a\u307e\u3059\u3002\u3053\u306e\u95a2\u6570\u306e\u7d50\u679c\u306f CSS \u306e <a href=\"/ja/docs/Web/CSS/gradient\" title=\"CSS &#x306E; &lt;gradient&gt; &#x30C7;&#x30FC;&#x30BF;&#x578B;&#x306F;&#x3001;2 &#x8272;&#x304B;&#x305D;&#x308C;&#x4EE5;&#x4E0A;&#x306E;&#x8272;&#x9593;&#x3092;&#x8272;&#x304C;&#x9023;&#x7D9A;&#x5909;&#x5316;&#x3059;&#x308B;&#x3088;&#x3046;&#x306A; CSS &#x306E; &lt;image&gt; &#x3092;&#x8868;&#x3057;&#x307E;&#x3059;&#x3002;CSS &#x30B0;&#x30E9;&#x30C7;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306F; CSS &#x306E; &lt;color&gt; &#x3067;&#x306F;&#x306A;&#x304F;&#x3001;&#x56FA;&#x6709;&#x306E;&#x30B5;&#x30A4;&#x30BA;&#x3092;&#x6301;&#x305F;&#x306A;&#x3044;&#x753B;&#x50CF;&#x3067;&#x3059;&#x3002;&#x3053;&#x308C;&#x306F;&#x3001;&#x753B;&#x50CF;&#x672C;&#x6765;&#x306E;&#x30B5;&#x30A4;&#x30BA;&#x3084;&#x3001;&#x512A;&#x5148;&#x3055;&#x308C;&#x308B;&#x30B5;&#x30A4;&#x30BA;&#x3092;&#x6301;&#x305F;&#x306A;&#x3044;&#x3068;&#x3044;&#x3046;&#x3053;&#x3068;&#x3067;&#x3059;&#xFF08;&#x30A2;&#x30B9;&#x30DA;&#x30AF;&#x30C8;&#x6BD4;&#x306B;&#x3064;&#x3044;&#x3066;&#x3082;&#x540C;&#x69D8;&#x3067;&#x3059;&#xFF09;&#x3002;&#x5B9F;&#x969B;&#x306E;&#x30B5;&#x30A4;&#x30BA;&#x306F;&#x3001;&#x30B0;&#x30E9;&#x30C7;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x7528;&#x3044;&#x3089;&#x308C;&#x308B;&#x8981;&#x7D20;&#x306B;&#x30DE;&#x30C3;&#x30C1;&#x3057;&#x305F;&#x3082;&#x306E;&#x306B;&#x306A;&#x308B;&#x3067;&#x3057;&#x3087;&#x3046;&#x3002;\"><code>&lt;gradient&gt;</code></a> \u30c7\u30fc\u30bf\u578b\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u306a\u308a\u307e\u3059\u3002", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Summary", "title": "\u6982\u8981"}, {"id": "Syntax", "title": "\u69cb\u6587"}, {"id": "Values", "title": "\u5024"}, {"id": "History_of_the_syntax", "title": "\u69cb\u6587\u306e\u9077\u308a\u5909\u308f\u308a"}, {"id": "Examples", "title": "\u4f8b"}, {"id": "Gradient_at_a_45_degree_angle", "title": "45 \u5ea6 \u306e\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3"}, {"id": "Gradient_with_multiple_color_stops", "title": "\u8907\u6570\u306e\u30ab\u30e9\u30fc\u30b9\u30c8\u30c3\u30d7"}, {"id": "Repeating_a_linear_gradient", "title": "\u7e70\u308a\u8fd4\u3057"}, {"id": "Using_transparency", "title": "\u4f8b: \u900f\u660e\u5ea6\u306e\u5229\u7528"}, {"id": "Specifications", "title": "\u4ed5\u69d8"}, {"id": "Browser_compatibility", "title": "\u30d6\u30e9\u30a6\u30b6\u5b9f\u88c5\u72b6\u6cc1"}, {"id": "Cross-browser_gradients", "title": "\u30af\u30ed\u30b9\u30d6\u30e9\u30a6\u30b6\u306a\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3"}, {"id": "See_also", "title": "\u95a2\u9023\u60c5\u5831"}], "slug": "Web/CSS/linear-gradient", "review_tags": []}