مقدمه

احتمالاً تاکنون در پروژه‌های خود از حاشیه‌های CSS (Borders) استفاده کرده‌اید. با استفاده از ویژگی‌هایی مانند:

• border-style
• border-color
• border-width

می‌توانید ظاهر حاشیه عناصر را کنترل کنید.

اما مرورگرهای مدرن قابلیت‌های پیشرفته‌تری نیز ارائه می‌دهند و به شما اجازه می‌دهند از تصاویر به‌عنوان حاشیه و همچنین حاشیه‌های گرادیانی (Gradient Borders) استفاده کنید.

در این آموزش با ویژگی‌های زیر آشنا خواهید شد:

• border-image-source
• border-image-slice
• border-image

و نحوه ساخت حاشیه‌های گرادیانی با CSS خالص را یاد خواهید گرفت.

پیش‌نیازها

برای دنبال کردن این آموزش بهتر است:

• آشنایی اولیه با CSS داشته باشید.
• از مرورگری استفاده کنید که از ویژگی‌های زیر پشتیبانی کند:

border-image
linear-gradient
radial-gradient
conic-gradient

آماده‌سازی مثال

ابتدا یک کلاس برای تعیین ابعاد و مرکزچین کردن محتوا ایجاد می‌کنیم:

.box {
  width: 400px;
  height: 200px;
  max-width: 100%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

سپس از آن در HTML استفاده می‌کنیم:

<div class="box">
  Example box without a border.
</div>

افزودن حاشیه معمولی

ابتدا یک کلاس جدید ایجاد می‌کنیم:

.with-border {
  border-color: black;
  border-style: solid;
  border-width: 30px;
}

و آن را به عنصر اضافه می‌کنیم:

<div class="box with-border">
  Example box with a border.
</div>

نتیجه یک کادر با حاشیه مشکی خواهد بود.

استفاده از تصاویر به عنوان حاشیه

برای استفاده از تصویر به‌عنوان حاشیه:

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(image.jpg);
  border-image-slice: 60 30;
}

سپس:

<div class="box with-border-image">
  Example box with a border image.
</div>

border-image-source چیست؟

این ویژگی تصویر مورد استفاده برای حاشیه را مشخص می‌کند.

می‌تواند شامل موارد زیر باشد:

• فایل تصویری معمولی
• تصاویر SVG
• Data URI

مثال:

border-image-source: url(border.png);

border-image-slice چیست؟

این ویژگی تعیین می‌کند تصویر چگونه برش داده شود تا بخش‌های مختلف آن به‌عنوان حاشیه استفاده شوند.

CSS تصویر را به ۹ قسمت تقسیم می‌کند:

+---+---+---+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 5 | 6 |
+---+---+---+
| 7 | 8 | 9 |
+---+---+---+

قسمت‌های کناری و گوشه‌ها برای ساخت حاشیه استفاده می‌شوند.

مثال:

border-image-slice: 60 30;

استفاده از ویژگی خلاصه‌نویسی (Shorthand)

به‌جای نوشتن جداگانه:

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(image.jpg);
  border-image-slice: 60 30;
}

می‌توان از:

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image: url(image.jpg) 60 30;
}

استفاده کرد.

هر دو کد نتیجه یکسانی دارند.

ساخت حاشیه گرادیانی

CSS از سه نوع گرادیان پشتیبانی می‌کند:

• Linear Gradient
• Radial Gradient
• Conic Gradient

هنگام استفاده از گرادیان باید مقدار border-image-slice برابر ۱ باشد.

حاشیه با Linear Gradient

.with-linear-gradient {
  border-style: solid;
  border-width: 10px;

  border-image:
    linear-gradient(
      45deg,
      rgb(0,143,104),
      rgb(250,224,66)
    ) 1;
}

نتیجه:

یک حاشیه مورب با تغییر رنگ سبز به زرد.

حاشیه با Radial Gradient

.with-radial-gradient {
  border-style: solid;
  border-width: 10px;

  border-image:
    radial-gradient(
      rgb(0,143,104),
      rgb(250,224,66)
    ) 1;
}

نتیجه:

رنگ‌ها از مرکز به سمت بیرون پخش می‌شوند.

حاشیه با Conic Gradient

.with-conic-gradient {
  border-style: solid;
  border-width: 10px;

  border-image:
    conic-gradient(
      red,
      yellow,
      lime,
      aqua,
      blue,
      magenta,
      red
    ) 1;
}

نتیجه:

یک حاشیه رنگین‌کمانی دایره‌ای.

مثال کاربردی

.card {
  padding: 20px;
  border: 5px solid;

  border-image:
    linear-gradient(
      to right,
      #ff0080,
      #7928ca
    ) 1;
}

خروجی:

یک کارت با حاشیه گرادیانی صورتی تا بنفش.

محدودیت مهم border-image

متأسفانه:

border-image

هنوز با:

border-radius

هماهنگی کامل ندارد.

مثال:

.card {
  border-radius: 20px;
  border-image: linear-gradient(red, blue) 1;
}

ممکن است در برخی مرورگرها گوشه‌های گرد به‌درستی نمایش داده نشوند.

راه‌حل برای گرادیان + گوشه گرد

معمولاً توسعه‌دهندگان از دو عنصر تو در تو استفاده می‌کنند:

<div class="gradient-border">
  <div class="content">
    محتوا
  </div>
</div>

و با استفاده از:

background-image
background-color
border-radius

ظاهر یک حاشیه گرادیانی را شبیه‌سازی می‌کنند.

پشتیبانی مرورگرها

طبق آمار سال 2020:

• بیش از 99٪ مرورگرهای جهان از border-image پشتیبانی می‌کنند.

بنابراین این قابلیت تقریباً در تمامی مرورگرهای مدرن قابل استفاده است.

جمع‌بندی

ویژگی border-image به شما امکان می‌دهد به‌جای حاشیه‌های ساده از تصاویر یا گرادیان‌ها استفاده کنید و ظاهر حرفه‌ای‌تری به عناصر سایت بدهید. همچنین با ترکیب آن با linear-gradient، radial-gradient و conic-gradient می‌توان حاشیه‌های جذاب و مدرنی ایجاد کرد؛ هرچند برای استفاده همزمان از border-radius و border-image هنوز محدودیت‌هایی وجود دارد.

از همراهی شما با پارمین کلود سپاسگزاریم.