گروه مقاله : CSS
تاريخ انتشار : 1394/02/02 - 11:52
كد :222
توسط این خاصیت می توان دور عنصر مورد نظر کادر ایجاد کرد همچنین می توان خواصی همچون رنگ، ضخامت کادر، نوع کادر و ... را نیز برای border در نظر گرفت.
توسط این خاصیت می توان دور عنصر مورد نظر کادر ایجاد کرد همچنین می توان خواصی همچون رنگ، ضخامت کادر، نوع کادر و ... را نیز برای border در نظر گرفت.
نکته : اگر برای عناصر موجود در صفحه وب از خاصیت border استفاده نکنید به صورت پیش فرض هیچ کادری دور عنصر مورد نظر کشیده نخواهد شد.
نکته : مرورگرie به صورت پیش فرض دور تگ های img کادر می کشد برای این منظور شما میتوانید این خاصیت را برای تگ های img به صورت کلی none در نظر بگیرید.
مقادیر این خاصیت :
-
None : هیچ کادری دور عنصر کشیده نمی شود.
-
Dotted : کادر به صورت نقطه چین کشیده می شود.
-
Dashed : کادر به صورت خط چین کشیده می شود.
-
Solid : کادر به صورت یک خط معمولی کشیده می شود.
-
Double : کادر به صورت دو خطی (دوبله) کشیده می شود.
-
Groove : کادر به صورت 3بعدی توسط رنگ کشیده می شود.
-
Ridge : کادر به صورت 3بعدی توسط رنگ کشیده می شود.
-
Inset : کادر به صورت 3بعدی توسط رنگ کشیده می شود.
-
Outset : کادر به صورت 3بعدی توسط رنگ کشیده می شود.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
Border width :
توسط این خاصیت می توان ضخامت کادر را مشخص نمود. مقدار این خاصیت می تواند بر حسب px تعیین شود و یا مقادیر thin, medium, thick را به آن نسبت داد.
نکته : از خاصیت border-width به تنهایی قادر به استفاده نیستید، اگر می خواهید از آن استفاده کنید باید قبل از آن خاصیت border-style را مقدار دهی نمایید.
مثال :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">border-width:5px</p>
<p class="two">border-width:medium</p>
<p class="three">Some text.</p>
</body>
</html>
Border-color :
برای رنگ دادن به کادر می توان از این خاصیت استفاده نمود.همانگونه که قبلا نیز گفتیم شما میتوانید رنگ را به صورت نام ، مقدار rgb ، مقدار hex تعریف نمایید و یا حتی می توانید مقدار آن را نامرئی (transparent) در نظر بگیرید.
نکته : از خاصیت border-color به تنهایی قادر به استفاده نیستید، اگر می خواهید از آن استفاده کنید باید قبل از آن خاصیت border-style را مقدار دهی نمایید.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-color:gray;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="one">A solid gray border</p>
<p class="two">A solid green border</p>
</body>
</html>
در خاصیتborder-style , border-color شما می توانید در هر 4سمت یعنی بالا، پایین، چپ، راست استایل متفاوتی در نظر بگیرید.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
h1
{
border-bottom-style:dotted;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
<h1>border-bottom</h1>
</body>
</html>
نکته : شما می توانید تمام مطالب بالا را به صورت خلاصه و یکجا نیز تعریف نمایید. در این روش فقط کافیست کلمه border را نوشته و پس از آن مقادیر مربوط به width, style, color را بدهید :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p> border </p>
</body>
</html>