{"id":4107,"date":"2014-05-28T00:53:47","date_gmt":"2014-05-27T21:53:47","guid":{"rendered":"http:\/\/www.fwasl.com\/?p=4107"},"modified":"2025-09-06T15:06:42","modified_gmt":"2025-09-06T12:06:42","slug":"12-little-known-css-facts-part-1","status":"publish","type":"post","link":"https:\/\/tjarb.com\/fwasl\/12-little-known-css-facts-part-1\/","title":{"rendered":"6 \u062d\u0642\u0627\u0626\u0642 \u063a\u064a\u0631 \u0645\u0639\u0631\u0648\u0641\u0629 \u0639\u0646 CSS"},"content":{"rendered":"<p>\t\t\t\t<![CDATA[css \u0644\u063a\u0629 \u063a\u064a\u0631 \u0645\u0639\u0642\u062f\u0629. \u0648\u0644\u0643\u0646 \u062d\u062a\u064a \u0644\u0648 \u0643\u0646\u062a \u062a\u0633\u062a\u062e\u062f\u0645 CSS \u0644\u0633\u0646\u0648\u0627\u062a \u0639\u062f\u064a\u062f\u0629, \u00a0\u0631\u0628\u0645\u0627 \u0644\u0627 \u064a\u0632\u0627\u0644 \u064a\u0645\u0631 \u0639\u0644\u064a\u0643 \u0623\u0634\u064a\u0627\u0621 \u062c\u062f\u064a\u062f\u0629 \u0640\u0640\u0640 \u062e\u0635\u0627\u0626\u0635 \u0644\u0645 \u062a\u0633\u062a\u062e\u062f\u0645\u0647\u0627 \u0645\u0646 \u0642\u0628\u0644 , \u0642\u064a\u0645 \u0644\u0645 \u062a\u0639\u064a\u0631\u0647\u0627 \u0627\u0644\u0627\u0646\u062a\u0628\u0627\u0647 \u0623\u0648 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0648\u062a\u0641\u0627\u0635\u064a\u0644 \u0644\u0645 \u062a\u0639\u0631\u0641 \u0639\u0646\u0647\u0627 \u0634\u064a\u0626.\n\n\u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u0633\u0646\u0633\u062a\u0639\u0631\u0636 \u0645\u0639\u0627 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u062d\u0642\u0627\u0626\u0642 \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u063a\u064a\u0631 \u0645\u0639\u0631\u0648\u0641\u0629 \u0639\u0646 CSS.\n\n\u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0623\u0648\u0644 6 \u062d\u0642\u0627\u0626\u0642 \u063a\u064a\u0631 \u0645\u0639\u0631\u0648\u0641\u0629 \u0639\u0646 CSS . \u0627\u0646\u062a\u0638\u0631\u0648\u0646\u0627 \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u062b\u0627\u0646\u064a \u06486 \u062d\u0642\u0627\u0626\u0642 \u0627\u062e\u0631\u064a!\n\n\n<h2>1. \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u0644\u0648\u0646 \u0644\u064a\u0633\u062a \u0641\u0642\u0637 \u0644\u0644\u0646\u0635 &#8211; Color<\/h2>\n\n\n\u062f\u0639\u0648\u0646\u0627 \u0646\u0628\u062f\u0623 \u0628\u0623\u0633\u0647\u0644 \u0634\u064a\u0626. \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u0644\u0648\u0646 &#8220;Color&#8221;. \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u0644\u0648\u0646 \u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647\u0627 \u0639\u0644\u064a \u0646\u0637\u0627\u0642 \u0648\u0627\u0633\u0639 \u0645\u0646 \u0642\u0628\u0644 \u0643\u0644 \u0645\u0637\u0648\u0631\u064a CSS. \u0627\u0644\u0628\u0639\u0636 \u0645\u0646\u0643\u0645 \u0642\u062f \u064a\u0643\u0648\u0646 \u0642\u0644\u064a\u0644 \u0627\u0644\u062e\u0628\u0631\u0629 \u0642\u062f \u0644\u0627 \u064a\u062f\u0631\u0643 \u0630\u0644\u0643 , \u0623\u0646\u0647 \u0644\u0627 \u064a\u0639\u0631\u0641 \u0633\u0648\u064a \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u0644\u0648\u0646 \u0644\u0644\u0646\u0635.\n\u0634\u0627\u0647\u062f \u0627\u0644\u0645\u062b\u0627\u0644 \u0641\u064a \u0627\u0644\u0623\u0633\u0641\u0644:\n\n[codepen_embed height=&#8221;368&#8243; theme_id=&#8221;4025&#8243; slug_hash=&#8221;KurCG&#8221; default_tab=&#8221;result&#8221;]See the Pen &lt;a href=&#8217;http:\/\/codepen.io\/fwasl\/pen\/KurCG\/&#8217;&gt;KurCG&lt;\/a&gt; by mohamed maher (&lt;a href=&#8217;http:\/\/codepen.io\/fwasl&#8217;&gt;@fwasl&lt;\/a&gt;) on &lt;a href=&#8217;http:\/\/codepen.io&#8217;&gt;CodePen&lt;\/a&gt;.[\/codepen_embed]\n\n\u0646\u0644\u0627\u062d\u0638 \u0641\u064a CSS, \u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0627\u0635\u064a\u0629 \u0648\u0627\u062d\u062f\u0629 \u0644\u0644\u0648\u0646, \u0641\u064a \u0639\u0646\u0635\u0631 body, \u0648\u062a\u0639\u064a\u064a\u0646 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0635\u0641\u0631 \u0644\u0643\u0644 \u0634\u064a\u0626 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629 , \u0628\u0645\u0627 \u0641\u064a \u0630\u0644\u0643:\n\n\n<ul>\n\t\n\n<li>\u0627\u0644\u0646\u0635 \u0627\u0644\u0628\u062f\u064a\u0644 \u0644\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u0641\u0642\u0648\u062f\u0629 &#8220;alt &#8220;<\/li>\n\n\n\t\n\n<li>\u0627\u0644\u062d\u062f\u0648\u062f \u0639\u0644\u064a \u0639\u0646\u0635\u0631 \u0627\u0644\u0642\u0627\u0626\u0645\u0629&#8221;border &#8220;<\/li>\n\n\n\t\n\n<li>\u0639\u0644\u0627\u0645\u0629 (\u0646\u0642\u0637\u0629) \u0639\u0644\u064a \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u063a\u064a\u0631 \u0645\u0631\u0642\u0645\u0629&#8221;ul&#8221;<\/li>\n\n\n\t\n\n<li>\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u0631\u0642\u0645 \u0641\u064a \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0631\u062a\u0628\u0629 &#8220;ol&#8221;<\/li>\n\n\n\t\n\n<li>\u0639\u0646\u0635\u0631 hr<\/li>\n\n\n<\/ul>\n\n\n\u0648\u0645\u0646 \u0627\u0644\u0645\u062b\u064a\u0631 \u0644\u0644\u0627\u0647\u062a\u0645\u0627\u0645 \u0639\u0646\u0635\u0631 hr , \u0641\u0647\u0648 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0627 \u0644\u0627 \u064a\u0631\u062b \u062e\u0627\u0635\u064a\u0629 \u0642\u064a\u0645\u0629 \u0627\u0644\u0644\u0648\u0646 , \u0648\u0644\u0643\u0646 \u0643\u0627\u0646 \u0644\u0627 \u0628\u062f \u0645\u0646 \u0627\u062c\u0628\u0627\u0631\u0647 \u0644\u0641\u0639\u0644 \u0630\u0644\u0643 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u00a0border-color: inherit.\n\n\n<h2>2.\u00a0\u062e\u0627\u0635\u064a\u0629 &#8220;visibility&#8221;\u064a\u0645\u0643\u0646 \u062a\u0639\u064a\u064a\u0646\u0647\u0627 \u0625\u0644\u064a \u201ccollapse\u201d<\/h2>\n\n\n\u0631\u0628\u0645\u0627 \u062a\u0643\u0648\u0646 \u0642\u062f \u0642\u0645\u062a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0627\u0635\u064a\u0629 visibility \u00a0\u0643\u062b\u0631\u0627. \u0648\u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0623\u0643\u062b\u0631 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647\u0627 \u0647\u064a visible (\u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631) \u0648\u0642\u064a\u0645\u0629 hidden , \u0648\u0627\u0644\u062a\u064a \u062a\u0642\u0648\u0645 \u0628\u0627\u062e\u0642\u0627\u0621 \u0627\u0644\u0639\u0646\u0635\u0631 \u0641\u064a \u062d\u064a\u0646 \u0627\u0644\u0633\u0645\u0627\u062d \u0644\u0647\u0627 \u0628\u0634\u063a\u0644 \u0645\u0633\u0627\u062d\u0629 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646\u062a \u0645\u0643\u0627\u0646\u0647\u0627 . ( \u0648\u0647\u064a \u0639\u0643\u0633 \u062e\u0627\u0635\u064a\u0629 display: none).\n\n\u0648\u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u062b\u0627\u0644\u062b\u0629 \u0648\u0627\u0644\u0623\u0643\u062b\u0631 \u0623\u0647\u0645\u064a\u0629 \u0644\u062e\u0627\u0635\u064a\u0629 visibility \u0647\u064a collapse. \u0648\u0647\u0630\u0627 \u064a\u0639\u0645\u0644 \u0628\u0646\u0641\u0633 \u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u0627\u062e\u0641\u0627\u0621 \u0644\u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u0633\u062a\u062b\u0646\u0627\u0621 \u0627\u0644\u0635\u0641\u0648\u0641 \u0648\u0627\u0644\u062c\u062f\u0627\u0648\u0644. \u0641\u064a \u062d\u0627\u0644\u0629 \u0647\u0630\u0647 \u0627\u0644\u0639\u0646\u0627\u0635\u0631, \u0642\u064a\u0645\u0629 collapse \u0645\u0646 \u0627\u0644\u0645\u0641\u062a\u0631\u0636 \u0623\u0646 \u062a\u0642\u0648\u0645 \u0628\u0646\u0641\u0633 \u0639\u0645\u0644 display: none, .\n\u0648\u0644\u0643\u0646 \u0644\u0644\u0627\u0633\u0641, \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062a\u064a \u062a\u062a\u0639\u0627\u0645\u0644 \u0628\u0647\u0627 \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0645\u0639 \u0642\u064a\u0645\u0629 collapse \u063a\u064a\u0631 \u0645\u062a\u0634\u0627\u0628\u0647\u0629 . \u0642\u0645 \u0628\u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u062b\u0627\u0644 \u0627\u0644\u062a\u0627\u0644\u064a:\n\n[codepen_embed height=&#8221;368&#8243; theme_id=&#8221;4025&#8243; slug_hash=&#8221;kwmcg&#8221; default_tab=&#8221;result&#8221;]See the Pen &lt;a href=&#8217;http:\/\/codepen.io\/fwasl\/pen\/kwmcg\/&#8217;&gt;kwmcg&lt;\/a&gt; by mohamed maher (&lt;a href=&#8217;http:\/\/codepen.io\/fwasl&#8217;&gt;@fwasl&lt;\/a&gt;) on &lt;a href=&#8217;http:\/\/codepen.io&#8217;&gt;CodePen&lt;\/a&gt;.[\/codepen_embed]\n\n\u0645\u0644\u0627\u062d\u0638\u0627\u062a:\n\n\n<ul>\n\t\n\n<li>\u0641\u064a \u0645\u062a\u0635\u0641\u062d \u0643\u0631\u0648\u0645, \u0644\u0627 \u064a\u0648\u062c\u062f \u0641\u0631\u0642 \u0628\u064a\u0646 \u0627\u0644\u0642\u064a\u0645 collapse, hidden (\u0634\u0627\u0647\u062f \u062a\u0642\u0631\u064a\u0631 \u0627\u0644\u062e\u0637\u0623 \u0648\u0627\u0644\u062a\u0639\u0644\u064a\u0642\u0627\u062a).<\/li>\n\n\n\t\n\n<li>\u0641\u064a \u0645\u062a\u0635\u0641\u062d\u0627\u062a Firefox, Opera, IE11 \u0642\u064a\u0645\u0629 collapse \u062a\u0639\u0645\u0644 \u0643\u0645\u0627 \u064a\u0646\u0628\u063a\u064a : \u062a\u062a\u0645 \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0635\u0641 \u0648\u0627\u0644\u0635\u0641 \u0623\u062f\u0646\u0627\u0647 \u064a\u062a\u062d\u0631\u0643 \u0635\u0639\u0648\u062f\u0627.<\/li>\n\n\n<\/ul>\n\n\n\u0648\u0645\u0646 \u0627\u0644\u0645\u0639\u062a\u0631\u0641 \u0628\u0647, \u0623\u0646 \u0647\u0630\u0647 \u0627\u0644\u0642\u064a\u0645\u0629 \u0646\u0627\u062f\u0631\u0627 \u0645\u0627 \u062a\u0633\u062a\u062e\u062f\u0645 , \u0648\u0644\u0643\u0646 \u062a\u0638\u0644 \u0645\u062a\u0648\u0627\u062c\u062f\u0629, \u0644\u0630\u0627 \u0627\u0630\u0627 \u0644\u0645 \u062a\u0643\u0646 \u062a\u0639\u0631\u0641\u0647\u0627 \u0645\u0646 \u0642\u0628\u0644 , \u0641\u0642\u062f \u0639\u0631\u0641\u062a\u0647\u0627 \u0627\u0644\u0623\u0646 ^_^\n\n\n<h2>\u00a03.\u00a0\u062e\u0627\u0635\u064a\u0629 background \u00a0\u0644\u062f\u064a\u0647\u0627 \u0642\u064a\u0645 \u062c\u062f\u064a\u062f\u0629<\/h2>\n\n\n\u0641\u064a CSS2.1 \u062e\u0627\u0635\u064a\u0629 background \u00a0\u0643\u0627\u0646\u062a \u062a\u062a\u0636\u0645\u0646 5 \u0642\u064a\u0645 \u0640\u0640 (background-color, background-image, background-repeat, background-attachment, \u00a0background-position).\u00a0\u0648\u0644\u0643\u0646 \u0641\u064a CSS3 \u0648\u0645\u0627 \u0628\u0639\u062f\u0647\u0627, \u062a\u0634\u0645\u0644 \u0627\u0644\u0623\u0646 3 \u0642\u064a\u0645 \u062c\u062f\u064a\u062f\u0629, \u0644\u064a\u0635\u0644 \u0645\u062c\u0645\u0648\u0639\u0647\u0645 \u0625\u0644\u064a 8 \u0642\u064a\u0645 \u0648\u0627\u0644\u064a\u0643\u0645 \u0647\u0630\u0647 \u0627\u0644\u0642\u064a\u0645:\n\n\n<pre class=\"toolbar:2 lang:default decode:true\">background: [background-color] [background-image] [background-repeat]\n            [background-attachment] [background-position] \/ [ background-size]\n            [background-origin] [background-clip];\n<\/pre>\n\n\n\u0644\u062f\u064a\u0643 \u062e\u064a\u0627\u0631\u064a\u0646 \u0644\u0627\u0636\u0627\u0641\u0629 &#8220;background-origin&#8221;,&#8221;background-clip&#8221;\n\u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0641\u0627\u0646 \u0627\u0644\u062a\u0631\u0643\u064a\u0628 \u0633\u064a\u0628\u062f\u0648 \u0645\u062b\u0644 \u0647\u0630\u0627:\n\n\n<pre class=\"toolbar:2 lang:default decode:true\">.example {\n  background: aquamarine url(img.png)\n              no-repeat\n              scroll\n              center center \/ 50%\n              content-box content-box;\n}<\/pre>\n\n\n\u0627\u062e\u062a\u0628\u0631\u0647 \u0641\u064a \u0645\u062a\u0635\u0641\u062d\u0643 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0647\u0630\u0627 \u0627\u0644\u0645\u062b\u0627\u0644 :\n\n[codepen_embed height=&#8221;310&#8243; theme_id=&#8221;4025&#8243; slug_hash=&#8221;lznJL&#8221; default_tab=&#8221;result&#8221;]See the Pen &lt;a href=&#8217;http:\/\/codepen.io\/fwasl\/pen\/lznJL\/&#8217;&gt;lznJL&lt;\/a&gt; by mohamed maher (&lt;a href=&#8217;http:\/\/codepen.io\/fwasl&#8217;&gt;@fwasl&lt;\/a&gt;) on &lt;a href=&#8217;http:\/\/codepen.io&#8217;&gt;CodePen&lt;\/a&gt;.[\/codepen_embed]\n\n\n<h2>4.\u00a0\u062e\u0627\u0635\u064a\u0629 clip \u062a\u0639\u0645\u0644 \u0641\u0642\u0637 \u0639\u0644\u064a \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u064a \u062a\u0643\u0648\u0646 \u0628\u062e\u0627\u0635\u064a\u0629 position: absolute<\/h2>\n\n\n\u0631\u0627\u064a\u0646\u0627 \u0633\u0627\u0628\u0642\u0627 clip \u00a0\u0641\u064a \u062e\u0627\u0635\u064a\u0629 background-clip, \u0641\u0647\u064a \u062a\u0628\u062f\u0648 \u0645\u062b\u0644 \u0647\u0630\u0627:\n\n\n<pre class=\"toolbar:2 lang:default decode:true\">.example {\n    clip: rect(110px, 160px, 170px, 60px);\n}<\/pre>\n\n\n\u0647\u0630\u0647 \u0633\u062a\u0641\u0648\u0645 \u0628\u0642\u0635 \u0627\u0644\u0639\u0646\u0635\u0631 \u0641\u064a \u0645\u0648\u0627\u0642\u0639 \u0645\u062d\u062f\u062f\u0629. \u0627\u0644\u062a\u0628\u064a\u0647 \u0627\u0644\u0648\u062d\u064a\u062f \u0623\u0646 \u0627\u0644\u0639\u0646\u0635\u0631 \u064a\u062c\u0628 \u0623\u0646 \u064a\u0627\u062e\u062f \u062e\u0627\u0635\u064a\u0629 position: absolute. \u0644\u0630\u0627 \u064a\u062c\u0628 \u0639\u0644\u064a\u0643 \u0641\u0639\u0644 \u0647\u0630\u0627:\n\n\n<pre class=\"toolbar:2 lang:default decode:true\">.example {\n    position: absolute;\n    clip: rect(110px, 160px, 170px, 60px);\n}<\/pre>\n\n\n\u064a\u0645\u0643\u0646\u0643 \u0623\u0646 \u062a\u0631\u064a \u0643\u064a\u0641 \u064a\u0639\u0645\u0644 &#8220;clip&#8221; \u0641\u064a \u0627\u0644\u0645\u062b\u0627\u0644 \u0641\u064a \u0627\u0644\u0623\u0633\u0641\u0644 \u0639\u0646\u062f\u0645\u0627 \u064a\u0641\u0639\u0644 \u00a0position: absolute:\n\n[codepen_embed height=&#8221;440&#8243; theme_id=&#8221;4025&#8243; slug_hash=&#8221;xglqm&#8221; default_tab=&#8221;result&#8221;]See the Pen &lt;a href=&#8217;http:\/\/codepen.io\/fwasl\/pen\/xglqm\/&#8217;&gt;xglqm&lt;\/a&gt; by mohamed maher (&lt;a href=&#8217;http:\/\/codepen.io\/fwasl&#8217;&gt;@fwasl&lt;\/a&gt;) on &lt;a href=&#8217;http:\/\/codepen.io&#8217;&gt;CodePen&lt;\/a&gt;.[\/codepen_embed]\n\n\n<h2>5.\u00a0\u0627\u0644\u0646\u0633\u0628 \u0627\u0644\u0639\u0645\u0648\u062f\u064a\u0629 \u062a\u062a\u0646\u0627\u0633\u0628 \u0627\u0644\u064a \u0639\u0631\u0636 Container \u0648\u0644\u064a\u0633 \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639.<\/h2>\n\n\n\u0647\u0630\u0647 \u0627\u0644\u062e\u0627\u0635\u064a\u0629 \u0642\u062f \u062a\u0643\u0648\u0646 \u0645\u0631\u0628\u0643\u0629 \u0628\u0639\u0636 \u0627\u0644\u0634\u064a\u0626 \u0641\u064a \u0627\u0644\u0628\u062f\u0627\u064a\u0629. \u0642\u062f \u062a\u0639\u0631\u0641 \u0623\u0646 \u0646\u0633\u0628\u0629 \u0627\u0644\u0639\u0631\u0636 \u062a\u062d\u0633\u0628 \u0639\u0644\u064a \u0623\u0633\u0627\u0633 \u0639\u0631\u0636 \u0627\u0644\u0643\u0648\u0646\u062a\u064a\u0646\u0631, \u0648\u062a\u062d\u0633\u0628 \u0627\u0644\u0646\u0633\u0628\u0629 \u0627\u0639\u062a\u0645\u0627\u062f\u0627 \u0639\u0644\u064a \u062e\u0635\u0627\u0626\u0635 \u0645\u062b\u0644 \u00a0(top and bottom padding ,top and bottom margins) \u00a0\u0648\u062a\u062d\u0633\u0628 \u0623\u064a\u0636\u0627 \u0639\u0644\u064a \u0623\u0633\u0627\u0633 \u0639\u0631\u0636 \u0627\u0644\u0643\u0648\u0646\u062a\u064a\u0646\u0631, \u0628\u062f\u0644\u0627 \u0645\u0646 \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639.\n\n\u0627\u0644\u064a\u0643\u0645 \u0645\u062b\u0627\u0644 \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0628\u0647 \u062d\u062a\u064a \u062a\u062a\u0645\u0643\u0646 \u0645\u0646 \u0631\u0624\u064a\u0629 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0644\u0641\u0647\u0645 \u0623\u0643\u0628\u0631:\n\n[codepen_embed height=&#8221;450&#8243; theme_id=&#8221;4025&#8243; slug_hash=&#8221;gBxGD&#8221; default_tab=&#8221;result&#8221;]See the Pen &lt;a href=&#8217;http:\/\/codepen.io\/fwasl\/pen\/gBxGD\/&#8217;&gt;gBxGD&lt;\/a&gt; by mohamed maher (&lt;a href=&#8217;http:\/\/codepen.io\/fwasl&#8217;&gt;@fwasl&lt;\/a&gt;) on &lt;a href=&#8217;http:\/\/codepen.io&#8217;&gt;CodePen&lt;\/a&gt;.[\/codepen_embed]\n\n\u0644\u0627\u062d\u0638 \u0623\u0646\u0647 \u064a\u0648\u062c\u062f 3 \u0646\u0633\u0628 \u0645\u0626\u0648\u064a\u0629 \u0645\u0639\u0644\u0646\u0629 \u0641\u064a \u0627\u0644\u0645\u0631\u0628\u0639 \u0627\u0644\u062f\u0627\u062e\u0644\u064a (top , bottom, padding).\n\n\n<h2>6.\u00a0\u062e\u0627\u0635\u064a\u0629 border<\/h2>\n\n\n\u0642\u062f \u0642\u0645\u0646\u0627 \u0628\u0641\u0639\u0644 \u0630\u0644\u0643 \u0641\u064a \u0648\u0642\u062a \u0645\u0627:\n\n\n<pre class=\"toolbar:2 lang:default decode:true\">.example {\n  border: solid 1px black;\n}<\/pre>\n\n\n\u062e\u0627\u0635\u064a\u0629 border \u00a0\u0647\u064a \u062e\u0627\u0635\u064a\u0629 \u0645\u062e\u062a\u0635\u0631\u0629 \u0627\u0644\u062a\u064a \u062a\u0642\u0648\u0645 \u0628\u062a\u062d\u062f\u064a\u062f (border-style, border-width, \u00a0border-color) \u0643\u0644 \u0647\u0630\u0627 \u0641\u064a \u0627\u0639\u0644\u0627\u0646 \u0648\u0627\u062d\u062f.\n\n\u0648\u0644\u0643\u0646 \u0644\u0627 \u062a\u0646\u0633\u064a \u0623\u0646 \u0643\u0644 \u0648\u0627\u062d\u062f\u0629 \u0645\u0646 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0647\u064a \u062a\u0645\u062b\u0644 \u062e\u0627\u0635\u064a\u0629 \u0645\u0646\u0641\u0631\u0629 \u0628\u062d\u062f \u0630\u0627\u062a\u0647\u0627. \u0644\u0630\u0627 \u064a\u0645\u0643\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0627\u0635\u064a\u0629 border-width \u00a0\u0648\u062d\u062f\u0647\u0627.\n\n\n<pre class=\"toolbar:2 lang:default decode:true\">.example {\n  border-width: 2px 5px 1px 0;\n}<\/pre>\n\n\n\u0647\u0630\u0627 \u0633\u064a\u0642\u0648\u0645 \u0628\u062a\u062d\u062f\u064a\u062f \u0639\u0631\u0636 \u0645\u062e\u062a\u0644\u0641 \u0644\u0643\u0644 \u0627\u0644\u062d\u062f\u0648\u062f \u0627\u0644\u0623\u0631\u0628\u0639\u0629. \u0648\u064a\u0646\u0637\u0628\u0642 \u0627\u0644\u0634\u064a\u0626 \u0646\u0642\u0633\u0647 \u0639\u0644\u064a ( border-color ,border-style) \u0643\u0645\u0627 \u0647\u0648 \u0645\u0648\u0636\u062d \u0641\u064a \u0627\u0644\u0645\u062b\u0627\u0644 \u0627\u0644\u062a\u0627\u0644\u064a:\n\n[codepen_embed height=&#8221;268&#8243; theme_id=&#8221;4025&#8243; slug_hash=&#8221;DgtdE&#8221; default_tab=&#8221;result&#8221;]See the Pen &lt;a href=&#8217;http:\/\/codepen.io\/fwasl\/pen\/DgtdE\/&#8217;&gt;DgtdE&lt;\/a&gt; by mohamed maher (&lt;a href=&#8217;http:\/\/codepen.io\/fwasl&#8217;&gt;@fwasl&lt;\/a&gt;) on &lt;a href=&#8217;http:\/\/codepen.io&#8217;&gt;CodePen&lt;\/a&gt;.[\/codepen_embed]\n\n\u0628\u0627\u0644\u0627\u0636\u0627\u0641\u0629 \u0627\u0644\u064a \u0630\u0644\u0643, \u0643\u0644 \u0645\u0646 \u0647\u0630\u0647 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u064a\u0645\u0643\u0646 \u062a\u0642\u0633\u064a\u0645\u0647\u0627 \u0623\u0643\u062b\u0631 \u0645\u0646 \u0630\u0644\u0643 \u0643 (border-left-style, border-top-width, border-bottom-color)\u0625\u0644\u062e&#8230;\n\n&nbsp;\n\n\u0643\u0645 \u0645\u0646 \u0647\u0630\u0647 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0648\u062c\u062f\u062a\u0647\u0627 \u062c\u062f\u064a\u062f\u0629 \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u0643\u061f\n\u0647\u0644 \u062a\u0639\u0644\u0645\u062a \u0634\u064a\u0626 \u0645\u0646 \u0647\u0630\u0627 \u0627\u0644\u0645\u0642\u0627\u0644\u061f \u0622\u0645\u0644 \u0630\u0644\u0643 . \u0631\u0628\u0645\u0627 \u0645\u0637\u0648\u0631\u064a CSS\u0627\u0644\u0645\u062d\u062a\u0631\u0642\u064a\u0646 \u064a\u0639\u0631\u0641\u0648\u0627 \u0627\u0644\u0643\u062b\u064a\u0631 \u0645\u0646\u00a0\u0627\u0644\u0646\u0642\u0627\u0637 \u0627\u0644\u0645\u0630\u0643\u0648\u0631\u0629 \u0623\u0639\u0644\u0627\u0647 , \u0625\u0646 \u0644\u0645 \u064a\u0643\u0646 \u0643\u0644\u0647\u0627 . \u0648\u0644\u0643\u0646 \u0639\u0644\u064a \u0627\u0644\u0627\u0631\u062c\u062d \u0623\u0646 \u0627\u0644\u0645\u0628\u062a\u062f\u0627\u064a\u0646 \u0641\u064a CSS \u0633\u064a\u0633\u062a\u0641\u064a\u062f\u0648\u0627 \u0643\u062b\u064a\u0631\u0627 \u0645\u0646 \u0647\u0630\u0627 .\n\n\u0627\u0646\u062a\u0638\u0631\u0648\u0646\u0627 \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u062b\u0627\u0646\u064a \u06486 \u062d\u0642\u0627\u0626\u0642 \u0623\u062e\u0631\u064a\n\n&nbsp;\n\n<a href=\"http:\/\/www.sitepoint.com\/\" target=\"_blank\">\u0627\u0644\u0645\u0635\u062f\u0631<\/a>\n\n&nbsp;]]>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\t\t\t\t<![CDATA[]]>\t\t<\/p>\n","protected":false},"author":5,"featured_media":10918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[44,94,246],"class_list":["post-4107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","tag-css","tag-94","tag-246"],"_links":{"self":[{"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/posts\/4107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/comments?post=4107"}],"version-history":[{"count":1,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/posts\/4107\/revisions"}],"predecessor-version":[{"id":10335,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/posts\/4107\/revisions\/10335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/media\/10918"}],"wp:attachment":[{"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/media?parent=4107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/categories?post=4107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tjarb.com\/fwasl\/wp-json\/wp\/v2\/tags?post=4107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}