کار با border و outline در CSS

ایجاد خط حاشیه با خاصیت border در CSS

با استفاده از خاصیت border در CSS می توانیم به راحتی انواع مختلف خطوط را برای حاشیه لایه ها و عناصر مختلف صفحات وب تعریف کنیم، هر خاصیت border معمولا حداکثر از سه قسمت مختلف شامل رنگ (Color)، شکل (Style) و عرض (Width) خط حاشیه تشکیل می شود، البته رعایت ترتیب این سه مقدار در نگارش (Syntax) خاصیت border اهمیتی ندارد، به عنوان مثال:

<style>
div {
    border: #999 solid 1px;
}
</style>

<style>
.block-1 {
    width: 200px;
    height: 100px;
    margin: 8px;
    border: #4DC100 solid 1px;
}
.block-2 {
    width: 200px;
    height: 100px;
    margin: 8px;
    border: dashed #5B00C1 1px;
}
</style>
<div class="block-1"></div>
<div class="block-2"></div>

برای دیدن پیش نمایش مثال ها لطفا به انتهای این مطلب رجوع کنید.
در نمونه کدهای ساده بالا خط حاشیه برای کلاس فرضی block-1 به صورت solid یا جامد (خطوط معمولی) با کد رنگی هگز با مقدار 4DC100 و اندازه 1 پیکسل و برای کلاس فرضی block-2 به صورت dashed یا نقطه چین (خطوط تقطیع شده) با کد رنگی هگز با مقدار 5B00C1 و اندازه 1 پیکسل ایجاد کرده ایم، به این صورت کلاس های بالا به طور پیش فرض خطوط حاشیه را در هر چهار طرف (بالا، پائین، چپ و راست) لایه یا عنصر صفحات وب ترسیم می کنند، برای ترسیم خطوط حاشیه در CSS تعیین شکل یا همان Style برای خاصیت border الزامی است (به فرض یکی از مقادیر solid، dotted، dashed و...) اما تنظیم سایر پارامترها اختیاری است.
برای ترسیم خطوط با اشکال متفاوت می توانیم از مقادیر زیر برای پارامتر Style خاصیت border استفاده کنیم:
- dashed: برای ترسیم خطوط نقطه چین (با فاصله علامت dash یا -).
- dotted: برای ترسیم خطوط نقطه چین (با فاصله علامت نقطه یا dot).
- double: برای ترسیم خطوط به صورت دوتایی یا دوبل.
- groove: برای ترسیم خطوط به شکل شیاری و برجسته.
- hidden: برای ترسیم خطوط پنهان در صفحه.
- inset: برای ترسیم خطوط سه بعدی با برجستگی داخلی.
- outset: برای ترسیم خطوط سه بعدی با برجستگی بیرونی.
- none: هیچ خطی ترسیم نمی شود (حذف خط حاشیه).
- ridge: برای ترسیم خطوط شیاری و برجسته.
- solid: برای ترسیم خطوط معمولی.
برای تعیین اندازه عرض خطوط می توانیم از مقادیر پیکسل (px)، درصد (%)، rem (بر اساس اندازه متن تگ ریشه) و... برای پارامتر Width استفاده کنیم، علاوه بر این سه مقدار زیر هم برای این قسمت قابل استفاده است:
- medium: ایجاد خطوط با اندازه استاندارد و پیش فرض مرورگر.
- thin: ایجاد خطوط نازک و ظریف.
- thick: ایجاد خطوط ضخیم و برجسته.
برای پارامتر رنگ خطوط کدهای هگز (مانند 0000FF) با علامت # در ابتدا یا rgb (مانند (255,100,125)rgb) و همچنین عنوان های رنگی (مانند red ،blue، green و...) به عنوان Color قابل استفاده است.
کاربرد پارامترهای خاصیت border در مثال های زیر مشخص است:

<style>
#block {
    width: 25%;
    height: 25px;
    border: #CC0 dotted thick;
}
</style>
<div id="block"></div>

