Sudut bulat dengan CSS dan JavaScript

 

    & nbsp;   Kandungan pergi ke sini   & nbsp;      

Beberapa tahun yang lalu ini akan menjadi penyelesaian yang boleh diterima. Hari ini, ia adalah hack yang hodoh: itu banyak markup yang berlebihan untuk hiasan visual yang agak tidak penting. Sebenarnya, kod di atas tidak akan berfungsi seperti yang dimaksudkan dalam dokumen yang disampaikan menggunakan Doctype yang ketat - jurang kecil akan muncul di bawah imej sudut, yang disebabkan oleh fakta bahawa imej adalah unsur -unsur dalam talian dan, oleh itu, meninggalkan ruang di bawah imej untuk "ekor" pada huruf seperti 'y' dan 'j'. Penyelesaiannya, seperti yang dijelaskan oleh Eric Meyer dalam imej, jadual dan jurang misteri, adalah untuk menambah peraturan berikut ke lembaran gaya anda:

td img { display: block; }

Ini menghasilkan hasil yang dikehendaki, seperti yang ditunjukkan di sini.

Tetapi, sekarang kami menggunakan hacks CSS untuk memperbaiki hacks meja hodoh! Mari kita lihat cara untuk melaksanakan kesan yang sama hanya menggunakan CSS.

Sebagai peraturan umum, mana -mana imej hiasan harus dilaksanakan sebagai imej latar belakang CSS pada elemen halaman yang ada, dan bukannya jatuh ke halaman yang betul menggunakan tag . Sangat mudah untuk menentukan sama ada imej adalah hiasan atau mengandungi kandungan sebenar: tanya diri anda jika ketiadaan imej akan memberi kesan kepada kandungan keseluruhan halaman. Dalam kes sudut bulat, jawapannya jelas tidak.

imej latar belakang CSS adalah perkara yang sangat kuat. Anda hanya perlu melihat banyak reka bentuk yang indah yang dipamerkan di CSS Zen Garden untuk bukti itu. Menggunakan CSS, imej latar belakang boleh digunakan untuk mana -mana elemen pada halaman. Tambahan pula, ia boleh diulang secara mendatar, menegak atau tidak sama sekali; Ia boleh diletakkan di dalam kawasan latar belakang imej menggunakan pengukuran mutlak, atau relatif kepada salah satu daripada empat sudut; Ia juga boleh dibuat untuk tetap tetap di tempat apabila skrol kandungan elemen. Malangnya, CSS 2 mengenakan satu batasan kecil tetapi ketara: anda hanya boleh menggunakan imej latar belakang tunggal untuk setiap elemen pada halaman. Untuk menjadikan sudut bulat dengan betul pada kita perlu memohon empat imej latar belakang, satu di setiap sudut.

kotak lebar tetap

Jika lebar kotak yang kami gunakan sudut hiasan ditetapkan, separuh daripada masalah telah diselesaikan. Jika kita tahu bahawa kotak itu akan sentiasa menjadi 200 piksel lebar, bukannya mencipta empat imej latar belakang (satu untuk setiap sudut), kita boleh membuat dua: satu untuk bahagian atas kotak dan satu untuk bahagian bawah. Cabaran kini dikurangkan untuk menggunakan dua imej latar belakang ke

kami. Sudah tiba masanya untuk memanfaatkan markup kami.

Kotak dengan sudut bulat tidak akan menyeronokkan jika ia tidak mengandungi sebarang kandungan. Pertimbangkan perkara berikut:

td img { display: block; }

Cukup mudah, ya? Tajuk kotak tinggal di

(saya menganggap

dan

telah digunakan lebih lanjut sehingga hierarki halaman) dan kandungan yang berikut adalah perenggan dan senarai yang tidak teratur. Kunci untuk menyelesaikan masalah dua latar belakang kami terletak pada

, yang datang tepat di bahagian atas kotak. Apa yang perlu kita lakukan ialah menggunakan imej latar belakang ke bahagian atas

