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)

1 Gunakan 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.

2. Gunakan 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

3. Elemen dua lapisan,

, background-imagebackground-clip

Untuk menyelesaikan masalah tidak tepat

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=&#39;border-bg&#39;></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 Codepen

https://codepen.io/mudontire/pen/yLoLrxL

4. Pseudo-elements, penyederhanaan kaedah 3

Kita 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 Codepen

https://codepen.io/mudontire/pen/JjyjVwN

5 elemen lapisan tunggal,

, background-clip, background-originbackground-image

Akhir sekali, saya. think Kaedah yang paling elegan hanya perlu menggunakan elemen satu lapisan, dan masing-masing menetapkan tiga atribut

, 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 Codepen

https://codepen.io/mudontire/pen/wvqvZZO

Saya 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!