{"id":6411,"date":"2026-06-05T11:00:22","date_gmt":"2026-06-05T07:30:22","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6411"},"modified":"2026-06-06T12:03:29","modified_gmt":"2026-06-06T08:33:29","slug":"%d8%a7%d9%81%d8%b2%d9%88%d8%af%d9%86-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d9%88-%d8%ad%d8%a7%d8%b4%db%8c%d9%87%d9%87%d8%a7%db%8c-%da%af%d8%b1%d8%a7%d8%af%db%8c%d8%a7%d9%86%db%8c-%d8%a8%d8%a7","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d8%a7%d9%81%d8%b2%d9%88%d8%af%d9%86-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-%d9%88-%d8%ad%d8%a7%d8%b4%db%8c%d9%87%d9%87%d8%a7%db%8c-%da%af%d8%b1%d8%a7%d8%af%db%8c%d8%a7%d9%86%db%8c-%d8%a8%d8%a7\/","title":{"rendered":"\u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u06cc \u0628\u0627 CSS \u062e\u0627\u0644\u0635"},"content":{"rendered":"<h2 data-section-id=\"43f4r3\" data-start=\"50\" data-end=\"58\">\u0645\u0642\u062f\u0645\u0647<\/h2>\n<p data-start=\"60\" data-end=\"169\">\u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u062a\u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0632 \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc CSS (Borders) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f:<\/p>\n<ul data-start=\"171\" data-end=\"221\">\n<li data-section-id=\"7r2lry\" data-start=\"171\" data-end=\"187\"><code data-start=\"173\" data-end=\"187\">border-style<\/code><\/li>\n<li data-section-id=\"1wlmghg\" data-start=\"188\" data-end=\"204\"><code data-start=\"190\" data-end=\"204\">border-color<\/code><\/li>\n<li data-section-id=\"ajo27j\" data-start=\"205\" data-end=\"221\"><code data-start=\"207\" data-end=\"221\">border-width<\/code><\/li>\n<\/ul>\n<p data-start=\"223\" data-end=\"264\">\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0638\u0627\u0647\u0631 \u062d\u0627\u0634\u06cc\u0647 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"266\" data-end=\"442\">\u0627\u0645\u0627 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u200c\u062a\u0631\u06cc \u0646\u06cc\u0632 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0627\u0632 <strong data-start=\"352\" data-end=\"377\">\u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062d\u0627\u0634\u06cc\u0647<\/strong> \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 <strong data-start=\"387\" data-end=\"428\">\u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u06cc (Gradient Borders)<\/strong> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"444\" data-end=\"489\">\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0622\u0634\u0646\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0634\u062f:<\/p>\n<ul data-start=\"491\" data-end=\"554\">\n<li data-section-id=\"2ve5ry\" data-start=\"491\" data-end=\"514\"><code data-start=\"493\" data-end=\"514\">border-image-source<\/code><\/li>\n<li data-section-id=\"1fnkl5f\" data-start=\"515\" data-end=\"537\"><code data-start=\"517\" data-end=\"537\">border-image-slice<\/code><\/li>\n<li data-section-id=\"1t2ar72\" data-start=\"538\" data-end=\"554\"><code data-start=\"540\" data-end=\"554\">border-image<\/code><\/li>\n<\/ul>\n<p data-start=\"556\" data-end=\"618\">\u0648 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u06cc \u0628\u0627 CSS \u062e\u0627\u0644\u0635 \u0631\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a.<\/p>\n<hr data-start=\"620\" data-end=\"623\" \/>\n<h1 data-section-id=\"15g5ic3\" data-start=\"625\" data-end=\"637\">\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/h1>\n<p data-start=\"639\" data-end=\"674\">\u0628\u0631\u0627\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0647\u062a\u0631 \u0627\u0633\u062a:<\/p>\n<ul data-start=\"676\" data-end=\"770\">\n<li data-section-id=\"18qjw8k\" data-start=\"676\" data-end=\"710\">\u0622\u0634\u0646\u0627\u06cc\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627 CSS \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/li>\n<li data-section-id=\"1bkgcrq\" data-start=\"711\" data-end=\"770\">\u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06a9\u0646\u062f:<\/li>\n<\/ul>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">border-image<\/span>\r\n<span class=\"\u037co\">linear-gradient<\/span>\r\n<span class=\"\u037co\">radial-gradient<\/span>\r\n<span class=\"\u037co\">conic-gradient<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"844\" data-end=\"847\" \/>\n<h1 data-section-id=\"1f3nwpx\" data-start=\"849\" data-end=\"866\">\u0622\u0645\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062b\u0627\u0644<\/h1>\n<p data-start=\"868\" data-end=\"934\">\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u0628\u0639\u0627\u062f \u0648 \u0645\u0631\u06a9\u0632\u0686\u06cc\u0646 \u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">box<\/span> {\r\n  width: <span class=\"\u037cj\">400<\/span><span class=\"\u037cg\">px<\/span>;\r\n  height: <span class=\"\u037cj\">200<\/span><span class=\"\u037cg\">px<\/span>;\r\n  max-width: <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">%<\/span>;\r\n  margin: <span class=\"\u037cj\">1<\/span><span class=\"\u037cg\">rem<\/span> <span class=\"\u037cj\">auto<\/span>;\r\n  display: <span class=\"\u037cj\">flex<\/span>;\r\n  align-items: <span class=\"\u037cj\">center<\/span>;\r\n  justify-content: <span class=\"\u037cj\">center<\/span>;\r\n  font-size: <span class=\"\u037cj\">2<\/span><span class=\"\u037cg\">rem<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1116\" data-end=\"1150\">\u0633\u067e\u0633 \u0627\u0632 \u0622\u0646 \u062f\u0631 HTML \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\" data-custom-highlighting-behavior=\"boundary\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative [container-type:inline-size]\">\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">&lt;div<\/span> <span class=\"\u037cn\">class<\/span><span class=\"\u037cg\">=<\/span><span class=\"\u037ck\">\"box\"<\/span><span class=\"\u037co\">&gt;<\/span>\r\n  Example box without a border.\r\n<span class=\"\u037co\">&lt;\/div&gt;<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"1222\" data-end=\"1225\" \/>\n<h1 data-section-id=\"lbcwxr\" data-start=\"1227\" data-end=\"1248\">\u0627\u0641\u0632\u0648\u062f\u0646 \u062d\u0627\u0634\u06cc\u0647 \u0645\u0639\u0645\u0648\u0644\u06cc<\/h1>\n<p data-start=\"1250\" data-end=\"1283\">\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">with-border<\/span> {\r\n  border-color: <span class=\"\u037cj\">black<\/span>;\r\n  border-style: <span class=\"\u037cj\">solid<\/span>;\r\n  border-width: <span class=\"\u037cj\">30<\/span><span class=\"\u037cg\">px<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1382\" data-end=\"1412\">\u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\" data-custom-highlighting-behavior=\"boundary\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative [container-type:inline-size]\">\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">&lt;div<\/span> <span class=\"\u037cn\">class<\/span><span class=\"\u037cg\">=<\/span><span class=\"\u037ck\">\"box with-border\"<\/span><span class=\"\u037co\">&gt;<\/span>\r\n  Example box with a border.\r\n<span class=\"\u037co\">&lt;\/div&gt;<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1493\" data-end=\"1531\">\u0646\u062a\u06cc\u062c\u0647 \u06cc\u06a9 \u06a9\u0627\u062f\u0631 \u0628\u0627 \u062d\u0627\u0634\u06cc\u0647 \u0645\u0634\u06a9\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<hr data-start=\"1533\" data-end=\"1536\" \/>\n<h1 data-section-id=\"rt8vqa\" data-start=\"1538\" data-end=\"1572\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062d\u0627\u0634\u06cc\u0647<\/h1>\n<p data-start=\"1574\" data-end=\"1611\">\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062d\u0627\u0634\u06cc\u0647:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">with-border-image<\/span> {\r\n  border-style: <span class=\"\u037cj\">solid<\/span>;\r\n  border-width: <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">px<\/span>;\r\n  border-image-source: <span class=\"\u037cj\">url<\/span>(<span class=\"\u037ck\">image.jpg<\/span>);\r\n  border-image-slice: <span class=\"\u037cj\">60<\/span> <span class=\"\u037cj\">30<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"1761\" data-end=\"1765\">\u0633\u067e\u0633:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\" data-custom-highlighting-behavior=\"boundary\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative [container-type:inline-size]\">\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">&lt;div<\/span> <span class=\"\u037cn\">class<\/span><span class=\"\u037cg\">=<\/span><span class=\"\u037ck\">\"box with-border-image\"<\/span><span class=\"\u037co\">&gt;<\/span>\r\n  Example box with a border image.\r\n<span class=\"\u037co\">&lt;\/div&gt;<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"1858\" data-end=\"1861\" \/>\n<h2 data-section-id=\"1ebqi0v\" data-start=\"1863\" data-end=\"1891\">border-image-source \u0686\u06cc\u0633\u062a\u061f<\/h2>\n<p data-start=\"1893\" data-end=\"1948\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062d\u0627\u0634\u06cc\u0647 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p data-start=\"1950\" data-end=\"1979\">\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0634\u0627\u0645\u0644 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0628\u0627\u0634\u062f:<\/p>\n<ul data-start=\"1981\" data-end=\"2025\">\n<li data-section-id=\"btxk0p\" data-start=\"1981\" data-end=\"2001\">\u0641\u0627\u06cc\u0644 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0645\u0639\u0645\u0648\u0644\u06cc<\/li>\n<li data-section-id=\"1x7f1pj\" data-start=\"2002\" data-end=\"2014\">\u062a\u0635\u0627\u0648\u06cc\u0631 SVG<\/li>\n<li data-section-id=\"1qam2uu\" data-start=\"2015\" data-end=\"2025\">Data URI<\/li>\n<\/ul>\n<p data-start=\"2027\" data-end=\"2032\">\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">border-image-source<\/span>: <span class=\"\u037cj\">url<\/span>(<span class=\"\u037cl\">border<\/span>.<span class=\"\u037cl\">png<\/span>);<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2084\" data-end=\"2087\" \/>\n<h2 data-section-id=\"1hbv5ci\" data-start=\"2089\" data-end=\"2116\">border-image-slice \u0686\u06cc\u0633\u062a\u061f<\/h2>\n<p data-start=\"2118\" data-end=\"2214\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0686\u06af\u0648\u0646\u0647 \u0628\u0631\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f \u062a\u0627 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0622\u0646 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062d\u0627\u0634\u06cc\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u0646\u062f.<\/p>\n<p data-start=\"2216\" data-end=\"2252\">CSS \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u06f9 \u0642\u0633\u0645\u062a \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute end-1.5 top-1 z-2 md:end-2 md:top-1\"><\/div>\n<div class=\"relative\">\n<div class=\"pe-11 pt-3\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>+---+---+---+\r\n| 1 | 2 | 3 |\r\n+---+---+---+\r\n| 4 | 5 | 6 |\r\n+---+---+---+\r\n| 7 | 8 | 9 |\r\n+---+---+---+<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2365\" data-end=\"2422\">\u0642\u0633\u0645\u062a\u200c\u0647\u0627\u06cc \u06a9\u0646\u0627\u0631\u06cc \u0648 \u06af\u0648\u0634\u0647\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u062d\u0627\u0634\u06cc\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<p data-start=\"2424\" data-end=\"2429\">\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">border-image-slice<\/span>: 60 30;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr data-start=\"2470\" data-end=\"2473\" \/>\n<h1 data-section-id=\"vtqdgi\" data-start=\"2475\" data-end=\"2517\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u062e\u0644\u0627\u0635\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc (Shorthand)<\/h1>\n<p data-start=\"2519\" data-end=\"2540\">\u0628\u0647\u200c\u062c\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u062c\u062f\u0627\u06af\u0627\u0646\u0647:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">with-border-image<\/span> {\r\n  border-style: <span class=\"\u037cj\">solid<\/span>;\r\n  border-width: <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">px<\/span>;\r\n  border-image-source: <span class=\"\u037cj\">url<\/span>(<span class=\"\u037ck\">image.jpg<\/span>);\r\n  border-image-slice: <span class=\"\u037cj\">60<\/span> <span class=\"\u037cj\">30<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2690\" data-end=\"2701\">\u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">with-border-image<\/span> {\r\n  border-style: <span class=\"\u037cj\">solid<\/span>;\r\n  border-width: <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">px<\/span>;\r\n  border-image: <span class=\"\u037cj\">url<\/span>(<span class=\"\u037ck\">image.jpg<\/span>) <span class=\"\u037cj\">60<\/span> <span class=\"\u037cj\">30<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"2821\" data-end=\"2833\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n<p data-start=\"2835\" data-end=\"2863\">\u0647\u0631 \u062f\u0648 \u06a9\u062f \u0646\u062a\u06cc\u062c\u0647 \u06cc\u06a9\u0633\u0627\u0646\u06cc \u062f\u0627\u0631\u0646\u062f.<\/p>\n<hr data-start=\"2865\" data-end=\"2868\" \/>\n<h1 data-section-id=\"mc61as\" data-start=\"2870\" data-end=\"2891\">\u0633\u0627\u062e\u062a \u062d\u0627\u0634\u06cc\u0647 \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u06cc<\/h1>\n<p data-start=\"2893\" data-end=\"2931\">CSS \u0627\u0632 \u0633\u0647 \u0646\u0648\u0639 \u06af\u0631\u0627\u062f\u06cc\u0627\u0646 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n<ul data-start=\"2933\" data-end=\"2985\">\n<li data-section-id=\"1dzqfn7\" data-start=\"2933\" data-end=\"2950\">Linear Gradient<\/li>\n<li data-section-id=\"1ideqd9\" data-start=\"2951\" data-end=\"2968\">Radial Gradient<\/li>\n<li data-section-id=\"e221vq\" data-start=\"2969\" data-end=\"2985\">Conic Gradient<\/li>\n<\/ul>\n<p data-start=\"2987\" data-end=\"3057\">\u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06af\u0631\u0627\u062f\u06cc\u0627\u0646 \u0628\u0627\u06cc\u062f \u0645\u0642\u062f\u0627\u0631 <code data-start=\"3023\" data-end=\"3043\">border-image-slice<\/code> \u0628\u0631\u0627\u0628\u0631 \u06f1 \u0628\u0627\u0634\u062f.<\/p>\n<hr data-start=\"3059\" data-end=\"3062\" \/>\n<h1 data-section-id=\"1ndnu2v\" data-start=\"3064\" data-end=\"3090\">\u062d\u0627\u0634\u06cc\u0647 \u0628\u0627 Linear Gradient<\/h1>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">with-linear-gradient<\/span> {\r\n  border-style: <span class=\"\u037cj\">solid<\/span>;\r\n  border-width: <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">px<\/span>;\r\n\r\n  border-image:\r\n    <span class=\"\u037cg\">linear-gradient<\/span>(\r\n      <span class=\"\u037cj\">45<\/span><span class=\"\u037cg\">deg<\/span>,\r\n      <span class=\"\u037cg\">rgb<\/span>(<span class=\"\u037cj\">0<\/span>,<span class=\"\u037cj\">143<\/span>,<span class=\"\u037cj\">104<\/span>),\r\n      <span class=\"\u037cg\">rgb<\/span>(<span class=\"\u037cj\">250<\/span>,<span class=\"\u037cj\">224<\/span>,<span class=\"\u037cj\">66<\/span>)\r\n    ) <span class=\"\u037cj\">1<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3279\" data-end=\"3285\">\u0646\u062a\u06cc\u062c\u0647:<\/p>\n<p data-start=\"3287\" data-end=\"3325\">\u06cc\u06a9 \u062d\u0627\u0634\u06cc\u0647 \u0645\u0648\u0631\u0628 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u0633\u0628\u0632 \u0628\u0647 \u0632\u0631\u062f.<\/p>\n<hr data-start=\"3327\" data-end=\"3330\" \/>\n<h1 data-section-id=\"1oaje4p\" data-start=\"3332\" data-end=\"3358\">\u062d\u0627\u0634\u06cc\u0647 \u0628\u0627 Radial Gradient<\/h1>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">with-radial-gradient<\/span> {\r\n  border-style: <span class=\"\u037cj\">solid<\/span>;\r\n  border-width: <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">px<\/span>;\r\n\r\n  border-image:\r\n    <span class=\"\u037cg\">radial-gradient<\/span>(\r\n      <span class=\"\u037cg\">rgb<\/span>(<span class=\"\u037cj\">0<\/span>,<span class=\"\u037cj\">143<\/span>,<span class=\"\u037cj\">104<\/span>),\r\n      <span class=\"\u037cg\">rgb<\/span>(<span class=\"\u037cj\">250<\/span>,<span class=\"\u037cj\">224<\/span>,<span class=\"\u037cj\">66<\/span>)\r\n    ) <span class=\"\u037cj\">1<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3534\" data-end=\"3540\">\u0646\u062a\u06cc\u062c\u0647:<\/p>\n<p data-start=\"3542\" data-end=\"3582\">\u0631\u0646\u06af\u200c\u0647\u0627 \u0627\u0632 \u0645\u0631\u06a9\u0632 \u0628\u0647 \u0633\u0645\u062a \u0628\u06cc\u0631\u0648\u0646 \u067e\u062e\u0634 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n<hr data-start=\"3584\" data-end=\"3587\" \/>\n<h1 data-section-id=\"1db2ya\" data-start=\"3589\" data-end=\"3614\">\u062d\u0627\u0634\u06cc\u0647 \u0628\u0627 Conic Gradient<\/h1>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">with-conic-gradient<\/span> {\r\n  border-style: <span class=\"\u037cj\">solid<\/span>;\r\n  border-width: <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">px<\/span>;\r\n\r\n  border-image:\r\n    <span class=\"\u037cg\">conic-gradient<\/span>(\r\n      <span class=\"\u037cj\">red<\/span>,\r\n      <span class=\"\u037cj\">yellow<\/span>,\r\n      <span class=\"\u037cj\">lime<\/span>,\r\n      <span class=\"\u037cj\">aqua<\/span>,\r\n      <span class=\"\u037cj\">blue<\/span>,\r\n      <span class=\"\u037cj\">magenta<\/span>,\r\n      <span class=\"\u037cj\">red<\/span>\r\n    ) <span class=\"\u037cj\">1<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"3830\" data-end=\"3836\">\u0646\u062a\u06cc\u062c\u0647:<\/p>\n<p data-start=\"3838\" data-end=\"3868\">\u06cc\u06a9 \u062d\u0627\u0634\u06cc\u0647 \u0631\u0646\u06af\u06cc\u0646\u200c\u06a9\u0645\u0627\u0646\u06cc \u062f\u0627\u06cc\u0631\u0647\u200c\u0627\u06cc.<\/p>\n<hr data-start=\"3870\" data-end=\"3873\" \/>\n<h1 data-section-id=\"11kaj2m\" data-start=\"3875\" data-end=\"3889\">\u0645\u062b\u0627\u0644 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/h1>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">card<\/span> {\r\n  padding: <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">px<\/span>;\r\n  border: <span class=\"\u037cj\">5<\/span><span class=\"\u037cg\">px<\/span> <span class=\"\u037cj\">solid<\/span>;\r\n\r\n  border-image:\r\n    <span class=\"\u037cg\">linear-gradient<\/span>(\r\n      <span class=\"\u037cj\">to<\/span> <span class=\"\u037cj\">right<\/span>,\r\n      #ff0080,\r\n      #7928ca\r\n    ) <span class=\"\u037cj\">1<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4043\" data-end=\"4049\">\u062e\u0631\u0648\u062c\u06cc:<\/p>\n<p data-start=\"4051\" data-end=\"4091\">\u06cc\u06a9 \u06a9\u0627\u0631\u062a \u0628\u0627 \u062d\u0627\u0634\u06cc\u0647 \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u06cc \u0635\u0648\u0631\u062a\u06cc \u062a\u0627 \u0628\u0646\u0641\u0634.<\/p>\n<hr data-start=\"4093\" data-end=\"4096\" \/>\n<h1 data-section-id=\"t7zb0h\" data-start=\"4098\" data-end=\"4124\">\u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0645\u0647\u0645 border-image<\/h1>\n<p data-start=\"4126\" data-end=\"4135\">\u0645\u062a\u0623\u0633\u0641\u0627\u0646\u0647:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">border-image<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4162\" data-end=\"4170\">\u0647\u0646\u0648\u0632 \u0628\u0627:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">border-radius<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4198\" data-end=\"4217\">\u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u06a9\u0627\u0645\u0644 \u0646\u062f\u0627\u0631\u062f.<\/p>\n<p data-start=\"4219\" data-end=\"4224\">\u0645\u062b\u0627\u0644:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code>.<span class=\"\u037cl\">card<\/span> {\r\n  border-radius: <span class=\"\u037cj\">20<\/span><span class=\"\u037cg\">px<\/span>;\r\n  border-image: <span class=\"\u037cg\">linear-gradient<\/span>(<span class=\"\u037cj\">red<\/span>, <span class=\"\u037cj\">blue<\/span>) <span class=\"\u037cj\">1<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4317\" data-end=\"4382\">\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0631 \u0628\u0631\u062e\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u062f \u0628\u0647\u200c\u062f\u0631\u0633\u062a\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0646\u0634\u0648\u0646\u062f.<\/p>\n<hr data-start=\"4384\" data-end=\"4387\" \/>\n<h1 data-section-id=\"1kkna51\" data-start=\"4389\" data-end=\"4421\">\u0631\u0627\u0647\u200c\u062d\u0644 \u0628\u0631\u0627\u06cc \u06af\u0631\u0627\u062f\u06cc\u0627\u0646 + \u06af\u0648\u0634\u0647 \u06af\u0631\u062f<\/h1>\n<p data-start=\"4423\" data-end=\"4481\">\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u0632 \u062f\u0648 \u0639\u0646\u0635\u0631 \u062a\u0648 \u062f\u0631 \u062a\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\" data-custom-highlighting-behavior=\"boundary\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative [container-type:inline-size]\">\n<div class=\"w-full overflow-x-hidden overflow-y-auto\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">&lt;div<\/span> <span class=\"\u037cn\">class<\/span><span class=\"\u037cg\">=<\/span><span class=\"\u037ck\">\"gradient-border\"<\/span><span class=\"\u037co\">&gt;<\/span>\r\n  <span class=\"\u037co\">&lt;div<\/span> <span class=\"\u037cn\">class<\/span><span class=\"\u037cg\">=<\/span><span class=\"\u037ck\">\"content\"<\/span><span class=\"\u037co\">&gt;<\/span>\r\n    \u0645\u062d\u062a\u0648\u0627\r\n  <span class=\"\u037co\">&lt;\/div&gt;<\/span>\r\n<span class=\"\u037co\">&lt;\/div&gt;<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4576\" data-end=\"4592\">\u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632:<\/p>\n<div class=\"relative w-full mt-4 mb-1\">\n<div class=\"\">\n<div class=\"contents\">\n<div class=\"relative\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"h-full min-h-0 min-w-0\">\n<div class=\"border border-token-border-light border-radius-3xl corner-superellipse\/1.1 rounded-3xl\">\n<div class=\"h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse\/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback\">\n<div class=\"pointer-events-none absolute inset-x-4 top-12 bottom-4\">\n<div class=\"pointer-events-none sticky z-40 shrink-0 z-1!\">\n<div class=\"sticky bg-token-border-light\"><\/div>\n<\/div>\n<\/div>\n<div class=\"relative\">\n<div class=\"\">\n<div class=\"relative z-0 flex max-w-full\">\n<div id=\"code-block-viewer\" class=\"q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch \u037cd \u037cr\" dir=\"ltr\">\n<div class=\"cm-scroller\">\n<pre class=\"cm-content q9tKkq_readonly m-0\"><code><span class=\"\u037co\">background-image<\/span>\r\n<span class=\"\u037co\">background-color<\/span>\r\n<span class=\"\u037co\">border-radius<\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"\">\n<div class=\"h-full min-h-0 min-w-0\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p data-start=\"4654\" data-end=\"4698\">\u0638\u0627\u0647\u0631 \u06cc\u06a9 \u062d\u0627\u0634\u06cc\u0647 \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u06cc \u0631\u0627 \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<hr data-start=\"4700\" data-end=\"4703\" \/>\n<h1 data-section-id=\"13u76e4\" data-start=\"4705\" data-end=\"4724\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627<\/h1>\n<p data-start=\"4726\" data-end=\"4744\">\u0637\u0628\u0642 \u0622\u0645\u0627\u0631 \u0633\u0627\u0644 2020:<\/p>\n<ul data-start=\"4746\" data-end=\"4809\">\n<li data-section-id=\"1707aed\" data-start=\"4746\" data-end=\"4809\">\u0628\u06cc\u0634 \u0627\u0632 99\u066a \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u062c\u0647\u0627\u0646 \u0627\u0632 <code data-start=\"4777\" data-end=\"4791\">border-image<\/code> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/li>\n<\/ul>\n<p data-start=\"4811\" data-end=\"4880\">\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<hr data-start=\"4882\" data-end=\"4885\" \/>\n<h1 data-section-id=\"qpvq47\" data-start=\"4887\" data-end=\"4897\">\u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc<\/h1>\n<p data-start=\"4899\" data-end=\"5249\">\u0648\u06cc\u0698\u06af\u06cc <code data-start=\"4905\" data-end=\"4919\">border-image<\/code> \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0647\u200c\u062c\u0627\u06cc \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06cc\u0627 \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0638\u0627\u0647\u0631 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\u200c\u062a\u0631\u06cc \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0633\u0627\u06cc\u062a \u0628\u062f\u0647\u06cc\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u0622\u0646 \u0628\u0627 <code data-start=\"5061\" data-end=\"5078\">linear-gradient<\/code>\u060c <code data-start=\"5080\" data-end=\"5097\">radial-gradient<\/code> \u0648 <code data-start=\"5100\" data-end=\"5116\">conic-gradient<\/code> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc \u062c\u0630\u0627\u0628 \u0648 \u0645\u062f\u0631\u0646\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u061b \u0647\u0631\u0686\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0632 <code data-start=\"5188\" data-end=\"5203\">border-radius<\/code> \u0648 <code data-start=\"5206\" data-end=\"5220\">border-image<\/code> \u0647\u0646\u0648\u0632 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<p data-start=\"4899\" data-end=\"5249\">\u0627\u0632 \u0647\u0645\u0631\u0627\u0647\u06cc \u0634\u0645\u0627 \u0628\u0627 <strong><a href=\"https:\/\/parmin.cloud\/\">\u067e\u0627\u0631\u0645\u06cc\u0646 \u06a9\u0644\u0648\u062f<\/a><\/strong> \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u06cc\u0645.<\/p>\n<div style='text-align:center' class='yasr-auto-insert-visitor'><\/div>","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u062a\u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0632 \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc CSS (Borders) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f: border-style border-color border-width \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0638\u0627\u0647\u0631 \u062d\u0627\u0634\u06cc\u0647 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f. \u0627\u0645\u0627 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u200c\u062a\u0631\u06cc \u0646\u06cc\u0632 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062d\u0627\u0634\u06cc\u0647 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u06cc (Gradient Borders) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":6418,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[67,190],"tags":[1162,1164,1160,1163,1161],"class_list":["post-6411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-67","category-programming","tag--border-image-source","tag--border-image--css","tag-----css3","tag-----css","tag--gradient-border--css"],"aioseo_notices":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=6411"}],"version-history":[{"count":2,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6411\/revisions"}],"predecessor-version":[{"id":6419,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6411\/revisions\/6419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/6418"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=6411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=6411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=6411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}