, dan satu lagi ke bahagian bawah yang mengandungi

, dan kesannya selesai:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

Klik di sini untuk melihat hasilnya.

Dokumen yang berstruktur dengan baik biasanya penuh dengan cangkuk seperti ini yang boleh dieksploitasi dengan teliti untuk memohon pelbagai latar belakang dan mencapai kesan visual tertentu. Belajar untuk mengenal pasti mereka adalah bahagian penting dalam bekerja dengan CSS.

Elemen bersarang

Memohon empat latar belakang ke Div tunggal masih tidak dapat dicapai. Tetapi bagaimana jika kita bersarang empat div, satu untuk setiap latar belakang? Melakukannya menyelesaikan masalah kami, tetapi datang dengan mengorbankan markup tambahan tanpa nilai struktur:

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

dan, dalam CSS:

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

Kod memaparkan seperti yang ditunjukkan di sini.

Harus jelas apa yang berlaku di sini. Setiap satu daripada empat div diberikan imej latar belakang sudut bulat, diposisikan di bahagian atas kanan, kiri atas, kanan bawah dan bawah kiri masing-masing. Walaupun lebar div yang mengandungi ditetapkan hingga 200px, ia boleh dengan mudah ditetapkan kepada sesuatu yang lebih fleksibel untuk digunakan dengan reka bentuk cecair - sudut masih akan berfungsi, tidak kira berapa besar atau kecil yang mengandungi div.

Kami kini mempunyai penyelesaian kepada masalah ini, yang menggunakan markup yang jauh lebih rendah daripada contoh jadual asal. Tetapi, ia masih tidak sempurna: ia menggunakan tiga div tambahan, yang tidak menambah nilai kepada struktur dokumen keseluruhan. Bolehkah kita melakukan yang lebih baik? Sudah tiba masanya untuk melihat ke JavaScript.

menggunakan dom

Menggunakan JavaScript dan DOM, mungkin untuk memanipulasi struktur dokumen selepas ia dimuatkan oleh penyemak imbas. Sudut bulat adalah kesan persembahan yang boleh disembunyikan daripada ejen pengguna bukan JavaScript tanpa pengurangan yang ketara dalam pengalaman keseluruhan mereka di laman web ini, jadi tidak ada masalah etika dengan menggunakan JavaScript untuk transformasi seperti ini. Penyelesaian terakhir kami hanya memerlukan satu

dalam dokumen sumber. Kami akan menggunakan JavaScript untuk menambahkan secara dinamik tiga div luar yang diperlukan untuk kesan sudut bulat.

Berikut adalah markup:

td img { display: block; }

Saya fikir anda akan bersetuju bahawa tidak banyak yang boleh kita lakukan untuk menjadikannya lebih mudah daripada itu, kecuali mungkin bertukar

untuk

jika kandungannya secara struktural ditakrifkan sebagai perenggan. Membuat suis ini dibiarkan sebagai latihan untuk pembaca.

Sekarang inilah JavaScript:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

Skrip dibahagikan kepada dua bahagian logik. Bahagian pertama melangkah ke atas semua elemen

dalam dokumen, membina pelbagai yang mengandungi 'bulat' dalam atribut kelas mereka (ingat, unsur -unsur boleh mempunyai pelbagai kelas yang dipisahkan oleh ruang). Bahagian kedua skrip melalui setiap elemen ini pada gilirannya, mewujudkan tiga div tambahan dan membungkusnya di sekitar asal. Mari lihat kod untuk itu dengan lebih terperinci:

div.rounded { 
  width: 200px; 
  background: #1b5151 url(200pxbottom.gif) no-repeat bottom center; 
  padding-bottom: 15px; 
} 
div.rounded h3 { 
  padding-top: 15px; 
  background: transparent url(200pxtop.gif) no-repeat top center; 
}

di sini kita mengeluarkan kelas "bulat" sepenuhnya dari asal

kita. Alasan untuk ini akan menjadi jelas dalam CSS; Pada asasnya, kami tidak mahu gaya asal digunakan untuk mempengaruhi elemen itu lagi.

<div ><div><div><div> 
Content goes here 
</div></div></div></div>

kami telah mencipta luar-paling , yang akan digunakan untuk memohon imej latar belakang kanan serta lebar keseluruhan kotak. Perhatikan bahawa kami telah menetapkan kelas kepada 'bulat2'; Ini akan ditakrifkan dalam CSS kami, dengan perbezaan halus dari kelas 'bulat' yang diberikan kepada pelanggan yang tidak dapat dibolehkan JavaScript.

div.rounded { 
  width: 200px; 
  background: #1b5151 url(tr.gif) no-repeat top right; 
} 
div.rounded div { 
  background: transparent url(tl.gif) no-repeat top left; 
} 
div.rounded div div { 
  background: transparent url(br.gif) no-repeat bottom right; 
} 
div.rounded div div div { 
  background: transparent url(bl.gif) no-repeat bottom left; 
  padding: 15px; 
}

DOM W3C tidak menyediakan kaedah langsung untuk menggantikan nod dalam dokumen dengan nod lain. Sebaliknya, anda mesti menggunakan kaedah penggantiChild () nod untuk menggantikan salah satu daripada anak -anaknya dengan nod lain. Trik berguna untuk menggantikan nod yang anda cari adalah untuk mengakses ibu bapa sendiri menggunakan harta ParentNode, kemudian gunakan /#c#.Replacechild untuk menukarnya untuk sesuatu yang lain. Jika itu tidak masuk akal kepada anda, jangan risau - hanya memikirkan garis di atas sebagai menggantikan nod asal kami dengan nod TR baru yang baru saja kami buat.

<div > 
Content goes here. 
</div>

kami kini telah mencipta tiga elemen

baru dan memasukkannya ke dokumen. Semua yang tersisa adalah untuk memasukkan semula nod asal kami, lengkap dengan kandungannya:

td img { display: block; }

Pada ketika ini, pokok dokumen sebenar kami hampir sama dengan yang dalam empat contoh bersarang di atas, satu -satunya perbezaan adalah bahawa elemen luar mempunyai kelas 'bulat2' dan bukannya 'bulat'. Berikut adalah CSS:

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

inilah hasilnya.

set peraturan pertama, untuk div.Rounded, hanya digunakan dalam pelayar yang tidak melaksanakan JavaScript. Perhatikan bahawa lebarnya adalah 170px dan padding 15px, yang menambah sehingga lebar keseluruhan 200px (lebar ditambah padding kiri dan kanan). Jika anda memerlukan ini untuk bekerja di IE 5/Windows, yang menafsirkan nilai padding secara berbeza, anda perlu menggunakan hack model kotak terkenal. Anda telah melihat set peraturan kedua dalam contoh terdahulu.

melihat ke depan

Teknik di atas akan berfungsi dalam semua pelayar moden, dan semua pelayar masa depan yang menyokong piawaian CSS2 dan DOM 2. CSS 3 memperkenalkan beberapa cara baru untuk mencapai kesan ini, yang akan menyebabkan teknik di atas usang. Serta sokongan sudut bulat asli (sudah tersedia dalam keluarga pelayar Mozilla) CSS mempunyai ciri-ciri yang kuat :: di luar elemen pseudo, yang membolehkan unsur-unsur gaya tambahan dimasukkan dengan cara yang serupa dengan contoh JavaScript yang ditunjukkan dalam artikel ini. Jika itu tidak mencukupi, imej sempadan akan membolehkan banyak hiasan sempadan yang anda boleh fikirkan.

Malangnya, ia akan bertahun -tahun sebelum sokongan CSS 3 tersedia secara meluas. Sehingga itu, JavaScript lebih mampu mengambil beberapa kendur.

Soalan Lazim (Soalan Lazim) Mengenai CSS dan JavaScript Bulat Sudut

Bagaimana saya boleh membuat sudut bulat dengan CSS?

