Rumah hujung hadapan web html tutorial html如何设置背景径向渐变

html如何设置背景径向渐变

Jun 04, 2021 pm 03:41 PM
html kecerunan jejari

在html中,可以使用radial-gradient函数设置径向渐变,只需要在元素background属性里加入“background:radial-gradient(起始位置, 形状,大小, 颜色,颜色,颜色)”即可。

html如何设置背景径向渐变

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

径向渐变:从一个点到四周的颜色的过渡变化。

径向渐变如图所示:

语法:(必须加浏览器前缀)

background: radial-gradient(center, shape, size, start-color, ..., last-color);
Salin selepas log masuk

center:渐变起点的位置,可以为百分比,默认是图形的正中心。

shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。

size:关于径向渐变的大小:

closest-side 最近边

farthest-side 最远边

closest-corner 最近角

farthest-corner 最远角

实现代码如下:  

p{
            width:500px;
            height:300px;
            margin:40px auto;
            background:-webkit-radial-gradient(center,closest-corner,red,yellow,green);
        }
Salin selepas log masuk

扩展资料:

线性渐变:从一个方向到另一个方向到另一个方向的颜色的变化

标准模式的语法(不添加浏览器前缀):

background:linear-gradient(direction,color-stop1,color-stop2)
Salin selepas log masuk

说明:direction默认值是to bottom,即从上往下

stop:颜色的分布位置,默认均匀分布(平均分布)

兼容模式的语法(添加浏览器前缀):

background:-webkit-linear-gradient(direction,color-stop1,color-stop2)
Salin selepas log masuk

说明:direction值不能加to,该值表示颜色从该方向开始渐变,与上面相反

stop:颜色的分布位置,默认均匀分布(平均分布)

渐变方向:前面实现了上下或左右渐变,接下来介绍对角线型渐变

1、to left \ to right \ to top(上下或左右渐变)

2、to left top \ to right bottom(对角线渐变)

3、渐变线角度的变化

例如:标准模式 : 40deg 40度

兼容模式 : 90 - 40deg

线性渐变:颜色的分布(颜色区域大小):

linear-gradient(方向, 颜色1 20%,颜色2 30%,颜色3 )

到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变

代码如下所示: 

div{
            width:500px;
            height:300px;
            margin:100px auto;
            background-image: -webkit-linear-gradient(left, red, yellow);
        }
Salin selepas log masuk

推荐学习:html视频教程

Atas ialah kandungan terperinci html如何设置背景径向渐变. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Feb 07, 2025 am 11:57 AM

Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles