CSS ﺯﺮﻣ ﺽﺮﻋ


فهرست مطالب

    نمایش فهرست مطالب


CSS ﺯﺮﻣ ﺽﺮﻋ

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﺽﺮﻋ class="w3-codespan">b

ﺩﺮﮐ ﻢﯿﻈﻨﺗ ﻥﺁ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺎﯾ (ﻩﺮﯿﻏ ﻭ px، pt، cm، em ﺭﺩ) ﺹﺎﺧ ﻩﺯﺍﺪﻧﺍ ﮏﯾ ﻥﺍﻮﻨﻋ ﻪ

ﻝﺎﺜﻣ

:ﻪﯿﺷﺎﺣ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﺽﺮﻋ ﺶﯾﺎﻤﻧ

p.one
{
   
border-style: solid;
   
border-width: 5px;
}

p.two
{
   
border-style: solid;
  border-width: medium;
}
p.three
{
   
border-style: dotted;
  border-width: 2px;
}

p.four
{
   
border-style: dotted;
    border-width: thick;
}

:ﻪﺠﯿﺘﻧ

5px border-width
medium border-width
2px border-width
thick border-width

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>



ﺹﺎﺧ ﯽﺒﻧﺎﺟ ﯼﺎﻨﻬﭘ

class="w3-codespan">ﺯﺮﻣ ﺽﺮﻋ

ﻝﺎﺜﻣ

 p.one {
  border-style: solid;
  border-width: 5px 20px; /* 
  5px top and bottom, 20px on the sides */
}
p.two {
  border-style: 
  solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the 
  sides */
}
  
p.three {
  border-style: solid;
  border-width: 25px 10px 
  4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>

</body>
</html>