Mewujudkan sudut bulat dengan CSS agak mudah. Anda boleh menggunakan harta 'Radius Sempadan' untuk mencapai matlamat ini. Harta 'Radius Sempadan' boleh mempunyai satu, dua, tiga, atau empat nilai. Nilai tunggal akan menggunakan jejari yang sama ke semua empat sudut. Dua nilai akan menggunakan jejari pertama ke sudut kiri dan bawah kanan, dan jejari kedua ke sudut kanan dan bawah kiri. Tiga nilai akan memohon jejari pertama ke kiri atas, yang kedua ke kanan atas dan bawah kiri, dan yang ketiga ke bawah kanan. Empat nilai akan memohon jejari yang berbeza ke setiap sudut, dalam urutan kiri atas, kanan atas, kanan bawah, bawah-kiri.

Bolehkah saya membuat sudut bulat dengan JavaScript? Jika anda perlu membuat sudut bulat secara dinamik berdasarkan input pengguna atau faktor lain, JavaScript mungkin menjadi pilihan yang lebih baik. Anda boleh menggunakan kaedah 'CanvasRenderingContext2D.RoundRect ()' untuk melukis segi empat tepat dengan sudut bulat pada kanvas. Kaedah ini mengambil lima parameter: koordinat X dan Y dari sudut kiri atas segi empat tepat, lebar dan ketinggian segi empat tepat, dan jejari sudut. Jika anda menetapkan harta 'Radius Sempadan' kepada 50%, sudut akan cukup bulat untuk membentuk bulatan. Unsur ini juga perlu mempunyai lebar dan ketinggian yang sama. Sebagai contoh:

div { lebar: 100px; ketinggian: 100px;

radius sempadan: 50%; elemen dengan menentukan nilai yang berbeza untuk harta 'radius sempadan'. Sebagai contoh, hanya untuk mengelilingi sudut kiri atas dan kanan atas div, anda akan menggunakan:

div {

Radius sempadan: 10px 10px 0 0; Sudut. Anda hanya menggunakan harta 'radius sempadan' ke elemen dengan sempadan. Contohnya:

div {
sempadan: 1px pepejal hitam;
radius sempadan: 10px;
}
>
Buat sudut bulat dengan radii yang berbeza pada elemen yang sama dengan menentukan nilai yang berbeza untuk harta 'radius sempadan'. Sebagai contoh, untuk membuat div dengan radius 10px di sudut kiri atas, radius 20px di sudut kanan dan bawah kiri, dan radius 30px di sudut kanan, anda akan menggunakan:
CSS?

Ya, anda boleh membuat sudut elips dengan CSS dengan menentukan dua nilai untuk setiap sudut dalam harta 'Radius Sempadan'. Nilai pertama adalah jejari mendatar, dan nilai kedua ialah jejari menegak. Contohnya:

div {
Radius sempadan: 10px 20px;
}

Ini akan mewujudkan div dengan sudut elips, dengan radius mendatar 10px dan radius menegak 20px.

Bolehkah saya menghidupkan harta 'Radius Sempadan'? Sebagai contoh, secara beransur-ansur mengubah jejari sempadan dari 0 hingga 50% dalam tempoh 2 saat, anda boleh menggunakan:

div {
sempadan-radius: 0; Sudut Div untuk menjadi bulat apabila anda melayang ke atasnya, dan perubahan itu akan berlaku secara beransur-ansur selama 2 saat. Peratusannya adalah relatif terhadap dimensi yang sama elemen. Sebagai contoh, jika anda menetapkan 'radius sempadan' hingga 50%, sudut-sudut akan cukup bulat untuk membentuk bulatan (atau elips, jika lebar dan ketinggian elemen tidak sama). Ini boleh menjadi kesan yang baik untuk gambar kecil atau gambar profil. Contohnya:

img {
Radius sempadan: 10px;
}

Ini akan menggunakan radius 10px ke sudut semua imej.

Atas ialah kandungan terperinci Sudut bulat dengan CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!