حدود التدرج المغلق

يوم جيد يا عزيزي خابروفيت. أقدم لكم ترجمة مقالة لكريس كوهر.

لنفترض أنك تحتاج إلى حدود متدرجة حول عنصر معين. وأنت ، مثل ، فكر:

• لا يوجد واجهة برمجة تطبيقات CSS بسيطة وواضحة لهذا الغرض.
• أنا فقط أصنع عنصر غلاف بخلفية متدرجة خطية ، وبعد ذلك سوف يحجب العنصر الداخلي معظم هذه الخلفية ، باستثناء خط تعبئة رقيق حوله.

سيبدو شيء مثل هذا:

HTML

<div class="module-border-wrap"><div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div></div> 

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #222; } .module-border-wrap { max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px; } .module { background: #222; color: white; padding: 2rem; } 

إذا كنت لا تحب فكرة عنصر الالتفاف ، فيمكنك استخدام عنصر زائف حتى يتم ترتيب قيمة الفهرس السالب السلبي (لن يحدث هذا إذا كان هناك الكثير من مرفقات العنصر الأصل بخلفياتها الخاصة).

فيما يلي مثال لستيفن شو الذي يحدد border-radius :

HTML

 <div class="gradient-box"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. </p> </div> 

 .gradient-box { display: flex; align-items: center; //width: 50vw; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 30% 2em; box-sizing: border-box; $border: 5px; color: #FFF; background: #000; background-clip: padding-box; /* !importanté */ border: solid $border transparent; /* !importanté */ border-radius: 1em; &:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -$border; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); } } html { height: 100%; background: #000; display: flex; } body { margin: auto; } 

لكن لا تنسى تمامًا border-image ، وربما أغبى خاصية CSS في كل العصور. يمكنك استخدامه للحصول على حدود متدرجة حتى على جوانب منفصلة:

HTML

 <div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div> 

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #222; } .module { max-width: 250px; padding: 1rem; color: white; border-width: 3px; border-style: solid; border-image: linear-gradient( to bottom, red, rgba(0, 0, 0, 0) ) 1 100%; } 

قد يكون استخدام كل border-image border-image-slice border-image border-image-slice أبسط بناء جملة لإنشاء حد متدرج ، لكن لسوء الحظ ، لا يتوافق مع border-radius .

HTML

 <div> <div class="on-light"> <button class="border-gradient border-gradient-purple"> I have a gradient </button> </div> <div class="on-dark"> <button class="border-gradient border-gradient-purple"> I have a gradient </button> </div> <div class="on-light"> <button class="border-gradient border-gradient-green"> I have a gradient </button> </div> <div class="on-dark"> <button class="border-gradient border-gradient-green"> I have a gradient </button> </div> </div> 

 button { background: none; text-decoration: inherit; font-family: system-ui; font-size: 1rem; padding: 1rem 2rem; } .border-gradient { border-image-slice: 1; border-width: 2px; } .border-gradient-purple { border-image: linear-gradient(to left, #743ad5, #d53a9d); } .border-gradient-green { border-image: linear-gradient(to left, #00C853, #B2FF59); } body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; > div { width: 100%; text-align: center; } > div > div { width: 100%; padding: 1rem; } } .on-dark { background: #222; button { color: white; } }