إنشاء حدود متدرجة باستخدام CSS

العلامات (Markup)

لهذه الطريقة، نحتاج إلى بنية HTML بسيطة تحتوي على عنصر واحد فقط:

<p class="gradient-border">Hello world</p>

التنسيق

تعمل CSS للحدود المتدرجة من خلال تراكب صورتين كخلفية: إحداهما تمتد إلى منطقة الحدود وتحمل التدرج، والأخرى تغطي منطقة الحشو (padding).

أولًا، نضبط خاصية border بلون شفاف للسماح بظهور الخلفية المتدرجة خلفه:

.gradient-border {
   border: 5px solid transparent;
}

ثم نقوم بتحديد الخلفية بطبقتين مفصولتين بفاصلة، حيث تغطي الطبقة الأولى الثانية، لذلك نحدد لون الخلفية أولًا، ثم تدرج الحدود:

.gradient-border {
   border: 5px solid transparent;
   background: linear-gradient(white, white) padding-box,
               linear-gradient(to right, #f38ca8, #fab387, #a8e2a1) border-box;
}

ما يجعل هذا يعمل هو الجزء الثاني بعد الصورة: background-clip، والذي يحدد منطقة القص للخلفية.

نضبط background-clip على border-box حتى يمتد التدرج إلى الحدود، وعلى padding-box لتغطي الطبقة العلوية التدرج داخل منطقة الحشو والمحتوى.

لا يمكننا تحديد لون صلب مثل #fff مباشرة، لأن هذا لا يعمل إلا مع الصور، لذلك نستخدم نفس القيمة مرتين داخل linear-gradient() للحصول على لون خلفية صلب.

ما يجعل هذه الطريقة فعالة هو دعمها الكامل لخاصية border-radius، على عكس خاصية border-image.

الخلاصة

بشكل عام، تضيف الحدود المتدرجة لمسة مميزة لتصميم موقعك، ويمكنك الذهاب إلى أبعد من ذلك بتحريك التدرج باستخدام خاصية @property.