<style>
.block {
    display: block;
    width: 25%;    
    height: 20em;
    border: outset 4px rgb(96,124,66);
}
</style>
<div class="block"></div>

برای دیدن پیش نمایش مثال ها لطفا به انتهای این مطلب رجوع کنید.

خاصیت های زیرمجموعه border در CSS

خاصیت border یک ویژگی کلی در CSS است که شامل خصوصیات زیرمجموعه ای از جمله ضلع (Side)، رنگ (Color)، شکل (Style) وعرض (Width) خط حاشیه ترسیم شده می شود در واقع حالت های بالا نوع کاربرد مختصرنویسی این خاصیت هستند، اما اگر بخواهیم به فرض برای هر ضلع بلاک مد نظرمان در صفحه وب یک نوع خاص از خط و با اندازه و رنگ متفاوت داشته باشیم، می توانیم از سایر خاصیت های زیرمجموعه این ویژگی به شرح زیر استفاده کنیم.
- تعریف خط حاشیه برای ضلع خاص (در چهار جهت بالا، راست، پائین، چپ):
بدین منظور از خاصیت های border-top، border-right، border-bottom و border-left استفاده می کنیم، به عنوان مثال:

<style>
.block {
    display: block;
    width: 300px;    
    height: 300px;
    border: #6C6 solid thin;
    border-bottom: double yellow;

}
</style>
<div class="block"></div>

برای دیدن پیش نمایش مثال ها لطفا به انتهای این مطلب رجوع کنید.
در کلاس فرضی بالا در حالت کلی خط حاشیه را در خاصیت border به صورت solid و با مقدار رنگی 6C6 در نظر گرفته ایم اما در ادامه با خاصیت border-bottom خط حاشیه ضلع پائینی بلاک را از solid به double و رنگ را از کد هگز 6C6 به yellow تغییر داده ایم، به این صورت مرورگر برای یک ضلع خاص از بلاک استایل سفارشی و متفاوتی نمایش می دهد.
مثالی دیگر از کاربرد خاصیت های زیرمجموعه border:

<style>
#block {
    display: table;
    width: 500px;    
    height: 350px;
    border-top: #333 solid medium;
    border-bottom: #666 dashed thin;
    border-left: #999 dotted thick;
    border-right: #CCC inset 1px;
}
</style>
<div id="block">CSS Border</div>

برای دیدن پیش نمایش مثال ها لطفا به انتهای این مطلب رجوع کنید.
اگر استایل در نظر گرفته برای آی دی فرضی block را در صفحه وبمان به عنصری نسبت دهیم اضلاع مختلف بلاک هدف با خطوط متفاوت (از لحاظ نوع، رنگ و اندازه) ترسیم می شوند، البته این نوع استایل نویسی صرفا جنبه آموزشی دارد و در طراحی جلوه های واقعی شاید در عمل تنها از چند نوع و ویژگی خاص از خطوط استفاده کنیم.
علاوه بر ضلع و تعیین جهت ترسیم خطوط حاشیه در CSS، سه پارامتر color، style و width را هم می توانیم به صورت جداگانه تعریف کنیم، البته این روش اغلب ضروری نیست و با شیوه مختصرنویسی به راحتی خطوط مختلف با ویژگی های ظاهری متفاوت قابل ترسیم هستند، اما در مواقعی ممکن است استفاده از این حالت به دلایلی کاربرد داشته باشد، بدین منظور سه پارامتر color، style و width را به صورت زیر تعریف می کنیم:
- border-color (یا به شیوه ترکیبی به صورت به فرض border-top-color): برای تعیین رنگ خطوط.
- border-style (یا به شیوه ترکیبی به صورت به فرض border-left-style): برای تعیین نوع خطوط.
- border-width (یا به شیوه ترکیبی به صورت به فرض border-bottom-width): برای تعیین عرض خطوط.
به طور مثال:

<style>
#block-1 {
    display: block;
    width: 300px;    
    height: 300px;
    border: #6C6 solid;
    border-width: 2px;
}
</style>
<div id="block-1"></div>

