cssطراحی سایت

جلسه ۳۶: border ها در CSS

مدل جعبه CSS در اصل جعبه ای است که در اطراف هر عنصر HTML قرار دارد. اکنون نگاهی خواهیم انداخت به یکی دیگر از اجزای اصلی مدل جعبه. border ها. ما هنوز در حال بررسی اجزای سازنده مدل جعبه در CSS هستیم.

بنابراین ، border چیست؟

در انگلیسی ساده ، border به لبه یا مرز چیزی گفته می شود. بازگشت به تصویر جعبه فرضی. هر جعبه پارچه از یک کارتن ساخته شده است. این کارتن ضخامت دارد ، درست است؟ اگر می خواهید این ضخامت را افزایش دهید و کارتن بیشتری برای دوام اضافه کنید ، چه می کنید؟ برای قرار دادن حاشیه در عنصر خود از ویژگی حاشیه استفاده کنید. مثلا:

div {
    border: ۱۰px solid red
}

قبل از اینکه فریاد بزنید ، این همان چیزی است که اتفاق می افتد. کد بالا یک حاشیه در اطراف div ایجاد می کند. عرض حاشیه ۱۰ پیکسل خواهد بود. solid خواهد بود و دارای رنگ قرمز است.

<html>
 <head>
   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>
 </head>
 <body>
   <div>I am a div</div>
 </body>
</html>

div {
  border: 10px solid red
}
آیا مرز قرمز را در بالا می بینید؟

مرز کاملاً با عرض ، سبک و رنگ مشخص می شود. ویژگی مختصر مرزی همه اینها را یک باره تنظیم می کند. برای تنظیم این موارد بصورت جداگانه ، این موارد را انجام دهید:
div {
     border-width: ۱۰px;
     border-style: solid; 
     border-color: red;
}
من به شما توصیه می کنم از مختصر نویسی مرز استفاده کنید. خیلی کمتر تایپ خواهی 🙂  

سبک های حاشیه ای

در مثال بالا یک مرز جامد مشخص کردیم. دو سبک حاشیه بیشتر وجود دارد که شما می توانید به جای جامد استفاده کنید. آنها عبارتند از:
  1. dotted – حاشیه نقطه ای را مشخص می کند.
  2. dashedi> مرز شکسته را مشخص می کند.
  3. solid – مرز جامد را تعریف می کند.
  4. double – مرز دوتایی را تعریف می کند.
  5. Groove – حاشیه شیاردار سه بعدی را تعریف می کند.
  6. ridge – حاشیه سه بعدی سه بعدی را تعریف می کند.
  7. inset – حاشیه داخلی ۳D را تعریف می کند.
  8. outset – مرز شروع ۳D را تعریف می کند.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا