چگونه با CSS یک Dashed Border اختصاصی بسازیم؟!

به صورت پیشفرض و به راحتی می توان با CSS یک حاشیه به صورت خط تیره یا نقطه چین برای تگ های مورد نظر خود بسازیم. همانند زیر:

<style>
    .box {
        border: 1px dashed black;
        border: 3px dotted red;
    }
</style>

اما نمی توان کنترل زیادی روی طول خط تیره ها و حتی میزان فواصل بین آن ها داشت. همچنین برای border ها نمی توان انیمیشن یا transition در نظر گرفت. با این حال می توان با فوت و فن خاصی تمامی این optionها را برای border ها لحاظ کرد که در ادامه با مثالی شرح می دهیم.

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 123px;
    font-size: 2em;
    margin: 0.5em;
    padding: 0.5em;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
    background-repeat: no-repeat;
}


.box-simple {
    background-image: repeating-linear-gradient(0deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(90deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(180deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(270deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px);
}



.box-long {
    background-image: repeating-linear-gradient(0deg, #ef0038, #ef0038 30px, transparent 30px, transparent 36px),
    repeating-linear-gradient(90deg, #ef0038, #ef0038 30px, transparent 30px, transparent 36px),
    repeating-linear-gradient(180deg, #ef0038, #ef0038 30px, transparent 30px, transparent 36px),
    repeating-linear-gradient(270deg, #ef0038, #ef0038 30px, transparent 30px, transparent 36px);
}


.box-centered {
    background-image: linear-gradient(0deg, #11ae00, #11ae00 25%, transparent 25%, transparent 75%, #11ae00 75%),
    linear-gradient(90deg, #11ae00, #11ae00 25%, transparent 25%, transparent 75%, #11ae00 75%),
    linear-gradient(180deg, #11ae00, #11ae00 25%, transparent 25%, transparent 75%, #11ae00 75%),
    linear-gradient(270deg, #11ae00, #11ae00 25%, transparent 25%, transparent 75%, #11ae00 75%);
}

در این مثال از 3 مدل مختلف از Dash Border ها استفاده کرده ایم که برای پیاده سازی این حاشیه ها از 4 عدد background-image به صورت جداگانه اما هماهنگ استفاده شده است، که این 4 تا در خاصیت background در CSS با ویرگول از یکدیگر جدا شده اند و با class های “box-simple” و “box-long” و “box-centered” در خروجی به نمایش درآمده اند.

 Backgroundها با یک خاصیت linear-gradient ایجاد می شوند که می توان به راحتی مشخص کرد border ها چه میزان و gap های بین خط تیره ها چه میزان و border ها چه رنگی داشته باشند.

.box-simple {
    background-image: repeating-linear-gradient(0deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px),/*left*/
    repeating-linear-gradient(90deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px), /*top*/
    repeating-linear-gradient(180deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px), /*right*/
    repeating-linear-gradient(270deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px); /*bottom*/
}

اگر تا به حال با linear-geadiant کارکرده باشید فهم این قسمت زیاد مشکل نیست. اما در توضیح استفاده از این روش، باید گفت، شما در هر قسمت (که با ویرگول جدا شده اند) مشخص می کنید که چه اندازه border و چه رنگی داشته باشیم. به عنوان مثال در border سمت چپ که کد آن به صورت زیر است، مشخص شده است که در زاویه صفر درجه یک border با فواصل 10 و 20 پیکسلی داریم که رنگ های هر قسمت نیز مشخص شده است. برای ایجاد یک border خط تیره باید قسمت های بی رنگ داشته باشیم که با transparent مشخص شده اند.

)0deg, #0045ef,#0045ef 10px,transparent 10px,transparent 20px(/*left*/

این background ها در چهار گوشه ی box مورد نظر ما قرار گرفته است و محل قرار گیری آن ها با کلاس “.box” و خاصیت background-position مشخص شده است. به صورتی که دو عدد اول محل قرارگیری border سمت چپ و دو عدد دوم، محل قرارگیری border بالا و به همین صورت border های سمت راست و پایین باکس مورد نظر ما را بیان می کند. یکی از این دو عدد فاصله border از بالا و پایین و دیگری فاصله border از چپ و راست را مشخص می کند که با کمی تغییر در این اعداد به راحتی می توانیم مفهوم اعداد و نحوه قرارگیری border ها را متوجه شویم.

background-position: 0 0, 0 0, 100% 0, 0 100%;

بعد از شیوه استایل و محل قرار گیری border ها باید سایز و پهنای آن ها مشخص شود که در کلاس “.box” با خاصیت background-size این مقادیر را قرار می دهیم.

background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;

دو عدد اول طول و ارتفاع background سمت چپ و اعداد دوم برای background بالا و به همین صورت، اعداد دیگر background های سمت راست و پایین را مشخص می کنند که با کمی تغییر در آن ها به راحتی می توان نسبت به مقادیر قرارگرفته شده آشنایی پیدا کرد.

مثالی که توضیح داده ایم را در اینجا به صورت کامل قرار می دهیم:

<html>


<head>
    <title>Sokan Academy - Custom Dashed Border</title>

    <style>
        .content {
            width: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 123px;
            font-size: 2em;
            margin: 0.5em;
            padding: 0.5em;
            background-position: 0 0, 0 0, 100% 0, 0 100%;
            background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
            background-repeat: no-repeat;
        }

        .box-simple {
            background-image: repeating-linear-gradient(0deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(90deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(180deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(270deg, #0045ef, #0045ef 10px, transparent 10px, transparent 20px);
        }

        .box-long {
            background-image: repeating-linear-gradient(0deg, #ef0038, #ef0038 30px, transparent 30px, transparent 36px),
            repeating-linear-gradient(90deg, #ef0038, #ef0038 30px, transparent 30px, transparent 36px),
            repeating-linear-gradient(180deg, #ef0038, #ef0038 30px, transparent 30px, transparent 36px),
            repeating-linear-gradient(270deg, #ef0038, #ef0038 30px, transparent 30px, transparent 36px);
        }

        .box-centered {
            background-image: linear-gradient(0deg, #11ae00, #11ae00 25%, transparent 25%, transparent 75%, #11ae00 75%),
            linear-gradient(90deg, #11ae00, #11ae00 25%, transparent 25%, transparent 75%, #11ae00 75%),
            linear-gradient(180deg, #11ae00, #11ae00 25%, transparent 25%, transparent 75%, #11ae00 75%),
            linear-gradient(270deg, #11ae00, #11ae00 25%, transparent 25%, transparent 75%, #11ae00 75%);
        }

    </style>

</head>


<body>

<div id="app">
    <div class="content">
        <div class="box box-simple">Simple</div>
        <div class="box box-long">long</div>
        <div class="box box-centered">centered</div>
    </div>

</div>

</body>


</html>

منبع:

https://css-tricks.com/more-control-over-css-borders-with-background-image/