<style>
#block-2 {
    display: block;
    width: 300px;    
    height: 300px;
    border: solid #666;
    border-bottom-style: dashed;
    border-top-color: #06C;
    border-width: 3px;
}
</style>
<div id="block-2"></div>

<style>
#block-3 {
    display: block;
    width: 300px;    
    height: 300px;
    border-color: #06C #666 #060 #F90;
    border-style: solid dotted double inset;
    border-width: 5px 3px medium thin;
}
</style>
<div id="block-3"></div>

برای دیدن پیش نمایش مثال ها لطفا به انتهای این مطلب رجوع کنید.
با دقت در نحوه مقداردهی خاصیت های زیرمجوعه border مشخص است که می توانیم برای هر خاصیت زیرمجموعه به فرض border-color چهار پارامتر مجزا در نظر بگیریم که به ترتیب بر روی چهار ضلع متفاوت (جهت های بالا، راست، پائین، چپ) اثرگذار است.
نکته: همانطور که پیشتر گفتیم استفاده از پارامتر style برای خاصیت border جهت ترسیم آن ضروری و سایر موارد از قبیل رنگ و اندازه اختیاری هستند.

ایجاد خط حاشیه با خاصیت outline در CSS

هرچند ترسیم خطوط حاشیه با خاصیت border در CSS اغلب نیازهایمان در طراحی صفحات وب را مرتفع می کند اما قدرت CSS از این هم فراتر رفته و ورای خطوط border امکان ایجاد خطوط دیگری تحت عنوان outline نیز وجود دارد، همان طور که از نام این عبارت پیدا است outline برای ایجاد خطوط فراتر از border به کار گرفته می شود، استفاده از این قابلیت معمولا به جهت برجسته نمودن یا تنظیم ظاهر یک بلاک یا فیلد کاربرد دارد، البته outline در نحوه تعریف و مقداردهی شباهت های زیادی به border دارد به جزء اینکه جهت های مختلف یعنی top، right، left و bottom برای این خاصیت قابل اعمال نیست همچنین اندازه border به ابعاد عنصری که از آن استفاده می کند اضافه می شود اما اندازه outline مستقل بوده و جزء عنصر وابسته محسوب نشده و تاثیری هم بر عناصر مجاور ندارد، مثال:

<style>
div {
    outline: #999 solid 1px;
}
</style>

<style>
.block-1 {
    width: 200px;
    height: 100px;
    margin: 8px;
    border: #4DC100 solid 1px;
    outline: #5B00C1 dashed 4px;
}
.block-2 {
    width: 200px;
    height: 100px;
    margin: 8px;
    border: dashed #5B00C1 1px;
    outline: solid #4DC100 4px;
}
</style>
<div class="block-1"></div>
<div class="block-2"></div>

برای دیدن پیش نمایش مثال ها لطفا به انتهای این مطلب مراجعه کنید.
از آنجایی که نحوه تعریف outline و خاصیت های زیرمجموعه آن کاملا مشابه با خاصیت border است (به جزء موارد مربوط به جهت های مختلف top، right، left و bottom که در outline قابل اعمال نیست) در اینجا صرفا به ذکر چند مثال بسنده می کنیم:

<style>
#block-1 {
    display: block;
    width: 300px;    
    height: 300px;
    border: #6C6 solid;
    border-width: 2px;
    outline: #06C solid;
    outline-width: 2px;    
}
</style>
<div id="block-1"></div>

<style>
#block-2 {
    display: block;
    width: 300px;    
    height: 300px;
    border: solid #666;
    outline-style: dashed;
    outline-color: #06C;
    outline-width: 3px;
}
</style>
<div id="block-2"></div>

<style>
#block-3 {
    display: block;
    width: 300px;    
    height: 300px;
    border-color: #06C #666 #060 #F90;
    border-style: solid dotted double inset;
    border-width: 5px 3px medium thin;
    outline-color: #6C6;
    outline-style: solid;
    outline-width: 5px;    
}
</style>
<div id="block-3"></div>

