Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bolehkah css digunakan untuk tag hr dalam html5?

Bolehkah css digunakan untuk tag hr dalam html5?

WBOY
Lepaskan: 2022-01-23 15:34:58
asal
2861 orang telah melayarinya

Dalam HTML5, teg hr boleh digayakan dengan css Gaya css boleh menentukan cara untuk memaparkan elemen HTML Anda hanya perlu menggunakan atribut gaya untuk menetapkan elemen hr dengan gaya css.


" atau "hr{css style code;}".

Bolehkah css digunakan untuk tag hr dalam html5?

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi HTML5, komputer Dell G3.

Bolehkah saya menggunakan css untuk teg hr dalam HTML5

Ringkasnya, hr ialah garis pemisah mendatar (peraturan mendatar) pada halaman HTML, yang boleh memisahkan dokumen secara visual kepada pelbagai bahagian? . Perlu dibuat dalam halaman HTML melalui teg


Kemudian mari kita lihat gaya tag hr lalai:

Bolehkah css digunakan untuk tag hr dalam html5?

hanyalah garis hitam, yang tidak cantik langsung, apatah lagi menggunakan < ;hr> Memandangkan halaman itu cantik, anda perlu menggunakan css untuk menetapkan gaya jam.

Tetapkan gaya jam dengan css

Bagaimanakah kita menetapkan gaya jam dengan css? Sebenarnya, ia adalah sangat mudah. ​​Anda boleh menetapkan gaya jam melalui atribut sempadan css dan atribut imej latar belakang css:

1.css menetapkan ketebalan (tebal) dan warna hr

<hr style="border: 5px solid red;"/><!--修改的样式-->
<br />
<hr /><!--默认的样式-->
Salin selepas log masuk

Bolehkah css digunakan untuk tag hr dalam html5?

2.css menetapkan gaya garis putus-putus hr (warna biru)

<hr   style="max-width:90%"/>
Salin selepas log masuk

Bolehkah css digunakan untuk tag hr dalam html5?

3.css menetapkan gaya garisan dua hr

<hr   style="max-width:90%"/>
Salin selepas log masuk

Bolehkah css digunakan untuk tag hr dalam html5?

4 untuk menetapkan gaya tiga dimensi 3D bagi hr

<hr   style="max-width:90%"/>

Salin selepas log masuk

Bolehkah css digunakan untuk tag hr dalam html5?

5.css untuk menetapkan gaya Gradien jam

kod html:

<hr class="style-one"/>
<br/>
<hr class="style-two"/>
Salin selepas log masuk

kod css:

hr.style-one {/*透明渐变水平线*/
 width:80%;
 margin:0 auto;
 border: 0;
 height: 4px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-two{/*渐变*/
 width:80%;
 margin:0 auto;
 border: 0;
 height: 4px;
 background: #333;
 background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}
Salin selepas log masuk

Bolehkah css digunakan untuk tag hr dalam html5?

Di atas hanyalah beberapa contoh mudah , gaya tag hr juga boleh dicapai melalui CSS. Semua orang boleh mencubanya!

Tutorial yang disyorkan: "tutorial video html"

Atas ialah kandungan terperinci Bolehkah css digunakan untuk tag hr dalam html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan