Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)-html tutorial-php.cn

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

奋力向前

Lepaskan： 2021-08-18 17:55:19

asal

4493 orang telah melayarinya

Dalam artikel sebelumnya "artikel html: Bagaimana untuk mencapai kesan kotak input dalam halaman web (penjelasan kod terperinci) ", kami memperkenalkan cara menggunakan html untuk mencapai kesan kotak input. Artikel berikut akan memperkenalkan kepada anda cara menggunakan CSS untuk mencipta kesan butang bulat Mari lihat cara melakukannya bersama-sama.

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

Cara membuat butang bulat dalam halaman web dalam html

1 Cipta fail html baharu, letakkan body di dalamnya Masukkan teg a dan masukkan pautan kosong. Butang <a href="#"></a> , dan kemudian masukkan kod yang memperkenalkan gaya sebaris dalam title <style type="text/css"></style>。

Contoh kod

<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style type="text/css">
 
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>
</html>

Salin selepas log masuk

Kesan kod

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

2. Tambahkan gaya css pada teg, namakannya [btn-style] dan takrifkan lebar, tinggi, warna latar belakang, dan fon butang Warna, alih keluar garis bawah. Tambahkan disply:block, jika tidak, lebar dan tinggi butang yang ditentukan tidak akan berkuat kuasa. Kemudian perkenalkan gaya btn-style dalam tag a.

Contoh kod

<style type="text/css">
           .btn-style{
                width: 150px;
                height: 50px;
                color: #f8ff00;
                background:#010dfb;
                text-decoration: none;
                display: block;
           }
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>

Salin selepas log masuk

Kesan kod

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

3. Teruskan ke tambah Gaya, tentukan pemusatan mendatar fon, pemusatan menegak, fon dan saiz fon untuk butang.

Contoh kod

line-height: 50px;
text-align: center;
font-size:"微软雅黑"；

Salin selepas log masuk

Kesan kod

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

4. Letakkan butang Empat penjuru dibulatkan untuk kelihatan lebih seperti butang.

border-radius: 100px;

Salin selepas log masuk

Kesan kod

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

Kesannya selesai, okay.

Adakah anda fikir jejari sempadan hanyalah sudut bulat? Malah, ia tidak merujuk kepada jejari bulatan di mana sempadan terletak saya akan menerangkan parameter atribut jejari sempadan secara terperinci.

Unit nilai atribut boleh digunakan: em, px, peratusan, dll.

Anda boleh mencubanya dan menukar jejari sempadan: 100px kepada 10px

border-radius: 10px

Salin selepas log masuk

Kesan kod: "jejari mendatar" dan "jejari menegak" setiap sudut bulat elemen

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

ditetapkan kepada 10px.

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

jejari sempadan boleh menetapkan 1 hingga 4 nilai pada masa yang sama Jika empat nilai ditetapkan, ia sepadan dengan sudut kiri atas, atas sudut kanan, sudut kanan bawah dan sudut kiri bawah.

border-radius: 10px 20px 0px 30px;

Salin selepas log masuk

Kesan kod

Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci)

Pembelajaran yang disyorkan: Tutorial video HTML

Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menggunakan css untuk mencipta kesan butang bulat (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!