Kelebihan sudut bulat CSS3
Skim penjanaan sudut bulat tradisional mesti menggunakan berbilang imej sebagai corak latar belakang. Kemunculan CSS3 bermakna kita tidak perlu lagi membuang masa mencipta imej ini, dan terdapat banyak kelebihan lain:
* Mengurangkan beban kerja penyelenggaraan. Kerja menjana, mengemas kini fail imej dan menulis kod halaman web tidak lagi diperlukan.
* Tingkatkan prestasi halaman web. Halaman web akan dimuatkan dengan lebih cepat kerana tiada lagi permintaan HTTP yang tidak diperlukan.
* Tingkatkan kebolehpercayaan visual. Dalam keadaan tertentu (kesesakan rangkaian, ralat pelayan, kelajuan rangkaian yang perlahan, dll.), imej latar belakang mungkin gagal dimuat turun, mengakibatkan kesan visual yang lemah. Ini tidak berlaku dengan CSS3.
Sifat jejari sempadan CSS3
Sintaks asas:
jejari sempadan: tiada | <panjang>{1,4} [/ < ;panjang>{1,4} ]?
Julat nilai:
<panjang>: Nilai panjang yang terdiri daripada nombor titik terapung dan pengecam unit. Tidak boleh negatif.
Penjelasan ringkas:
Jejari sempadan ialah kaedah singkatan. Jika nilai sebelum dan selepas "/" kedua-duanya wujud, maka nilai sebelum "/" menetapkan jejari mendatarnya, dan nilai selepas "/" menetapkan jejari menegaknya. Tanpa "/", jejari mengufuk dan menegak adalah sama. Selain itu, empat nilainya ditetapkan dalam susunan kiri atas, kanan atas, kanan bawah dan kiri bawah Situasi berikut akan berlaku terutamanya:
1. Hanya ada satu nilai, kemudian Empat nilai kiri atas, kanan atas, kanan bawah dan kiri bawah adalah sama.
2. Terdapat dua nilai, kemudian kiri atas adalah sama dengan kanan bawah, dan mengambil nilai pertama atas-kanan bersamaan dengan kiri bawah, dan mengambil nilai kedua
3 , terdapat tiga nilai, nilai pertama adalah untuk menetapkan atas-kiri; nilai kedua adalah atas-kanan dan bawah-kiri dan mereka akan sama, dan nilai ketiga adalah untuk menetapkan bawah-kanan.
4. Terdapat empat nilai, nilai pertama adalah untuk menetapkan atas-kiri, nilai kedua adalah atas-kanan, nilai ketiga adalah bawah-kanan, dan nilai keempat adalah untuk menetapkan bawah-kiri.
hanya mempunyai satu nilai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>mempunyai dua nilai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>mempunyai tiga nilai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>mempunyai 4 nilai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0 40px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>Sokongan penyemak imbas
IE 9, Opera 10.5, Safari 5, Chrome 4 dan Firefox 4 semuanya menyokong atribut jejari sempadan di atas. Versi awal Safari dan Chrome menyokong atribut -webkit-border-radius, dan versi awal Firefox menyokong atribut -moz-border-radius.
Pada masa ini, untuk memastikan keserasian, anda hanya perlu menetapkan -moz-border-radius dan border-radius pada masa yang sama.
-jejari-sempadan-moz: 15px;
jejari-sempadan: 15px;
(Nota: jejari sempadan mesti diisytiharkan terakhir, jika tidak, ia mungkin tidak sah.)
Walaupun semua penyemak imbas utama menyokong jejari sempadan, pelaksanaannya berbeza dalam beberapa butiran. Apabila warna, lebar, gaya (kotak pepejal, kotak bertitik, dsb.) dan unit empat penjuru adalah sama, hasil pemaparan semua penyemak imbas pada asasnya adalah sama apabila tetapan bagi empat penjuru berbeza, akan ada menjadi perbezaan yang besar.
Bukan semua penyemak imbas menyokong penetapan jejari sudut sebagai nilai peratusan. Pendekatan paling selamat pada masa ini adalah untuk menetapkan gaya dan lebar setiap jidar bulat kepada nilai yang sama dan elakkan menggunakan nilai peratusan.
