:ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ ﺮﯾﺯ CSS ﯼﺮﺑﺭﺎﮐ ﻂﺑﺍﺭ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺎﺑ ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ
resizeoutline-offset.ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯽﮔﮋﯾﻭ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
.ﺮﯿﺧ ﺎﯾ ﺪﺷﺎﺑ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﻞﺑﺎﻗ ﺮﺑﺭﺎﮐ ﻂﺳﻮﺗ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ (ﻪﻧﻮﮕﭼ ﻭ) ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ
This div element is resizable by the user!
To resize: Click and drag the bottom right corner of this div element.
:ﺪﻫﺩ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﺍﺭ <div> ﺮﺼﻨﻋ ﮏﯾ ﺽﺮﻋ ﻂﻘﻓ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ ﺮﺑﺭﺎﮐ ﻪﺑ ﺮﯾﺯ
div
{
resize: horizontal;
overflow: auto;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
:ﺪﻫﺩ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﺍﺭ <div> ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﻂﻘﻓ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ ﺮﺑﺭﺎﮐ ﻪﺑ
div
{
resize: vertical;
overflow: auto;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize only the height of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
:ﺪﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ <div> ﺮﺼﻨﻋ ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺮﺑﺭﺎﮐ ﻪﺑ ﺮﯾﺯ ﻝﺎﺜﻣ
div
{
resize: both;
overflow: auto;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</body>
</html>
:ﻢﯾﺍ ﻩﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﺖﯿﻠﺑﺎﻗ ﻥﺩﺮﮐ ﻝﺎﻌﻓﺮﯿﻏ ﯼﺍﺮﺑ resize ﯽﮔﮋﯾﻭ ﺯﺍ ﺎﺠﻨﯾﺍ
textarea {
resize: none;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
textarea#test {
resize: none;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>
<textarea id="test">Textarea - Not resizable</textarea>
<br><br>
<textarea>Textarea - Resizable (default)</textarea>
</body>
</html>
.ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻪﯿﺷﺎﺣ ﺎﯾ ﻪﺒﻟ ﻭ ﯽﻠﮐ ﺡﺮﻃ ﻦﯿﺑ ﻪﻠﺻﺎﻓ This div has an outline 15px outside the border edge.
ﻪﺟﻮﺗ: ﺖﺳﺍ ﯽﻠﮐ ﺡﺮﻃ ،ﺯﺮﻣ ﻑﻼﺧ ﺮﺑ !ﺖﺳﺍ ﺕﻭﺎﻔﺘﻣ ﺎﻫ ﻪﯿﺷﺎﺣ ﺎﺑ ﯽﻠﮐ ﺡﺮﻃ
.ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻀﻓ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ ﯼﺮﺑﺭﺎﮐ ﻂﺑﺍﺭ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﻭﺪﺟ ﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻪﯿﺷﺎﺣ ﺎﯾ ﻪﺒﻟ ﻭ ﯽﻠﮐ ﺡﺮﻃ ﻦﯿﺑ ﻪﻠﺻﺎﻓ ﺮﯿﺧ ﺎﯾ ﺖﺳﺍ ﻩﺯﺍﺪﻧﺍ ﺮﯿﯿﻐﺗ ﻞﺑﺎﻗ ﺮﺑﺭﺎﮐ ﻂﺳﻮﺗ ﺮﺼﻨﻋ ﮏﯾ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣoutline-offset ﻝﺎﺜﻣ
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
} <!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
</style>
</head>
<body>
<h1>The outline-offset Property</h1>
<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>
<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>
</body>
</html>
CSS ﯼﺮﺑﺭﺎﮐ ﻂﺑﺍﺭ ﯼﺎﻫ ﯽﮔﮋﯾﻭ