CSS Outline Properties

فهرست مطالب

.ﺖﺳﺍ ﻩﺪﺷ ﻩﺪﯿﺸﮐ ﺮﺼﻨﻋ ﺯﺮﻣ ﺯﺍ ﺝﺭﺎﺧ ﻪﮐ ﺖﺳﺍ ﯽﻄﺧ ﯽﻠﮐ ﺡﺮﻃ

This element has a black border and a green outline with a width of 10px.

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

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

CSS ﯽﻠﮐ ﺡﺮﻃ

.ﺩﻮﺷ "ﺕﻭﺎﻔﺘﻣ" ﺮﺼﻨﻋ ﺎﺗ ﺩﻮﺷ ﯽﻣ ﻩﺪﯿﺸﮐ ﺎﻫﺯﺮﻣ ﺯﺍ ﺝﺭﺎﺧ ،ﺮﺻﺎﻨﻋ ﻑﺍﺮﻃﺍ ﺭﺩ ﻪﮐ ﺖﺳﺍ ﯽﻄﺧ ﯽﻠ

CSS ﺖﺳﺍ ﺮﯾﺯ ﯽﻠﮐ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﯼﺍﺭﺍﺩ:

outline-style
outline-color
outline-width
outline-offset
outline

ﻪﺟﻮﺗ: ﺖﺳﺍ ﯽﻠﮐ ﺡﺮﻃ ،ﺯﺮﻣ ﻑﻼﺧ ﺮﺑ !ﺖﺳﺍ ﺕﻭﺎﻔﺘﻣ ﺎﻫ ﻪﯿﺷﺎﺣ ﺎﺑ ﯽﻠﮐ ﺡﺮﻃ

CSS ﯽﻠﮐ ﺡﺮﻃ ﮏﺒﺳ

،ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯽﻠﮐ ﺡﺮﻃ ﮏﺒﺳ outline-style ﯽﮔﮋ

dotted: ﺪﻨﮐﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﺭﺍﺩﻪﻄﻘﻧ ﯽﻠﮐ ﺡﺮﻃ ﮏﯾ -
dashed: ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﻩﺩﺭﻮﺧ ﻂﺧ ﯽﻠﮐ ﺡﺮﻃ -
solid: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯽﻠﮐ ﺡﺮﻃ ﮏﯾ -
double: ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﻪﻧﺎﮔﻭﺩ ﯽﻠﮐ ﺡﺮﻃ ﮏﯾ -
groove: ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺭﺍﺩﺭﺎﯿﺷ ﯽﻠﮐ ﺡﺮﻃ ﮏﯾ -
ridge: ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﻩﺪﻣﺁﺮﺑ ﯼﺪﻌﺑ ﻪﺳ ﯽﻠﮐ ﺡﺮﻃ ﮏﯾ -
inset: ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ 3 ﯽﻧﻭﺭﺩ ﯽﻠﮐ ﺡﺮﻃ ﮏﯾ -
outset: ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﻪﯿﻟﻭﺍ ﺡﺮﻃ ﮏﯾ -
none: ﺪﻨﮐ ﯽﻤﻧ ﻒﯾﺮﻌﺗ ﺍﺭ ﯽﻠﮐ ﺡﺮﻃ ﭻﯿﻫ -
hidden: ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﻥﺎﻬﻨﭘ ﯽﻠﮐ ﺡﺮﻃ ﮏﯾ -

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ outline-style ﻒﻠﺘﺨﻣ ﺮﯾﺩﺎﻘﻣ ﺮﯾ

ﻝﺎﺜﻣ

:ﯽﻠﮐ ﺡﺮﻃ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﮏﺒﺳ ﺶﯾﺎﻤﻧ

 p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

:ﻪﺠﯿﺘﻧ

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

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

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

ﻪﺟﻮﺗ: ﻪﮑﻨﯾﺍ ﺮﮕﻣ ﺖﺷﺍﺩ ﺪﻫﺍﻮﺨﻧ ﯼﺮﺛﺍ ﭻﯿﻫ (ﺖﺧﻮﻣﺁ ﺪﯿﻫﺍﻮﺧ ﺎﻬﻧﺁ ﺩﺭﻮﻣ ﺭﺩ ﺮﺘﺸﯿﺑ ﯼ