Bagaimana untuk mengalih keluar sempadan daripada imej menggunakan CSS-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mengalih keluar sempadan daripada imej menggunakan CSS

PHPz

Lepaskan： 2023-04-25 13:52:28

asal

2742 orang telah melayarinya

Dalam pembangunan bahagian hadapan, cara mengoptimumkan keindahan dan pengalaman pengguna tapak web adalah isu yang mesti kita pertimbangkan. Antaranya, kesan paparan gambar sangat mempengaruhi kualiti keseluruhan laman web. Untuk menjadikan gambar lebih menonjol, kita selalunya perlu mengalih keluar sempadan gambar untuk mencapai kesan yang lebih baik. Jadi, bagaimana menggunakan CSS untuk mengalih keluar sempadan imej? Mari kita ketahui bersama di bawah.

1. Gunakan CSS untuk mencapai kesan mengalih keluar sempadan gambar

Untuk gambar, kita boleh mengalih keluar sempadannya dalam dua cara berikut:

Tetapkan gambar Atribut sempadan ialah 0

Dalam CSS, penetapan sempadan dicapai melalui atribut sempadan. Oleh itu, kita boleh mengalih keluar sempadan imej dengan menetapkan sifat sempadan kepada 0. Kod khusus adalah seperti berikut:

img{
     border:0px;
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan atribut sempadan teg img kepada 0, supaya sempadan imej akan dialih keluar.

Tetapkan atribut gaya imej

Selain menggunakan atribut sempadan untuk mengalih keluar sempadan imej, kita juga boleh menggunakan atribut gaya lain untuk mencapai ini . Seperti yang ditunjukkan di bawah:

img{
     outline:none;
     box-shadow:none;
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan sifat garis besar dan bayangan kotak bagi teg img kepada tiada, supaya sempadan imej akan dialih keluar.

2. Contoh mengalih keluar sempadan imej dengan CSS

Untuk lebih memahami cara mengalih keluar sempadan imej dengan CSS, kita boleh mempraktikkannya melalui contoh berikut.

<!DOCTYPE html>
<html>
<head>
    <title>CSS图片去掉边框</title>
    <style type="text/css">
        img{
            border: 0px;
            outline: none;
            box-shadow: none;
        }
    </style>
</head>
<body>
    <img src="https://picsum.photos/id/100/300/200" alt="图片">
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan img atribut gaya dan menetapkan sifat jidar, garis besar dan bayang kotaknya kepada tiada. Kemudian, kami merujuk imej dalam teg badan.

Dengan menjalankan kod di atas, kita dapat melihat bahawa sempadan imej telah berjaya dialih keluar.

3. Ringkasan

Dalam pembangunan bahagian hadapan, mengalih keluar sempadan imej dengan menggunakan CSS boleh menjadikan imej lebih menonjol dan mencapai kesan paparan yang lebih baik. Kita boleh mengalih keluar sempadan imej dengan menetapkan sifat sempadan kepada 0 atau menetapkan sifat garis besar dan bayangan kotak kepada tiada. Dalam pembangunan sebenar, kita boleh menggunakan penyelesaian yang berbeza untuk mencapai matlamat ini mengikut situasi sebenar untuk mencapai hasil yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar sempadan daripada imej menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!