Batas Gradien CSS

Selamat siang, Khabrovit sayang. Saya mempersembahkan kepada Anda terjemahan sebuah artikel oleh Chris Koehr.

Katakanlah Anda memerlukan batas gradien di sekitar elemen tertentu. Dan Anda, seperti, berpikir:

• Tidak ada API CSS yang sederhana dan jelas untuk ini.
• Saya hanya akan membuat elemen pembungkus dengan latar belakang gradien linier, dan kemudian elemen dalam akan memblokir sebagian besar latar belakang ini, kecuali untuk garis isian tipis di sekitarnya.

Akan terlihat seperti ini:

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; } 

Jika Anda tidak menyukai gagasan elemen pembungkus, Anda dapat menggunakan elemen pseudo hingga nilai indeks-z negatif diurutkan (ini tidak akan terjadi jika ada banyak lampiran elemen induk dengan latar belakang mereka sendiri).

Berikut adalah contoh dari Stephen Shaw memperbaiki 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; } 

Tapi jangan lupa sepenuhnya tentang border-image , mungkin properti CSS paling bodoh sepanjang masa. Anda dapat menggunakannya untuk mendapatkan batas gradien bahkan di sisi yang terpisah:

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%; } 

Menggunakan kedua border-image dan border-image-slice mungkin adalah sintaksis paling sederhana untuk membuat batas gradien, tapi sayangnya itu tidak kompatibel dengan 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; } }