Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat sempadan kecerunan menggunakan CSS? 5 cara untuk berkongsi
Bagaimana untuk mencipta sempadan kecerunan menggunakan CSS? Artikel berikut akan berkongsi dengan anda 5 cara untuk melaksanakan sempadan kecerunan dengan CSS. Saya harap ia akan membantu anda!
Ia adalah kesan yang sangat biasa untuk menetapkan warna kecerunan untuk sempadan Terdapat banyak idea untuk mencapai kesan ini Hari ini saya menyenaraikan kaedah yang saya tahu rujukan anda. (Belajar perkongsian video: tutorial video css, bahagian hadapan web)
border-image
CSS menyediakan sempadan - Atribut imej digunakan untuk melukis corak kompleks untuk sempadan Serupa dengan imej latar belakang, kita boleh memaparkan image
dan linear-gradient
dalam sempadan.
Menetapkan sempadan kecerunan melalui border-image
ialah kaedah paling mudah, yang hanya memerlukan dua baris kod:
CSS:
div { border: 4px solid; border-image: linear-gradient(to right, #8f41e9, #578aef) 1; } /* 或者 */ div { border: 4px solid; border-image-source: linear-gradient(to right, #8f41e9, #578aef); border-image-slice: 1; }
Demo Codepen
https://codepen.io/mudontire/pen/xxLxeZw
Walaupun kaedah ini mudah, ia mempunyai kelemahan yang jelas dan tidak menyokong tetapanborder-radius
. Seterusnya, kami akan memperkenalkan beberapa kaedah untuk menyokong border-radius
.
background-image
Gunakan background-image
untuk melukis latar belakang kecerunan dan menutup bahagian tengah dengan warna pepejal Ini sepatutnya menjadi cara yang paling mudah untuk difikirkan. gunakan dua Untuk tindanan kotak, tetapkan latar belakang kecerunan dan padding untuk kotak bawah, dan tetapkan latar belakang warna pepejal untuk kotak atas.
HTML:
<div class="border-box border-bg"> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora. </div> </div>
CSS:
.border-box { width: 300px; height: 200px; margin: 25px 0; } .border-bg { padding: 4px; background: linear-gradient(to right, #8f41e9, #578aef); border-radius: 16px; } .content { height: 100%; background: #222; border-radius: 13px; /*trciky part*/ }
Demo Codepen
https://codepen.io/mudontire/pen/ZEJEZoY
Kelebihan kaedah ini ialah ia mudah difahami dan mempunyai keserasian yang baik akan menjadi rumit dan tidak mudah. border-radius
background-image
background-clip
dalam kaedah 2, anda boleh menggunakan elemen berasingan sebagai kecerunan latar belakang. Lapisan bawah dan lapisan atas menetapkan sempadan lutsinar dan latar belakang warna pepejal (klip latar belakang: kotak padding perlu ditetapkan untuk mengelak menutup sempadan elemen bawah), dan lapisan atas dan bawah menetapkan sama border-radius
. border-radius
HTML:
<div class="border-box"> <div class='border-bg'></div> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora. </div> </div>
CSS:
.border-box { border: 4px solid transparent; border-radius: 16px; position: relative; background-color: #222; background-clip: padding-box; /*important*/ } .border-bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: inherit; /*important*/ background: linear-gradient(to right, #8f41e9, #578aef); }
Demo Codepenhttps://codepen.io/mudontire/pen/yLoLrxL4. Pseudo-elements, penyederhanaan kaedah 3Kita boleh menggunakan pseudo-elements untuk menggantikan
untuk memudahkan struktur HTML. div.border-bg
HTML:
<div class="border-box"> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora. </div> </div>
CSS:
.border-box { border: 4px solid transparent; border-radius: 16px; position: relative; background-color: #222; background-clip: padding-box; /*important*/ } .border-box::before { content: ''; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: inherit; /*important*/ background: linear-gradient(to right, #8F41E9, #578AEF); }
Demo Codepenhttps://codepen.io/mudontire/pen/JjyjVwN5 elemen lapisan tunggal,
background-clip
, background-origin
background-image
, background-clip
dan background-origin
Setiap atribut ditetapkan dengan dua set nilai tetapkan sempadan. Latar belakang warna tunggal di dalam, kumpulan kedua digunakan untuk menetapkan warna kecerunan pada sempadan. background-image
HTML:
<div class="border-box"> <div class="content"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis, accusamus tempora. </div> </div>
CSS:
.border-box { border: 4px solid transparent; border-radius: 16px; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF); }
Demo Codepenhttps://codepen.io/mudontire/pen/wvqvZZOSaya boleh memikirkan 5 kaedah ini secara peribadi, saya mengesyorkan menggunakan 4 dan 5 dahulu dialu-alukan. Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Pengenalan kepada Pengaturcaraan! !
Atas ialah kandungan terperinci Bagaimana untuk membuat sempadan kecerunan menggunakan CSS? 5 cara untuk berkongsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!