گروه مقاله : CSS
تاريخ انتشار : 1394/02/02 - 13:02
كد :223
در واقع با استفاده از این خاصیت می توانید دور عنصر مورد نظر خط بکشید (خارج از محدوده border) تا برجسته به نظر برسد.
به این موضوع توجه داشته باشید که خاصیت outline با border متفاوت است، outline از فضای خارجی دور عنصر مورد نظر استفاده می کند نه اینکه مانند border از فضای داخلی و width عنصر استفاده کند.
خواصی که برای outline می توان در نظر گرفت، عبارتند از style, color, width :
در مثال زیر دور یک عنصر خارج از border با استفاده از خاصیت outline خط کشیده شده است.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid red;
outline: green dotted thick;
}
</style>
</head>
<body>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>
</body>
</html>
در این مثال از outline-style برای استایل دادن استفاده شده است.
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 1px solid 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>
<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</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.
</body>
</html>
در این مثال خواهید دید که چگونه با استفاده از outline به یک عنصر رنگ داده می شود.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid red;
outline-style: dotted;
outline-color: #00ff00;
}
</style>
</head>
<body>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>
</body>
</html>
در این مثال از border برایoutline استفاده شده است.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border: 1px solid red;
outline-style: solid;
outline-width: thin;
}
p.two {
border: 1px solid red;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>
</body>
</html>
|
Property |
Description |
Values |
|
outline |
Sets all the outline properties in one declaration |
outline-color
outline-style
outline-width
inherit |
|
outline-color |
Sets the color of an outline |
color_name
hex_number
rgb_number
invert
inherit |
|
outline-style |
Sets the style of an outline |
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit |
|
outline-width |
Sets the width of an outline |
thin
medium
thick
length
inherit |