{"id":6397,"date":"2026-06-03T11:28:34","date_gmt":"2026-06-03T07:58:34","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6397"},"modified":"2026-06-03T11:28:34","modified_gmt":"2026-06-03T07:58:34","slug":"%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-css3","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-css3\/","title":{"rendered":"\u0645\u0639\u0631\u0641\u06cc \u0633\u0631\u06cc\u0639 CSS3"},"content":{"rendered":"<p data-start=\"21\" data-end=\"339\">\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u0645\u0627\u0646\u0646\u062f \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u060c \u0628\u0627\u06cc\u062f \u0647\u0645\u0648\u0627\u0631\u0647 \u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0647\u0645\u0631\u0627\u0647 \u0634\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u0627\u0646\u0646\u062f CSS \u0627\u0647\u0645\u06cc\u062a \u0632\u06cc\u0627\u062f\u06cc \u062f\u0627\u0631\u062f. <strong data-start=\"193\" data-end=\"201\">CSS3<\/strong> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 CSS\u060c \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0637\u0631\u0627\u062d\u0627\u0646 \u0648\u0628 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f.<\/p>\n<p data-start=\"341\" data-end=\"562\">\u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0631 CSS3\u060c \u0645\u0627\u0698\u0648\u0644\u0627\u0631 \u0634\u062f\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u062a\u0648\u0633\u0639\u0647 \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0633\u0627\u0632\u06cc \u0622\u0646 \u0627\u0633\u062a. \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u0627 \u06a9\u0647 \u0647\u0631 \u0628\u062e\u0634 \u0627\u0632 CSS3 (\u0645\u0627\u0646\u0646\u062f \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u060c \u0633\u0627\u06cc\u0647\u200c\u0647\u0627\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 &#8230;) \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u0645\u0633\u062a\u0642\u0644 \u062a\u0648\u0633\u0639\u0647 \u067e\u06cc\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062a\u0623\u06cc\u06cc\u062f \u0648 \u0645\u0646\u062a\u0634\u0631 \u0634\u0648\u062f.<\/p>\n<p data-start=\"564\" data-end=\"877\">\u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u0646\u062f \u0648 \u0628\u0647\u062a\u0631 \u0628\u0627 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u062c\u0627\u0645\u0639\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0647\u0645\u0627\u0647\u0646\u06af \u0628\u0627\u0634\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0631\u0627\u062d\u062a\u200c\u062a\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06a9\u0646\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062a\u062f\u0631\u06cc\u062c\u06cc \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0646\u0647 \u06cc\u06a9\u200c\u0628\u0627\u0631\u0647. \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0645\u0634\u06a9\u0644\u0627\u062a \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u06cc\u0646 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0646\u06cc\u0632 \u06a9\u0645\u062a\u0631 \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n<p data-start=\"879\" data-end=\"1023\">\u0627\u06af\u0631 \u0647\u0646\u0648\u0632 \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0637\u0631\u0627\u062d\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0648\u0642\u062a \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u06a9\u0647 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 CSS3 \u0622\u0634\u0646\u0627 \u0634\u0648\u06cc\u062f \u0648 \u0637\u0631\u0627\u062d\u06cc\u200c\u0647\u0627\u06cc \u062c\u0630\u0627\u0628\u200c\u062a\u0631 \u0648 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\u200c\u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<hr data-start=\"1025\" data-end=\"1028\" \/>\n<h2 data-section-id=\"qgtgq5\" data-start=\"1030\" data-end=\"1066\">Transition (\u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u0646\u0631\u0645)<\/h2>\n<p data-start=\"1068\" data-end=\"1224\">\u0633\u0627\u0644\u200c\u0647\u0627 \u0637\u0631\u0627\u062d\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u0627\u0646\u062a\u0642\u0627\u0644\u06cc \u0628\u06cc\u0646 \u0639\u0646\u0627\u0635\u0631 \u0645\u062c\u0628\u0648\u0631 \u0628\u0648\u062f\u0646\u062f \u0627\u0632 Adobe Flash \u06cc\u0627 JavaScript \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f. \u0627\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 CSS3 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p data-start=\"1226\" data-end=\"1394\">\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <strong data-start=\"1240\" data-end=\"1255\">Transitions<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0646\u0631\u0645 \u0648 \u0631\u0648\u0627\u0646\u06cc \u0631\u0627 \u0631\u0648\u06cc \u0639\u0646\u0627\u0635\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u061b \u0645\u062b\u0644\u0627\u064b \u0647\u0646\u06af\u0627\u0645 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0646 \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc \u06cc\u06a9 \u062f\u06a9\u0645\u0647\u060c \u0631\u0646\u06af \u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0622\u0646 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062a\u062f\u0631\u06cc\u062c\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f.<\/p>\n<p data-start=\"1396\" data-end=\"1431\">\u062f\u0648 \u0631\u0648\u0634 \u0627\u0635\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<ul data-start=\"1433\" data-end=\"1529\">\n<li data-section-id=\"hcnoe5\" data-start=\"1433\" data-end=\"1464\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc <code data-start=\"1452\" data-end=\"1464\">transition<\/code><\/li>\n<li data-section-id=\"1y1irhd\" data-start=\"1465\" data-end=\"1529\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0627\u0646\u0648\u0646 <code data-start=\"1484\" data-end=\"1496\">@keyframes<\/code> \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u200c\u062a\u0631<\/li>\n<\/ul>\n<p data-start=\"1531\" data-end=\"1546\">\u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u06cc\u0646 \u0631\u0648\u0634:<\/p>\n<ul data-start=\"1548\" data-end=\"1634\">\n<li data-section-id=\"10sf3yw\" data-start=\"1548\" data-end=\"1565\">\u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0633\u0627\u062f\u0647\u200c\u062a\u0631<\/li>\n<li data-section-id=\"12c370y\" data-start=\"1566\" data-end=\"1578\">\u0633\u0631\u0639\u062a \u0628\u06cc\u0634\u062a\u0631<\/li>\n<li data-section-id=\"mk7sa2\" data-start=\"1579\" data-end=\"1596\">\u0645\u0635\u0631\u0641 \u0645\u0646\u0627\u0628\u0639 \u06a9\u0645\u062a\u0631<\/li>\n<li data-section-id=\"z2m1c7\" data-start=\"1597\" data-end=\"1634\">\u0639\u062f\u0645 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0641\u0632\u0648\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Flash<\/li>\n<\/ul>\n<hr data-start=\"1636\" data-end=\"1639\" \/>\n<h2 data-section-id=\"1a855ae\" data-start=\"1641\" data-end=\"1666\">Gradients (\u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u200c\u0647\u0627)<\/h2>\n<p data-start=\"1668\" data-end=\"1806\">\u0642\u0628\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u06cc \u0628\u0627\u06cc\u062f \u0633\u0627\u0639\u062a\u200c\u0647\u0627 \u062f\u0631 \u0641\u062a\u0648\u0634\u0627\u067e \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0631\u062f\u06cc\u062f \u0648 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0645\u062e\u062a\u0644\u0641 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0631\u062f\u06cc\u062f. \u0627\u0645\u0627 CSS3 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0631\u0627 \u062d\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p data-start=\"1808\" data-end=\"1898\">\u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u200c\u0647\u0627\u06cc CSS \u0627\u0645\u06a9\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u0632\u06cc\u0628\u0627 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0635\u0648\u06cc\u0631 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p data-start=\"1900\" data-end=\"1917\">\u0627\u0646\u0648\u0627\u0639 \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u200c\u0647\u0627:<\/p>\n<ul data-start=\"1919\" data-end=\"2005\">\n<li data-section-id=\"heguiv\" data-start=\"1919\" data-end=\"1942\">Linear Gradient (\u062e\u0637\u06cc)<\/li>\n<li data-section-id=\"1elxyh\" data-start=\"1943\" data-end=\"1971\">Radial Gradient (\u062f\u0627\u06cc\u0631\u0647\u200c\u0627\u06cc)<\/li>\n<li data-section-id=\"1oiuktq\" data-start=\"1972\" data-end=\"2005\">Repeating Gradient (\u062a\u06a9\u0631\u0627\u0631\u0634\u0648\u0646\u062f\u0647)<\/li>\n<\/ul>\n<p data-start=\"2007\" data-end=\"2013\">\u0645\u0632\u0627\u06cc\u0627:<\/p>\n<ul data-start=\"2015\" data-end=\"2094\">\n<li data-section-id=\"1d41ur3\" data-start=\"2015\" data-end=\"2031\">\u062d\u062c\u0645 \u06a9\u0645\u062a\u0631 \u0635\u0641\u062d\u0627\u062a<\/li>\n<li data-section-id=\"1xgx22v\" data-start=\"2032\" data-end=\"2061\">\u06a9\u06cc\u0641\u06cc\u062a \u0628\u0647\u062a\u0631 \u062f\u0631 \u0647\u0645\u0647 \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627<\/li>\n<li data-section-id=\"1gmp16i\" data-start=\"2062\" data-end=\"2094\">\u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0627\u0644\u0627 \u0628\u0627 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646<\/li>\n<\/ul>\n<hr data-start=\"2096\" data-end=\"2099\" \/>\n<h2 data-section-id=\"lvv6g3\" data-start=\"2101\" data-end=\"2137\">3D Transforms (\u062a\u0628\u062f\u06cc\u0644\u200c\u0647\u0627\u06cc \u0633\u0647\u200c\u0628\u0639\u062f\u06cc)<\/h2>\n<p data-start=\"2139\" data-end=\"2196\">CSS3 \u0627\u0645\u06a9\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u0633\u0647\u200c\u0628\u0639\u062f\u06cc \u062c\u0630\u0627\u0628 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p data-start=\"2198\" data-end=\"2229\">\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<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\">transform<\/span>: <span class=\"\u037cl\">rotateX<\/span>();\r\n<span class=\"\u037co\">transform<\/span>: <span class=\"\u037cl\">rotateY<\/span>();\r\n<span class=\"\u037co\">transform<\/span>: <span class=\"\u037cl\">perspective<\/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=\"2313\" data-end=\"2391\">\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0628\u0686\u0631\u062e\u0627\u0646\u06cc\u062f\u060c \u0632\u0627\u0648\u06cc\u0647 \u062f\u0647\u06cc\u062f \u0648 \u062c\u0644\u0648\u0647\u200c\u0647\u0627\u06cc \u0633\u0647\u200c\u0628\u0639\u062f\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"2393\" data-end=\"2409\">\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0631\u0627\u06cc:<\/p>\n<ul data-start=\"2411\" data-end=\"2492\">\n<li data-section-id=\"1hhd7ii\" data-start=\"2411\" data-end=\"2436\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627 (Portfolio)<\/li>\n<li data-section-id=\"phw8h0\" data-start=\"2437\" data-end=\"2454\">\u06a9\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc<\/li>\n<li data-section-id=\"1wficok\" data-start=\"2455\" data-end=\"2469\">\u06af\u0627\u0644\u0631\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631<\/li>\n<li data-section-id=\"1nm9fme\" data-start=\"2470\" data-end=\"2492\">\u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646<\/li>\n<\/ul>\n<p data-start=\"2494\" data-end=\"2512\">\u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a.<\/p>\n<hr data-start=\"2514\" data-end=\"2517\" \/>\n<h2 data-section-id=\"1kpcqc5\" data-start=\"2519\" data-end=\"2550\">Border Radius (\u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u062f)<\/h2>\n<p data-start=\"2552\" data-end=\"2612\">\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u062d\u0628\u0648\u0628\u200c\u062a\u0631\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc CSS3 \u0648\u06cc\u0698\u06af\u06cc <code data-start=\"2592\" data-end=\"2607\">border-radius<\/code> \u0627\u0633\u062a.<\/p>\n<p data-start=\"2614\" data-end=\"2747\">\u0642\u0628\u0644 \u0627\u0632 CSS3\u060c \u06af\u0631\u062f \u06a9\u0631\u062f\u0646 \u06af\u0648\u0634\u0647\u200c\u0647\u0627 \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06cc\u0627 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0648\u062f. \u0627\u06a9\u0646\u0648\u0646 \u062a\u0646\u0647\u0627 \u0628\u0627 \u06cc\u06a9 \u062e\u0637 \u06a9\u062f \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f.<\/p>\n<p data-start=\"2749\" data-end=\"2754\">\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\">box<\/span> {\r\n  border: <span class=\"\u037cj\">2<\/span><span class=\"\u037cg\">px<\/span> <span class=\"\u037cj\">solid<\/span> <span class=\"\u037cj\">orange<\/span>;\r\n  border-radius: <span class=\"\u037cj\">25<\/span><span class=\"\u037cg\">px<\/span>;\r\n  width: <span class=\"\u037cj\">100<\/span><span class=\"\u037cg\">px<\/span>;\r\n  padding: <span class=\"\u037cj\">10<\/span><span class=\"\u037cg\">px<\/span>;\r\n  text-align: <span class=\"\u037cj\">center<\/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=\"2883\" data-end=\"2888\">HTML:<\/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>Submit<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=\"2933\" data-end=\"2970\">\u0646\u062a\u06cc\u062c\u0647: \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0628\u0627 \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u0646\u0631\u0645 \u0648 \u06af\u0631\u062f.<\/p>\n<hr data-start=\"2972\" data-end=\"2975\" \/>\n<h2 data-section-id=\"575grr\" data-start=\"2977\" data-end=\"3022\">Border Image (\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0631\u0627\u06cc \u062d\u0627\u0634\u06cc\u0647)<\/h2>\n<p data-start=\"3024\" data-end=\"3086\">\u06af\u0627\u0647\u06cc \u062d\u0627\u0634\u06cc\u0647\u200c\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u06a9\u0627\u0641\u06cc \u0646\u06cc\u0633\u062a\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0637\u0631\u0627\u062d\u06cc\u200c\u0647\u0627\u06cc \u062e\u0627\u0635 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<p data-start=\"3088\" data-end=\"3174\">\u0648\u06cc\u0698\u06af\u06cc <code data-start=\"3094\" data-end=\"3108\">border-image<\/code> \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062d\u0627\u0634\u06cc\u0647 \u0639\u0646\u0635\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"3176\" data-end=\"3182\">\u0645\u0632\u0627\u06cc\u0627:<\/p>\n<ul data-start=\"3184\" data-end=\"3259\">\n<li data-section-id=\"16ukkba\" data-start=\"3184\" data-end=\"3202\">\u0637\u0631\u0627\u062d\u06cc \u062e\u0644\u0627\u0642\u0627\u0646\u0647\u200c\u062a\u0631<\/li>\n<li data-section-id=\"1az556h\" data-start=\"3203\" data-end=\"3223\">\u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u06cc \u0628\u06cc\u0634\u062a\u0631<\/li>\n<li data-section-id=\"106ivf7\" data-start=\"3224\" data-end=\"3259\">\u06a9\u0627\u0647\u0634 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0636\u0627\u0641\u06cc \u062f\u0631 \u0635\u0641\u062d\u0647<\/li>\n<\/ul>\n<hr data-start=\"3261\" data-end=\"3264\" \/>\n<h2 data-section-id=\"vmj5g1\" data-start=\"3266\" data-end=\"3292\">Web Fonts (\u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0648\u0628)<\/h2>\n<p data-start=\"3294\" data-end=\"3426\">\u062f\u0631 \u06af\u0630\u0634\u062a\u0647 \u0637\u0631\u0627\u062d\u0627\u0646 \u0645\u062c\u0628\u0648\u0631 \u0628\u0648\u062f\u0646\u062f \u0641\u0642\u0637 \u0627\u0632 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0627\u0635\u0637\u0644\u0627\u062d\u0627\u064b \u00ab\u0648\u0628\u200c\u0633\u06cc\u0641\u00bb \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f\u061b \u0632\u06cc\u0631\u0627 \u0627\u062d\u062a\u0645\u0627\u0644 \u062f\u0627\u0634\u062a \u0641\u0648\u0646\u062a \u0645\u0648\u0631\u062f\u0646\u0638\u0631 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0646\u0635\u0628 \u0646\u0628\u0627\u0634\u062f.<\/p>\n<p data-start=\"3428\" data-end=\"3487\">CSS3 \u0628\u0627 \u0645\u0639\u0631\u0641\u06cc \u0642\u0627\u0646\u0648\u0646 <code data-start=\"3448\" data-end=\"3460\">@font-face<\/code> \u0627\u06cc\u0646 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0628\u0631\u062f.<\/p>\n<p data-start=\"3489\" data-end=\"3525\">\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f:<\/p>\n<ul data-start=\"3527\" data-end=\"3565\">\n<li data-section-id=\"1an9ncx\" data-start=\"3527\" data-end=\"3541\">Google Fonts<\/li>\n<li data-section-id=\"xfi2cq\" data-start=\"3542\" data-end=\"3565\">Adobe Fonts (Typekit)<\/li>\n<\/ul>\n<p data-start=\"3567\" data-end=\"3628\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0647\u0631 \u0641\u0648\u0646\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"3630\" data-end=\"3636\">\u0646\u0645\u0648\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=\"\u037cg\">@font-face<\/span> {\r\n  font-family: <span class=\"\u037ck\">\"MyFont\"<\/span>;\r\n  src: <span class=\"\u037cj\">url<\/span>(<span class=\"\u037ck\">\"myfont.woff\"<\/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<hr data-start=\"3717\" data-end=\"3720\" \/>\n<h2 data-section-id=\"1vb2gih\" data-start=\"3722\" data-end=\"3754\">CSS Columns (\u0633\u062a\u0648\u0646\u200c\u0628\u0646\u062f\u06cc \u0645\u062d\u062a\u0648\u0627)<\/h2>\n<p data-start=\"3756\" data-end=\"3860\">\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u06cc\u062f \u0645\u062a\u0646\u06cc \u0631\u0627 \u062f\u0631 \u0686\u0646\u062f \u0633\u062a\u0648\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f\u060c \u0642\u0628\u0644\u0627\u064b \u0645\u062c\u0628\u0648\u0631 \u0628\u0648\u062f\u06cc\u062f \u0627\u0632 \u062c\u062f\u0648\u0644\u200c\u0647\u0627 \u06cc\u0627 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p data-start=\"3862\" data-end=\"3914\">\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc <code data-start=\"3877\" data-end=\"3886\">columns<\/code> \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p data-start=\"3916\" data-end=\"3921\">\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\">article<\/span> {\r\n  columns: <span class=\"\u037cj\">3<\/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=\"3962\" data-end=\"3977\">\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc:<\/p>\n<ul data-start=\"3979\" data-end=\"4015\">\n<li data-section-id=\"1jkuhgh\" data-start=\"3979\" data-end=\"3987\">\u0645\u0642\u0627\u0644\u0627\u062a<\/li>\n<li data-section-id=\"1rjbglh\" data-start=\"3988\" data-end=\"4002\">\u0645\u062c\u0644\u0627\u062a \u0622\u0646\u0644\u0627\u06cc\u0646<\/li>\n<li data-section-id=\"1sokhtz\" data-start=\"4003\" data-end=\"4015\">\u0635\u0641\u062d\u0627\u062a \u062e\u0628\u0631\u06cc<\/li>\n<\/ul>\n<p data-start=\"4017\" data-end=\"4032\">\u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<hr data-start=\"4034\" data-end=\"4037\" \/>\n<h2 data-section-id=\"swdlal\" data-start=\"4039\" data-end=\"4079\">Selectors \u062c\u062f\u06cc\u062f (\u0627\u0646\u062a\u062e\u0627\u0628\u200c\u06af\u0631\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647)<\/h2>\n<p data-start=\"4081\" data-end=\"4146\">\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a\u200c\u0647\u0627\u06cc CSS3\u060c \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0646 \u0627\u0646\u062a\u062e\u0627\u0628\u200c\u06af\u0631\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a.<\/p>\n<p data-start=\"4148\" data-end=\"4291\">\u062f\u0631 CSS2 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u0628\u0627\u06cc\u062f \u0627\u0632 <code data-start=\"4188\" data-end=\"4192\">id<\/code> \u0648 <code data-start=\"4195\" data-end=\"4202\">class<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0631\u062f\u06cc\u0645\u060c \u0627\u0645\u0627 CSS3 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0646\u0627\u0635\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p data-start=\"4293\" data-end=\"4298\">\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\">input<\/span>[<span class=\"\u037cn\">type<\/span><span class=\"\u037cg\">=<\/span><span class=\"\u037ck\">\"text\"<\/span>] {\r\n  border: <span class=\"\u037cj\">1<\/span><span class=\"\u037cg\">px<\/span> <span class=\"\u037cj\">solid<\/span> #ccc;\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=\"4361\" data-end=\"4364\">\u06cc\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\">a<\/span>[<span class=\"\u037cn\">href<\/span><span class=\"\u037cg\">^=<\/span><span class=\"\u037ck\">\"https\"<\/span>] {\r\n  color: <span class=\"\u037cj\">green<\/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=\"4415\" data-end=\"4486\">\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u062f\u0647\u0627\u06cc CSS \u062a\u0645\u06cc\u0632\u062a\u0631\u060c \u06a9\u0648\u062a\u0627\u0647\u200c\u062a\u0631 \u0648 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631\u062a\u0631 \u0634\u0648\u0646\u062f.<\/p>\n<hr data-start=\"4488\" data-end=\"4491\" \/>\n<h2 data-section-id=\"530oc4\" data-start=\"4493\" data-end=\"4504\">\u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc<\/h2>\n<p data-start=\"4506\" data-end=\"4561\">CSS3 \u062a\u062d\u0648\u0644 \u0628\u0632\u0631\u06af\u06cc \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f \u0648 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a\u06cc \u0645\u0627\u0646\u0646\u062f:<\/p>\n<ul data-start=\"4563\" data-end=\"4686\">\n<li data-section-id=\"1n79cdj\" data-start=\"4563\" data-end=\"4575\">Transition<\/li>\n<li data-section-id=\"8wggla\" data-start=\"4576\" data-end=\"4587\">Animation<\/li>\n<li data-section-id=\"9bsfe6\" data-start=\"4588\" data-end=\"4598\">Gradient<\/li>\n<li data-section-id=\"d8z80j\" data-start=\"4599\" data-end=\"4613\">3D Transform<\/li>\n<li data-section-id=\"17g6qjg\" data-start=\"4614\" data-end=\"4629\">Border Radius<\/li>\n<li data-section-id=\"5bp7er\" data-start=\"4630\" data-end=\"4644\">Border Image<\/li>\n<li data-section-id=\"16oon4o\" data-start=\"4645\" data-end=\"4656\">Web Fonts<\/li>\n<li data-section-id=\"5wk9d9\" data-start=\"4657\" data-end=\"4666\">Columns<\/li>\n<li data-section-id=\"1mugc5\" data-start=\"4667\" data-end=\"4686\">Selectors \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/li>\n<\/ul>\n<p data-start=\"4688\" data-end=\"4903\" data-is-last-node=\"\" data-is-only-node=\"\">\u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627 \u0628\u0627\u0639\u062b \u0634\u062f\u0647\u200c\u0627\u0646\u062f \u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646\u060c \u0632\u06cc\u0628\u0627\u062a\u0631\u060c \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0648 \u06a9\u0645\u200c\u062d\u062c\u0645\u200c\u062a\u0631 \u0627\u0632 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0647\u0631 \u0637\u0631\u0627\u062d \u06cc\u0627 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\u060c \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc CSS3 \u06cc\u06a9 \u0645\u0647\u0627\u0631\u062a \u0636\u0631\u0648\u0631\u06cc \u0645\u062d\u0633\u0648\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p data-start=\"4688\" data-end=\"4903\" data-is-last-node=\"\" data-is-only-node=\"\">\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>\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u0645\u0627\u0646\u0646\u062f \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062d\u0648\u0632\u0647\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u060c \u0628\u0627\u06cc\u062f \u0647\u0645\u0648\u0627\u0631\u0647 \u0628\u0627 \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0647\u0645\u0631\u0627\u0647 \u0634\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u0627\u0646\u0646\u062f CSS \u0627\u0647\u0645\u06cc\u062a \u0632\u06cc\u0627\u062f\u06cc \u062f\u0627\u0631\u062f. CSS3 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 CSS\u060c \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u0637\u0631\u0627\u062d\u0627\u0646 \u0648\u0628 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":6398,"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":[1144,1141,1140,1143,1142],"class_list":["post-6397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-67","category-programming","tag--css3","tag------css3","tag-------css3","tag----css3","tag---css3---"],"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\/6397","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=6397"}],"version-history":[{"count":2,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6397\/revisions"}],"predecessor-version":[{"id":6401,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/6397\/revisions\/6401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/6398"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=6397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=6397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=6397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}