Bagaimana cara membuat gradien perbatasan di css?

Dengan semua fitur baru di CSS3, kami sekarang dapat membuat situs web tanpa gambar. Di masa lalu, penggunaan gambar tidak dapat dihindari untuk menunjukkan warna gradien

Table of Contents Show

Bagaimana Anda memudar perbatasan di CSS?
Bagaimana Anda membuat batas lingkaran gradien di CSS?
Bagaimana Anda mengatur perbatasan

Hari ini, menjadi lebih ramping dengan penggunaan CSS3 Gradient Background. Di postingan sebelumnya, kami telah menunjukkan kepada Anda cara memainkan Gradient CSS3 sebagai warna latar belakang dalam berbagai bentuk dan arah;

Tapi Gradient CSS3 tidak berhenti hanya untuk penggunaan latar belakang. Tahukah Anda bahwa Anda juga dapat menggunakannya di dalam perbatasan?

Metode Pertama

Metode pertama adalah dengan menerapkan CSS3 Gradient di dalam pseudo-elements. Baiklah, mari kita lihat bagaimana triknya bekerja

Perbatasan Gradien Atas ke Bawah

Kami akan memulai dengan gradien sederhana yang menyebar dari atas ke bawah. Untuk memulai, buat kotak dengan div, sebagai berikut

HTML

&lt;div class="box"&gt;&lt;/div&gt;

CSS

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

Untuk membentuk gradien pada batas kotak, atur batas padat di sisi atas dan bawah kotak terlebih dahulu. Kami juga membuat 2 persegi panjang dengan 2 elemen semu — :before dan :after — dan menentukan lebar dalam ukuran yang sama dengan lebar batas kotak

Posisikan persegi panjang di sisi kiri dan kanan kotak dan terapkan linear-gradient melalui background-image. Anda dapat melihat bagaimana trik ini ternyata di bawah ini

Gradien Perbatasan Kiri ke Kanan

Sekarang mari buat gradien yang membentang ke kiri dan kanan dengan cara yang identik dengan contoh sebelumnya. Hanya saja, kali ini kita akan menambahkan border kotak di sisi kiri dan kanan, bukan di atas dan bawah

Demikian pula, kami juga menggunakan elemen semu — :before dan :after — untuk membentuk 2 persegi panjang. Tapi, bertentangan dengan contoh sebelumnya, kita sekarang menempatkannya di sisi atas dan bawah kotak

Gradien Perbatasan Diagonal

Membuat gradien diagonal dengan trik ini, secara teknis rumit

Tetap saja, kami mengandalkan 2 elemen semu, :before dan :after dan menggunakan linear-gradient. Namun kali ini, kami akan menggunakan 2 linear-gradient dalam elemen semu. Dan setiap rentang gradien bertentangan satu sama lain. Lihat kode sumber berikut untuk detailnya

Trik Kedua

Metode kedua adalah dengan menggunakan properti CSS3

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

5. Properti

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

5 di CSS3 memungkinkan kita untuk mengisi perbatasan dengan gambar serta CSS3 Gradient

Dukungan browser untuk

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

_5 cukup bagus; . Perlu dicatat, bagaimanapun, bahwa

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

5 hanya akan bekerja pada bentuk atau kotak persegi panjang

Itu berarti menambahkan

border-image: &lt;source&gt; &lt;slice&gt; &lt;width&gt; &lt;outset&gt; &lt;repeat|initial|inherit&gt;;

_0 akan menyimpang

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

5 output

Berikut ini adalah spesifikasi properti

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

border-image: &lt;source&gt; &lt;slice&gt; &lt;width&gt; &lt;outset&gt; &lt;repeat|initial|inherit&gt;;

adalah jalur yang menentukan gambar yang digunakan di perbatasan. Di sini, kita akan mengisinya dengan CSS3 Gradient sebagai gantinya. Untuk mencapai hasil yang sama seperti pada contoh sebelumnya, kami menerapkan Gradien CSS3 dalam

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

5, sebagai berikut

.box{
	width: 250px;
	height: 250px;
	background: #eee;
	border: 20px solid transparent;
	-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
	-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
	border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
	border-image-slice: 1;
}

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

5 tidak akan menampilkan apa pun jika kami tidak menentukan lebar

border-image: &lt;source&gt; &lt;slice&gt; &lt;width&gt; &lt;outset&gt; &lt;repeat|initial|inherit&gt;;

5. Jadi, seperti yang Anda lihat di atas, kami menambahkan

border-image: &lt;source&gt; &lt;slice&gt; &lt;width&gt; &lt;outset&gt; &lt;repeat|initial|inherit&gt;;

6 lebar batas dengan warna batas transparan. Kemudian, kami menetapkan nilai

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

_5danlinear-gradient bersama dengan awalan vendor untuk versi Webkit dan Firefox sebelumnya

Penambahan border-image-slice yang ditunjukkan di atas akan mengatur offset bagian dalam konten

border-image: &lt;source&gt; &lt;slice&gt; &lt;width&gt; &lt;outset&gt; &lt;repeat|initial|inherit&gt;;

9. Properti ini diperlukan untuk menampilkan gradien sepenuhnya di dalam area sekitar kotak. Lihat output di bawah ini

Metode ini menawarkan lebih banyak fleksibilitas untuk menyesuaikan gradien ke segala arah yang memungkinkan; . Di bawah ini adalah beberapa contoh

Bagaimana Anda memudar perbatasan di CSS?

Memudarkan tepi gambar .

tepi atas. Menggunakan. pudar pudar-atas

tepi bawah. Menggunakan. pudar pudar-bawah

tepi kiri. Menggunakan. pudar pudar-kiri

tepi kanan. Menggunakan. memudar memudar-kanan

tepi bawah dan kiri. Menggunakan. pudar pudar-bawah pudar-kiri

tepi atas dan kanan. Menggunakan. pudar pudar-atas pudar-kanan

tepi atas dan bawah. .

tepi kiri dan kanan

Bagaimana Anda membuat batas lingkaran gradien di CSS?

Pendekatan. Kita akan membuat dua div, satu div luar dengan class outer_circle dan satu lagi div dalam dengan class inner_circle . Div luar berisi lingkaran besar dengan warna gradien dan div dalam berisi lingkaran putih kecil yang berfungsi sebagai ujung dalam lingkaran yang membuat batas lingkaran.

Bagaimana Anda mengatur perbatasan

Dengan gradien, Anda perlu menentukan nilai border-image-slice sebesar 1. .

Menggunakan Gradien Linier. Berikut adalah gradien linier. . with-linear-gradient { border-style. padat; . 10px; . linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1; .

Menggunakan Gradien Radial. .

Menggunakan Conic Gradient