Rumah >hujung hadapan web >tutorial css >Mengapa Jejari Sempadan Tidak Berfungsi pada Imej dalam Chrome?

Mengapa Jejari Sempadan Tidak Berfungsi pada Imej dalam Chrome?

Barbara Streisand
Barbara Streisandasal
2024-10-23 23:29:30292semak imbas

Why is Border Radius Not Working on Images in Chrome?

Jejari Sempadan CSS Tidak Digunakan pada Imej dalam Webkit

Menghadapi masalah menggunakan jejari sempadan pada elemen #skrin menggunakan Chrome tetapi bukan pelayar lain ? Isu ini berkemungkinan disebabkan oleh kecacatan dalam pengendalian pemangkasan imej oleh Chrome.

Elemen #screen menggunakan CSS untuk menetapkan imej latar belakang yang dibundarkan dengan jejari sempadan:

#screen {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Walau bagaimanapun, dalam Chrome, imej nampaknya tidak terjejas oleh sifat jejari sempadan.

Penyelesaian

Untuk menangani pepijat ini, penyelesaian tersedia:

.element-that-holds-pictures {
    perspective: 1px;
}

Menggunakan perspektif pada elemen induk yang mengandungi imej memaksa Chrome menggunakan jejari sempadan dengan betul tanpa memesongkan kualiti imej. Penyelesaian ini tidak menjejaskan paparan, tidak seperti alternatif lain seperti kelegapan:0.99.

Atas ialah kandungan terperinci Mengapa Jejari Sempadan Tidak Berfungsi pada Imej dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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