{"json_modified": "2016-09-13T20:11:38.638101", "uuid": "c8a11424-24f1-4c38-9ac6-34beecdbe605", "title": "\u4f7f\u7528CSS\u6e10\u53d8", "url": "/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients", "tags": [], "translations": [{"uuid": "84917aa6-6c9b-4ebd-81e2-c4d534b367d3", "title": "Using CSS gradients", "url": "/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients", "tags": ["CSS Image", "CSS", "Advanced", "NeedsUpdate", "Web", "Example", "Guide", "NeedsLiveSample"], "summary": "<strong>CSS gradients</strong> are new types of <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> added in the <a href=\"/en-US/docs/CSS/CSS3\" title=\"CSS3\">CSS3</a> Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors.", "localization_tags": [], "locale": "en-US", "last_edit": "2016-03-06T05:28:21", "review_tags": []}, {"uuid": "b4c2b6a0-3929-4155-a4fb-fbb9c3ad20ce", "title": "\u09b8\u09bf\u098f\u09b8\u098f\u09b8 \u0997\u09cd\u09b0\u09be\u09a1\u09bf\u09df\u09cd\u09af\u09be\u09a8\u09cd\u099f \u098f\u09b0 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0", "url": "/bn-BD/docs/Web/Guide/CSS/%E0%A6%B8%E0%A6%BF%E0%A6%8F%E0%A6%B8%E0%A6%8F%E0%A6%B8_%E0%A6%97%E0%A7%8D%E0%A6%B0%E0%A6%BE%E0%A6%A1%E0%A6%BF%E0%A7%9F%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%A8%E0%A7%8D%E0%A6%9F_%E0%A6%8F%E0%A6%B0_%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B9%E0%A6%BE%E0%A6%B0", "tags": [], "summary": "<strong>\u09b8\u09bf\u098f\u09b8\u098f\u09b8 \u0997\u09cd\u09b0\u09be\u09a1\u09bf\u09df\u09cd\u09af\u09be\u09a8\u09cd\u099f </strong>\u09b9\u099a\u09cd\u099b\u09c7 \u09a8\u09a4\u09c1\u09a8 \u09a7\u09b0\u09a8\u09c7\u09b0\u00a0 <a href=\"/bn-BD/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;image&gt;</code></a> \u09af\u09be\u0995\u09c7 \u09b8\u09bf\u098f\u09b8\u098f\u09b8\u09e9 \u098f\u09b0 \u0987\u09ae\u09c7\u099c \u09ae\u09a1\u09bf\u0989\u09b2\u09c7 \u0985\u09a8\u09cd\u09a4\u09b0\u09cd\u09ad\u09c2\u0995\u09cd\u09a4 \u0995\u09b0\u09be \u09b9\u09df\u09c7\u099b\u09c7\u0964 \u09b8\u09bf\u098f\u09b8\u098f\u09b8 \u0997\u09cd\u09b0\u09be\u09a1\u09bf\u09df\u09cd\u09af\u09be\u09a8\u09cd\u099f \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09c7 \u0986\u09aa\u09a8\u09bf \u09a6\u09c1\u0987 \u09ac\u09be \u09a4\u09a4\u09cb\u09a7\u09bf\u0995 \u09b0\u0982 \u098f\u09b0 \u09ae\u09a7\u09cd\u09af\u09c7 \u09a8\u09bf\u0996\u09c1\u09a4 \u099f\u09cd\u09b0\u09be\u09a8\u099c\u09bf\u09b6\u09a8 \u09a6\u09c7\u0996\u09be\u09a4\u09c7 \u09aa\u09be\u09b0\u09c7\u09a8\u0964", "localization_tags": ["inprogress"], "locale": "bn-BD", "last_edit": "2016-06-29T03:59:47", "review_tags": []}, {"uuid": "c04d8a43-4df5-4f47-8abe-f8517def22c0", "title": "Verwendung von CSS Farbverl\u00e4ufen", "url": "/de/docs/Farbverl%C3%A4ufe_in_CSS", "tags": ["Beispiel", "CSS", "CSS Bild", "NeedsUpdate", "Web", "erweitert", "Guide", "NeedsLiveSample"], "summary": "<strong>CSS Farbverl\u00e4ufe</strong> sind neue Typen von <a href=\"/de/docs/Web/CSS/image\" title=\"Der &lt;image&gt; CSS Datentyp repr&#xE4;sentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist &#xFC;ber einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverl&#xE4;ufe oder Abbildungen von Teilen der HTML Struktur.\"><code>&lt;image&gt;</code></a>, die durch das <a href=\"/de/docs/CSS/CSS3\" title=\"CSS3\">CSS3</a> Image Module hinzugef\u00fcgt wurden. Die Verwendung von CSS Farbverl\u00e4ufen erlaubt es, weiche \u00dcberg\u00e4nge zwischen zwei oder mehr angegebenen Farben anzuzeigen.", "localization_tags": [], "locale": "de", "last_edit": "2016-04-04T12:34:38", "review_tags": []}, {"uuid": "be7738ff-1e41-417b-b29e-9179e46d8137", "title": "Usando gradientes con CSS", "url": "/es/docs/CSS/Using_CSS_gradients", "tags": [], "summary": "<a href=\"/en-US/docs/CSS/CSS3\" title=\"CSS3\">CSS3</a> posee soporte para nuevos tipos de <em>gradientes</em>\u00a0 en las propiedades CSS. Usarlos <span id=\"result_box\" lang=\"es\"><span class=\"hps\">en</span> <span class=\"hps\">un</span> <span class=\"hps\">segundo plano,</span> <span class=\"hps\">permite mostrar</span> <span class=\"hps\">transiciones suaves</span> <span class=\"hps\">entre dos o</span> <span class=\"hps\">m\u00e1s</span> <span class=\"hps\">colores especificados,</span></span> <span id=\"result_box\" lang=\"es\"><span class=\"hps\">evitando as\u00ed</span> <span class=\"hps\">el uso de im\u00e1genes</span> <span class=\"hps\">para estos efectos</span></span>, lo que reduce<span id=\"result_box\" lang=\"es\"><span class=\"hps\"> el tiempo</span> <span class=\"hps\">de descarga y</span> <span class=\"hps\">el uso de</span> <span class=\"hps\">ancho de banda</span></span>. <span id=\"result_box\" lang=\"es\"><span class=\"hps\">Adem\u00e1s</span><span>,</span> <span class=\"hps\">debido a que el</span> <span class=\"hps\">gradiente</span> <span class=\"hps\">es generado por el</span> <span class=\"hps\">navegador</span><span>,</span></span> los <span id=\"result_box\" lang=\"es\"><span class=\"hps\">objetos</span> <span class=\"hps\">degradados</span> <span class=\"hps\">se ven mejor</span> <span class=\"hps\">cuando se hace un acercamiento</span></span>, y el ajuste de dise\u00f1o es mucho m\u00e1s flexible.", "localization_tags": [], "locale": "es", "last_edit": "2016-06-29T04:00:43", "review_tags": []}, {"uuid": "1330b95c-1103-441b-bff1-217731d652d8", "title": "Utilisation de d\u00e9grad\u00e9s CSS", "url": "/fr/docs/Web/CSS/Utilisation_de_d%C3%A9grad%C3%A9s_CSS", "tags": ["CSS", "Avanc\u00e9", "Guide"], "summary": "Les <strong>d\u00e9grad\u00e9s CSS</strong> sont de nouveaux types de <a href=\"/fr/docs/Web/CSS/image\" title=\"Le type de donn&#xE9;e CSS &lt;image&gt; repr&#xE9;sente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilis&#xE9;es via une URL), et les images g&#xE9;n&#xE9;r&#xE9;es dynamiquement comme les d&#xE9;grad&#xE9;s ou les images construites &#xE0; partir de fragments de l'arbre du DOM.\"><code>&lt;image&gt;</code></a> ajout\u00e9s au module Image de <a href=\"/en-US/docs/Web/CSS/CSS3\">CSS3</a>. L'utilisation de d\u00e9grad\u00e9s CSS permet d'afficher des transitions douces entre deux couleurs ou plus.", "localization_tags": [], "locale": "fr", "last_edit": "2016-07-25T12:06:44", "review_tags": []}, {"uuid": "d2ca2819-5abe-4f8f-8571-dc4d272e982a", "title": "CSS \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u5229\u7528", "url": "/ja/docs/Web/Guide/CSS/Using_CSS_gradients", "tags": ["CSS", "css3-images"], "summary": "<strong>CSS \u306e\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3</strong>\u306f\u3001<a href=\"/ja/docs/CSS/CSS3\" title=\"CSS3\">CSS3</a> Image Module \u3067\u8ffd\u52a0\u3055\u308c\u305f\u3001\u65b0\u3057\u3044\u30bf\u30a4\u30d7\u306e <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> \u3067\u3059\u3002CSS \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u3046\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u6307\u5b9a\u3055\u308c\u305f 2 \u3064\u307e\u305f\u306f\u305d\u308c\u4ee5\u4e0a\u306e\u8272\u306e\u9593\u3092\u30b9\u30e0\u30fc\u30b9\u306b\u5909\u5316\u3055\u305b\u3066\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u3063\u3066\u3001\u3053\u3046\u3044\u3063\u305f\u52b9\u679c\u306e\u305f\u3081\u306b\u753b\u50cf\u3092\u4f7f\u3046\u5fc5\u8981\u304c\u306a\u304f\u306a\u308a\u3001\u305d\u306e\u7d50\u679c\u3001\u6d88\u8cbb\u3059\u308b\u5e2f\u57df\u5e45\u3084\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306b\u8981\u3059\u308b\u6642\u9593\u3092\u6e1b\u3089\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u306f\u30d6\u30e9\u30a6\u30b6\u306b\u3088\u3063\u3066\u751f\u6210\u3055\u308c\u308b\u305f\u3081\u3001\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u542b\u3093\u3060\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u30ba\u30fc\u30e0\u8868\u793a\u3055\u308c\u305f\u3068\u304d\u306b\u3082\u7dba\u9e97\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3057\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u3088\u308a\u67d4\u8edf\u306b\u9069\u5fdc\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-03-08T05:24:39", "review_tags": []}, {"uuid": "cdfc1ebf-31b6-4c7c-818c-35744d4eb054", "title": "Using CSS gradients", "url": "/pt-BR/docs/Web/CSS/Using_CSS_gradients", "tags": [], "summary": "<strong>Gradientes css</strong> s\u00e3o novos tipos de <a href=\"/pt-BR/docs/Web/CSS/image\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>&lt;image&gt;</code></a> adicionados no m\u00f3dulo de imagem do <a href=\"/en-US/docs/CSS/CSS3\" title=\"CSS3\">CSS3.</a> Using CSS gradients lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.", "localization_tags": [], "locale": "pt-BR", "last_edit": "2016-06-29T04:00:06", "review_tags": []}], "modified": "2016-09-13T20:11:37", "label": "\u4f7f\u7528CSS\u6e10\u53d8", "localization_tags": [], "locale": "zh-CN", "id": 84741, "last_edit": "2016-09-13T20:11:31", "summary": "<strong>CSS \u6e10\u53d8</strong>\u00a0\u662f\u5728\u00a0<a href=\"/en-US/docs/CSS/CSS3\" title=\"CSS3\">CSS3</a> Image Module \u4e2d\u65b0\u589e\u52a0\u7684 <a href=\"/zh-CN/docs/Web/CSS/image\" title=\"CSS&#x7684;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x63CF;&#x8FF0;&#x7684;&#x662F;2D&#x56FE;&#x5F62;&#x3002;&#x5728;CSS&#x4E2D;&#x6709;&#x4E24;&#x79CD;&#x7C7B;&#x578B;&#x7684;&#x56FE;&#x50CF;&#xFF1A;&#x7B80;&#x5355;&#x7684;&#x9759;&#x6001;&#x56FE;&#x50CF;&#xFF0C;&#x7ECF;&#x5E38;&#x88AB;&#x4E00;&#x4E2A;&#x5728;&#x4F7F;&#x7528;&#x7684;URL&#x5F15;&#x7528;&#xFF0C;&#x52A8;&#x6001;&#x751F;&#x6210;&#x7684;&#x56FE;&#x50CF;&#xFF0C;&#x6BD4;&#x5982;DOM&#x6811;&#x7684;&#x90E8;&#x5206;&#x5143;&#x7D20;&#x6837;&#x5F0F;&#x6E10;&#x53D8;&#x6216;&#x8005;&#x8BA1;&#x7B97;&#x6837;&#x5F0F;&#x4EA7;&#x751F;&#x3002;\"><code>&lt;image&gt;</code></a> \u7c7b\u578b. \u4f7f\u7528 CSS \u6e10\u53d8\u53ef\u4ee5\u5728\u4e24\u79cd\u989c\u8272\u95f4\u5236\u9020\u51fa\u5e73\u6ed1\u7684\u6e10\u53d8\u6548\u679c.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Linear_gradients", "title": "\u7ebf\u6027\u6e10\u53d8"}, {"id": "Simple_linear_gradients", "title": "\u7b80\u5355\u7ebf\u6027\u6e10\u53d8"}, {"id": "Using_angles", "title": "\u4f7f\u7528\u89d2\u5ea6"}, {"id": "Linear_gradients-Color_stops", "title": "\u8272\u6807"}, {"id": "Linear_gradients-Example.3A_Three_color_stops", "title": "\u4f8b\u5b50: \u4e09\u4e2a\u8272\u6807"}, {"id": "Linear_gradients-Example.3A_Evenly_spaced_color_stops", "title": "\u4f8b\u5b50: \u7b49\u95f4\u8ddd\u8272\u6807"}, {"id": "Transparency_and_gradients", "title": "\u900f\u660e\u548c\u6e10\u53d8"}, {"id": "Radial_gradients", "title": "\u5f84\u5411\u6e10\u53d8"}, {"id": "Radial_gradients-Color_stops", "title": "\u8272\u6807"}, {"id": "Radial_gradients-Example.3A_Evenly_spaced_color_stops", "title": "\u4f8b\u5b50: \u7b49\u95f4\u8ddd\u8272\u6807"}, {"id": "Radial_gradients-Example.3A_Explicitly_spaced_color_stops", "title": "\u4f8b\u5b50: \u6307\u5b9a\u95f4\u8ddd\u8272\u6807"}, {"id": "Size", "title": "\u5927\u5c0f"}, {"id": "Example.3A_closest-side_for_ellipses", "title": "\u4f8b\u5b50: \u692d\u5706\u7684\u6700\u8fd1\u7aef"}, {"id": "Example.3A_farthest-corner_for_ellipses", "title": "\u4f8b\u5b50: \u692d\u5706\u7684\u6700\u8fdc\u7aef"}, {"id": "Example.3A_closest-side_for_circles", "title": "\u4f8b\u5b50: \u5706\u5f62\u7684\u6700\u8fd1\u7aef"}, {"id": "Repeating_gradients", "title": "\u91cd\u590d\u7684\u6e10\u53d8"}, {"id": "Examples.3A_Repeating_linear_gradient", "title": "\u4f8b\u5b50: \u91cd\u590d\u7684\u7ebf\u6027\u6e10\u53d8"}, {"id": "Example.3A_Repeating_radial_gradient", "title": "\u4f8b\u5b50: \u91cd\u590d\u7684\u5f84\u5411\u6e10\u53d8"}, {"id": "See_also", "title": "\u66f4\u591a"}], "slug": "Web/Guide/CSS/Using_CSS_gradients", "review_tags": []}