CSSایجاد خطوط حاشیه در
خط حاشیه یا boarder میتواند حالت های مختلفی داشته باشد: خط حاشیه دور تا دور و کامل باشد یا فقط در قسمت های خاصی خط حاشیه وجود داشته باشد، خط حاشیه لبه های گرد یا تیز داشته باشد، رنگ خطوط سفارشی باشد، حالت خطوط به صورت خط پیوسته و یا ناپیوسته و نقطه ای باشد.
تعیین نوع خطوط
در این حالت مشخص میکنیم که خطوط حاشیه از چه نوعی باشند (خط یکنواخت، خط نقطه ای و منقطع، خط دوبل، خط سایه دار، بدون خط) در مثال پیش رو نحوه ساخت انواع خطوط را نشان داده ایم.
مثال:
<html> <head> <style> 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.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head>
<body> <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=“none”>No border.</p> <p class=“hidden”>A hidden border.</p> <p class=“mix”>A mixed border.</p>
</body> </html>
- اگر قصد دارید لبه های خطوط حاشیه بجای تیز بودن حالت گردتری داشته باشند از دستور border-radius استفاده کنید. مقدار آن میزان و درجه گردی و تیزی لبه ها را مشخص میکند.
border-radius: 5px;
تعیین ضخامت خطوط حاشیه
برای تعیین ضخامت خطوط حاشیه از border-width استفاده می شود و مقدار آن را میتوان به دو صورت قرار داد یا مقدار پیکسلی مثلا 2px و یا با حالت های medium, thick, thin
مثال:
border-width: 2px;
- این قابلیت وجود دارد که برای خطوط حاشیه که دور تا دور هستند تنظیمات متفاوت اعمال کنیم یعنی برای خط بالایی ضخامت و نوع دلخواه، برای خط سمت چپ ضخامت و نوع متفاوت و دلخواه و برای خطوط سمت چپ و راست نیز به همین ترتیب ضخامت و نوع متفاوتی تعیین کرد. برای این کار تنها کافیست مانند مثال برای boarder-width و boarder-style بجای یک مقدار چهار مقدار به ازای چهار سمت مختلف قرار دهیم.
border-style: solid dotted double mix; border-width: 25px 10px 4px 35px;
- فرمت دیگری که برای اعمال تنظیمات مختلف برای چهار طرف خطوط حاشیه وجود دارد به شکل زیر است:
<html> <head> <style> p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } </style> </head> <body>
<p>2 different border styles.</p>
</body> </html>
تعیین رنگ خطوط حاشیه
برای خطوط حاشیه ای ساخته شده میتوانیم رنگ دلخواهمان را مانند مثال تنظیم کنیم. برای تنظیم رنگ دو نکته را درنظر بگیرید:
- رنگ موردنظر را هم میتوان با نوشتن نام مثلا red و یا نوشتن کد rgb مثلا (1,0,0) و یا نوشتن کد HEX مثلا ff0000 یا با استفاده از کد hsl مثلا (0, 100%, 50%) تعیین کرد.
border-color: #ff0000;
border-color: red;
border-color: rgb(255, 0, 0);
border-color: hsl(0, 100%, 50%);
- میتوان بجای نوشتن یک مقدار برای رنگ با نوشتن چهار مقدار رنگی برای چهار طرف حاشیه رنگ های متفاوت و دلخواه تعیین کرد.
border-color: red green blue yellow;