CSS ﻪﯿﺷﺎﺣ ﺮﯾﻭﺎﺼﺗ

فهرست مطالب

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

CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.

CSS border-image ﯽﮔﮋﯾﻭ

.ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺮﺼﻨﻋ ﮏﯾ ﻑﺍﺮﻃﺍ ﺭﺩ ﯽﻟﻮﻤﻌﻣ ﻪﯿﺷﺎﺣ ﯼﺎﺟ ﻪﺑ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ ﺍﺭ ﯼﺮﯾﻮﺼﺗ ﻪﮐ ﺪﻫﺩ

:ﺖﺳﺍ ﺶﺨﺑ ﻪﺳ ﯼﺍﺭﺍﺩ ﮏﻠﻣ

  1. ﻪﯿﺷﺎﺣ ﻥﺍﻮﻨﻋ ﻪﺑ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ ﺮﯾﻮﺼﺗ

  2. ﻢﯿﻫﺩ ﺵﺮﺑ ﺍﺭ ﺮﯾﻮﺼﺗ ﺎﺠﮐ

  3. ﺪﻧﻮﺷ ﻩﺪﯿﺸﮐ ﺎﯾ ﺪﻧﻮﺷ ﺭﺍﺮﮑﺗ ﺪﯾﺎﺑ ﯽﻧﺎﯿﻣ ﯼﺎﻫ ﺖﻤﺴﻗ ﺎﯾﺁ ﻪﮐ ﺪﯿﻨﮐ ﺺﺨﺸﻣ

:ﺩﺮﮐ ﻢﯿﻫﺍﻮﺧ ﻩﺩﺎﻔﺘﺳﺍ ("border.png" ﻡﺎﻧ ﻪﺑ) ﺮﯾﺯ ﺮﯾﻮﺼﺗ ﺯﺍ ﺎﻣ

.ﺪﻨﮐ ﯽﻣ ﻢﯿﺴﻘﺗ ﺶﺨﺑ 9 ﻪﺑ ﺍﺭ ﻥﺁ ﻭ ﺩﺮﯿﮔ ﯽﻣ ﺍﺭ ﺮﯾﻮﺼﺗ bord

ﻪﺟﻮﺗ: ﻪﮑﻨﯾﺍ ﯼﺍﺮﺑ border-image

:ﺪﻧﻮﺷﯽﻣ ﺭﺍﺮﮑﺗ ﻪﯿﺷﺎﺣ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﺮﯾﻮﺼﺗ ﯽﻧﺎﯿﻣ ﯼﺎﻫﺶﺨﺑ ،ﺎﺠﻨﯾﺍ ﺭﺩ

An image as a border!

:ﺪﮐ ﻢﻫ ﻦﯾﺍ

ﻝﺎﺜﻣ

  #borderimg
{
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 
30 round;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are repeated to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>

<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

:ﺪﻧﻮﺷﯽﻣ ﻩﺪﯿﺸﮐ ﻪﯿﺷﺎﺣ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﺮﯾﻮﺼﺗ ﯽﻧﺎﯿﻣ ﯼﺎﻫﺶﺨﺑ ،ﺎﺠﻨﯾﺍ ﺭﺩ

An image as a border!

:ﺪﮐ ﻢﻫ ﻦﯾﺍ

ﻝﺎﺜﻣ

  #borderimg
{
     border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
30 stretch;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
#borderimg { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>

<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

ﻪﺘﮑﻧ: ﯽﮔﮋﯾﻭ border-image ﺖﺳﺍ ﺕﺎﯿﺻﻮﺼﺧ ﯼ

border-image-source
border-image-slice
border-image-width
border-image-outset 
border-image-repeat

CSS border-image - ﻒﻠﺘﺨﻣ ﺮﯾﺩﺎﻘﻣ Slice

:ﺪﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ ﻼًﻣﺎﮐ ﺍﺭ ﻪﯿﺷﺎﺣ ﺮﻫﺎﻇ ﺵﺮﺑ ﻒﻠﺘﺨﻣ ﺮﯾﺩﺎﻘﻣ

:1 ﻝﺎﺜﻣ

border-image: url(border.png) 50 round;

:2 ﻝﺎﺜﻣ

border-image: url(border.png) 20% round;

:3 ﻝﺎﺜﻣ

border-image: url(border.png) 30% round;

:ﺪﮐ ﻢﻫ ﻦﯾﺍ

ﻝﺎﺜﻣ

   #borderimg1 {
  border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
50 round;
}
#borderimg2 {
  
border: 10px solid transparent;
  padding: 15px;
  
border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  
padding: 15px;
  border-image: url(border.png) 
30% round;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

CSS ﻪﯿﺷﺎﺣ ﺮﯾﻮﺼﺗ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

border-image

*-border-image ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

border-image-source

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﻪﯿﺷﺎﺣ ﻥﺍﻮﻨﻋ ﻪﺑ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺍﺮﺑ ﺍﺭ ﺮﯾﻮﺼﺗ ﺮﯿﺴﻣ

border-image-slice

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﯿﺷﺎﺣ ﺮﯾﻮﺼﺗ ﻥﺩﺍﺩ ﺵﺮﺑ ﻩﻮﺤﻧ

border-image-width

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻪﯿﺷﺎﺣ ﺮﯾﻮﺼﺗ ﺽﺮﻋ

border-image-outset

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺪﺑﺎﯾ ﯽﻣ ﺵﺮﺘﺴﮔ ﻪﯿﺷﺎﺣ ﺭﺩﺎﮐ ﺯﺍ ﺮﺗﺍﺮﻓ ﻪﯿﺷﺎﺣ ﺮﯾﻮﺼﺗ ﻪﯿﺣﺎﻧ ﻪﮐ ﺍﺭ ﯼﺭﺍﺪﻘ

border-image-repeat

ﺩﻮﺷ ﻩﺪﯿﺸﮐ ﺎﯾ ﺩﺮﮔ ،ﺭﺍﺮﮑﺗ ﺪﯾﺎﺑ ﻪﯿﺷﺎﺣ ﺮﯾﻮﺼﺗ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024