آموزش CSS (قسمت ۶)

آموزش-css-قسمت-۶

در طراحی قالب (UI)‌ یک سایت، ممکن است نیاز به ایجاد حاشیه یا همان Border‌ برای عناصر ایجاد شده باشد و یا بخواهیم شدت تیز بودن حاشیه هارا کم کنیم.برای انجام این کارها ما به مشخصه Border نیاز داریم که می توانیم تمامی نیازهای مربوط به تغییرات در حاشیه را با Border انجام بدیم.برای درک بهتر مفهوم Border به کدهای زیر توجه کنید.

ساختار کلی مشخصه Border‌ به صورت زیر می باشد :

.box {
    border: width type color;
}

width : ضخامت حاشیه را تنظیم می کند. (2px)

type : نوع حاشیه را تنظیم می کند. [dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden]

color : رنگ حاشیه را تنظیم می کند.

در ادامه به مثال های این مشخصه توجه کنید.

کدهای HTML : 

<div class="dr box1"> من حاشیه dotted هستم </div>
<div class="dr box2"> من حاشیه dashed هستم </div>
<div class="dr box3"> من حاشیه solid هستم </div>
<div class="dr box4"> من حاشیه double هستم </div>
<div class="dr box5"> من حاشیه groove هستم </div>
<div class="dr box6"> من حاشیه ridge هستم </div>
<div class="dr box7"> من حاشیه inset هستم </div>
<div class="dr box8"> من حاشیه outset هستم </div>
<div class="dr box9"> من بدون حاشیه هستم none </div>
<div class="dr box10"> حاشیه من پنهان شده hidden </div>

کدهای CSS :

<!-- استایل درونی -->
<style>
    .dr {
        margin: 10px;
        width: 30%;
        padding: 5px;
        font-size: 14px;
        direction: rtl;
    }
    
    .dr.box1 {
        border: 2px dotted #8BC34A;
    }
    
    .dr.box2 {
        border: 2px dashed #8BC34A;
    }
    
    .dr.box3 {
        border: 2px solid #8BC34A;
    }
    
    .dr.box4 {
        border: 2px double #8BC34A;
    }
    
    .dr.box5 {
        border: 2px groove #8BC34A;
    }
    
    .dr.box6 {
        border: 2px ridge #8BC34A;
    }
    
    .dr.box7 {
        border: 2px inset #8BC34A;
    }
    
    .dr.box8 {
        border: 2px outset #8BC34A;
    }
    
    .dr.box9 {
        border: 2px none #8BC34A;
    }
    
    .dr.box10 {
        border: 2px hidden #8BC34A;
    }
</style>

در کدهای بالا سعی کردم برای هر نوع از حاشیه های مثال بزنم تا به صورت عملی خروجی هر یک را ببینید و می توانید خودتان امتحان کنید.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



نظرات کاربران

نظر شما؟