Ringkasan titik pengetahuan kecerunan jejari bagi sifat kecerunan latar belakang css

Artikel ini membawa anda pengetahuan yang berkaitan tentang css, yang terutamanya memperkenalkan isu-isu berkaitan kecerunan jejari boleh difahami sebagai kecerunan dengan nilai jejari, iaitu, yang terakhir Kesannya tidak. lebih panjang kecerunan sepanjang paksi lurus. Kesan terakhir ialah bulatan atau bujur. Mari kita lihat. Saya harap ia akan membantu semua orang.

(Belajar perkongsian video: tutorial video css, tutorial video html)

Kecerunan jejari OK Difahamkan bahawa dengan kecerunan nilai jejari, kesan akhir bukan lagi kecerunan di sepanjang paksi linear. Kesan terakhir adalah bulatan atau bujur. Seperti yang ditunjukkan dalam rajah di bawah, ia adalah kesan kecerunan jejarian.

Kecerunan jejari dicapai dengan menggunakan kaedah jejari-kecerunan() di latar belakang. Struktur sintaksnya adalah serupa dengan kecerunan linear, iaitu, kecerunan linear Anda juga boleh menyesuaikan nilai arah dan nilai warna Kerana ia adalah jejari, anda juga boleh menetapkan nilai jejari untuk mencapai perubahan saiz

Umum. struktur sintaks:

background:radial-gradient(red,yellow,pink)

/*这个语法中，只在radial-gradient方法中添加了颜色值 所以其它的参数全部采取默认
方向 采取的默认值是中心的位置 （这里的方向不是指渐变的方向 而是圆心的位置）
形状 采取的默认值是ellipse(椭圆形) 这里只有两个参数 ellipse(椭圆形)和circle(圆形) 默认ellipse
因为是径向渐变 所以颜色的展示是从里到外 如上所示 表示圆心中间显示的是红色 然后往外拓展分别是黄色 粉色
*/

Seperti yang ditunjukkan di bawah, ia adalah pemaparan terakhir

Struktur tatabahasa untuk menyesuaikan kedudukan tengah bulatan:

background: radial-gradient(at right bottom,red,yellow,pink)

/*使用 at 来定义最终的圆心位置 at后面可以接代表方向的关键字 也可以使用百分值
默认是先设置水平方向的位置 然后是垂直方向 这里就表示将圆心的位置定义在右下角 
颜色从里到外依次为 red yellow pink
*/

Paparan akhir adalah seperti berikut

Sintaks kecerunan jejari kedudukan tengah bentuk tersuai

background: radial-gradient(circle at 50% 50%, red,yellow,pink)
/*这里表示的就是创建一个圆形 且该圆形的圆心位于水平方向50% 垂直方向50%的位置 即居中
颜色从里到外拓展依次为 red yellow pink
*/

Pemaparan akhir adalah seperti berikut

Kesan kecerunan jejari dengan saiz jejari tersuai

background: radial-gradient(150px 110px at 50% 50%,red,yellow,pink)
/*这里表示定义了一个水平半径为150px 垂直半径为110px 圆心的位置在水平方向50% 垂直方向50% 即居中
颜色从里到外拓展依次为 red yellow pink
*/

Pemaparan akhir adalah seperti berikut

Nota: Semasa menulis, sila ambil perhatian bahawa nilai warna dipisahkan dengan koma Bentuk tersuai, saiz jejari tersuai dan nilai warna juga diasingkan dengan koma Pastikan anda menggunakan koma sebelum menggunakan kesan kecerunan Anda mesti mentakrifkan bekas untuk menentukan lebar dan ketinggian bekas supaya kesannya akan muncul

Empat di atas adalah kesan kecerunan jejarian ringkas Selain itu, terdapat kesan kecerunan jejarian berulang yang lebih kompleks. Dilaksanakan melalui kaedah berulang-radial-gradient()

Menggunakan kaedah ini untuk mencapai kesan kecerunan jejarian berulang adalah serupa dengan sintaks kesan kecerunan jejarian biasa di atas, kecuali nilai akhir warna ditambah kepada asas asal, iaitu, menetapkan berapa banyak ruang yang diduduki elemen yang ditentukan dalam bekas ini

Contohnya:

width: 300px;
height: 300px;
background: repeating-radial-gradient(circle at 50% 50%, red,red 10px,yellow 10px,yellow 20px,pink 20px,pink 30px);

/*该语法使用repeating-radial-gradient方法 表示创建一个重复的径向渐变
这个重复的径向渐变的形状是圆形 圆心的位置在水平方向50% 垂直方向50%的地方 
设置了三种颜色 red yellow pink 
这三种颜色所占空间都是10px 其中红色为三种颜色中第一个呈现的颜色 黄色为第二呈现 粉色为第三呈现
因为设置了容器的大小 所以当所有颜色值都使用完之后 仍然没有填满整个容器的话 就会自动返回到第一个颜色值 以此循环 直到填满整个容器
*/

Kesan akhir adalah seperti yang ditunjukkan di bawah

Penciptaan bekas, lalainya ialah segi empat tepat. Tetapi anda boleh menggunakan kaedah jejari sempadan untuk membuat bulatan, yang bertindak sebagai bekas untuk menyimpan kesan kecerunan berulang

width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-radial-gradient(circle at 50% 50%,red, red 10px,yellow 10px, yellow 20px,pink 20px,pink 30px);

/*如上所示 在之前的基础上定义了容器的形状 使用border-radius的方法创建了一个圆形*/

Pemarahan akhir adalah seperti berikut

Nota: Jika anda ingin mencapai kesan kecerunan jejarian berulang, anda mesti menentukan saiz dan bentuk bekas, dan warna serta ruang yang diduduki oleh warna mesti juga disesuaikan mengikut keadaan sebenar. Susunan tetapan nilai warna ialah tetapan akhir bagi kesan paparan akhir Dalam definisi, ia adalah dari kiri ke kanan Dalam kesan pemaparan akhir, ia adalah dari dalam ke luar .

Kecerunan jejari jejari ditakrifkan oleh titik tengah, garis bentuk dan kedudukan tepi serta hentian warna.

Apabila kita menetapkan berbilang warna untuk kecerunan, mereka akan membahagikan kawasan 100% untuk kecerunan secara sama rata. Sudah tentu, sebagai tambahan kepada peratusan, kami juga boleh menggunakan piksel tertentu untuk menetapkan saiz ini. Saiz tetapan piksel merujuk kepada jarak yang memanjang ke luar dari pusat bulatan kecerunan.

Sintaks:

background: radial-gradient( [ circle || <length> ] [ at <position> ]? ,| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,| at <position> ,<color-stop> [ , <color-stop> ]+ )

kedudukan: Jika tiada, lalai ke titik tengah.

bentuk: bentuk kecerunan. Bulat atau bujur. Nilai lalai ialah elips.

saiz: Saiz kecerunan.

warna-henti: mewakili nilai warna tetap pada kedudukan tertentu. Nilai ditambah dengan nilai kedudukan pilihan. Nilai peratusan 0%, atau nilai panjang 0, mewakili titik tengah kecerunan; nilai peratusan 100% mewakili titik di mana sinar kecerunan bersilang dengan bentuk tepi. Nilai peratusan di antara sepadan secara linear dengan titik pada sinar kecerunan.

kata kunci luas: kata kunci digunakan untuk menerangkan lokasi khusus garis tepi. Berikut ialah pemalar kata kunci:

(Belajar perkongsian video: tutorial video css, video html Tutorial)

Atas ialah kandungan terperinci Ringkasan titik pengetahuan kecerunan jejari bagi sifat kecerunan latar belakang css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!