نکته 1: بر خلاف خاصیت های زیرمجموعه border که می توانیم چهار مقدار مختلف برای چهار پارامتر در جهت های بالا، راست، پائین و چپ در نظر بگیریم، خاصیت های زیرمجموعه outline از مقادیر مبتنی بر جهت پشتیبانی نمی کنند و صرفا یک پارامتر و مقدار قابل تنظیم است.
نکته 2: برای ایجاد گوشه های نرم یا اشکالی خارج از مربع مستطیل می توانیم از خاصیت border-radius در کنار outline استفاده کنیم.

مثال و پیش نمایش آنلاین

برای آشنایی بیشتر با نحوه کار خاصیت های border و outline می توانیم از مثال های زیر و پیش نمایش آنلاین آنها استفاده کنیم.

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | کار با خطوط border و outline در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
.block {
    display: block;
    height: 100px;
    width: 100px;
    border: #333 thick solid;
}
.block-dot {
    display: block;
    height: 100px;
    width: 100px;
    border: #F60 2px dotted;
}
.block-multi {
    display: block;
    height: 100px;
    width: 100px;
    border-bottom: #666 dashed 2px;
    border-top: #F60 solid 2px;
    border-left: #9C0 dotted 2px;
    border-right: #69F double;
}
.outblock {
    display: block;
    height: 100px;
    width: 100px;
    border: #333 thick solid;
    outline: #090 thick dashed;
}
.outblock-dot {
    display: block;
    height: 100px;
    width: 100px;
    border: #F60 2px dotted;
    outline: #F00 2px solid;
}
.outblock-multi {
    display: block;
    height: 100px;
    width: 100px;
    border-bottom: #666 dashed 2px;
    border-top: #F60 solid 2px;
    border-left: #9C0 dotted 2px;
    border-right: #69F double;
    outline-color: #CCC;
    outline-style: double;
    outline-width: thick;
}
.block-radius {
    display: block;
    height: 100px;
    width: 100px;
    border: #999 2px solid;
    border-radius: 16px;
}
.input {
    height: 30px;
    width: 250px;
    background: #F5F5F5;
    border: #666 1px solid;
    border-radius: 4px;
}
.input:hover {
    background: #F0F0F0;
    border: #FFF 1px solid;
    outline: #69F 1px solid;
}
.input:focus {
    background: #F9F9F9;
    border: #FFF 1px solid;
    outline: #F00 1px solid;
}
</style>
</head>
<body>
استفاده از خاصیت border برای ترسیم خطوط در بلاک div به صورت solid:
<br><br>
<div class="block">
</div>
<hr>
استفاده از خاصیت border برای ترسیم خطوط در بلاک div به صورت dotted:
<br><br>
<div class="block-dot">
</div>
<hr>
استفاده از خاصیت border برای ترسیم خطوط در بلاک div به صورت چندگانه:
<br><br>
<div class="block-multi">
</div>
<hr>
استفاده از خاصیت های border و outline برای ترسیم خطوط در بلاک div به صورت solid و dashed:
<br><br>
<div class="outblock">
</div>
<hr>
استفاده از خاصیت های border و outline برای ترسیم خطوط در بلاک div به صورت dotted و solid:
<br><br>
<div class="outblock-dot">
</div>
<hr>
استفاده از خاصیت های border و outline برای ترسیم خطوط در بلاک div به صورت چندگانه:
<br><br>
<div class="outblock-multi">
</div>
<hr>
استفاده از خاصیت های border و border-radius برای ترسیم خطوط در بلاک div به صورت گوشه های نرم و دارای انحنا:
<br><br>
<div class="block-radius">
</div>
<hr>
استفاده از خاصیت های border، outline و border-radius برای ترسیم خطوط در فیلد input در حالت های مختلف نشانه گر ماوس (بردن ماوس بر روی فیلد (hover)، کلیک در فیلد (focus)):
<br><br>
<input type="text" class="input">
<br><br>
</body>
</html>

پیش نمایش آنلاین