Blok dengan sudut bulat dalam contoh html. Membundarkan sudut foto dalam Photoshop

Salam, Kawan. Artikel ini cukup dikhaskan topik popular di kalangan juruweb baru - bulat sudut CSS . Soalan-soalan yang akan saya cuba sampaikan ialah bagaimana untuk membuat sudut bulat elemen laman web hanya menggunakan CSS tanpa menggunakan sebarang imej.

DALAM kaedah ini terdapat kebaikan dan keburukan. Kelebihannya, sudah tentu, tidak perlu membuat imej menggunakan mana-mana penyunting grafik, muat naiknya ke pelayan, dan kemudian susunkannya dengan menggunakan CSS ke tempat yang diperlukan untuk mencipta kesan yang diingini. Dalam kes ini adalah perlu untuk mencipta elemen tambahan dalam kod HTML, dan juga tulis sifat individu bagi setiap daripada mereka.

Bagi minus, satu masalah boleh diperhatikan di sini - harta ini tidak disokong oleh semua pelayar web, terutamanya untuk versi ketinggalan zaman pelbagai pelayar.

Walau bagaimanapun, pembulatan sudut menggunakan CSS menjadi semakin popular. Seperti yang anda mungkin sudah faham, dalam artikel ini kami akan menggunakan sifat yang tersedia dalam CSS 3.

Sudut bulat menggunakan CSS.

Jadi sebagai contoh kita akan mengambil blok elemen DIV dan jadikan bucunya bulat. Sebagai contoh, mari kita buat blok dan tetapkan sifat kepadanya secara langsung dalam kod HTML menggunakan atribut gaya. Mula-mula kita mempunyai elemen blok yang diisi dengan latar belakang mana-mana warna:

Ngomong-ngomong, jika anda perlu mengetahui kod warna yang anda ada di tapak web anda atau di mana-mana tapak web lain, ini akan berguna.

Dan ini adalah bagaimana kita akan melihatnya dalam pelayar web:

Sekarang, untuk mengelilingi sudut, kami akan menggunakan sifat "jejari sempadan", yang boleh diterjemahkan sebagai jejari sempadan. Ya, betul-betul seperti itu, dan tidak seperti yang difikirkan oleh ramai, bahawa ini adalah jejari bingkai atau apa sahaja yang mereka panggil (sempadan). Sifat ini bertanggungjawab khusus untuk jejari sempadan elemen, dan bukan untuk bingkai atau sempadannya, yang mungkin tidak wujud. Walau bagaimanapun, harta itu masih akan berfungsi tanpa menggunakan sempadan pada unsur. Saya harap awak faham apa yang saya nak sampaikan. Nilai untuk hartanah ini ialah sebarang nilai angka, yang boleh digunakan dalam CSS, seperti peratusan, piksel (px), mata (pt) dan sebagainya. Ya, dan ia harus diambil kira harta ini berfungsi pada keempat-empat penjuru elemen sekaligus; sebagai tambahan, anda boleh menentukan jejari yang berbeza untuk setiap sudut, tetapi lebih lanjut mengenainya kemudian. Mula-mula, mari kita tetapkan jejari sudut segi empat tepat kita. Biarkan ia sama dengan 5 piksel:

Kemudian elemen akan kelihatan seperti ini:

Sekarang, saya bercadang untuk memikirkan cara menambah jejari anda sendiri untuk setiap sudut secara berasingan. Untuk melakukan ini, kita boleh menggunakan sifat yang boleh digunakan pada setiap sudut secara berasingan. Jika kita bercakap tentang contoh sebelumnya, maka dalam bentuk penuh sifat untuk elemen akan kelihatan seperti ini:

Jejari-atas-kiri-sempadan:5px; /* sudut kiri atas */ border-top-right-radius:5px; /* sudut kanan atas */ border-bottom-right-radius:5px; /* sudut kanan bawah */ border-bottom-left-radius:5px; /* sudut kiri bawah */

Iaitu, jika kita ingin menetapkan setiap sudut kepada nilainya sendiri, kita mempunyai peluang ini, dan untuk memastikan ini kita mengambil kod berikut:

Dan kemudian kita mendapat hasil ini:

Seperti yang kita dapat lihat, sempadan setiap sudut mempunyai nilai jejarinya sendiri.
Selain itu, CSS membolehkan kami menetapkan nilai untuk sempadan setiap sudut dalam borang nota ringkas, yang akan kelihatan seperti ini:

Di mana nilai akan mengikut urutan ini:

Jejari sempadan: 5px /* sudut kiri atas */ 10px /* sudut kanan atas */ 15px /* sudut kanan bawah */ 20px /* sudut kiri bawah */;

Oleh itu, berdasarkan perkara di atas, menjadi jelas bahawa dengan cara yang sama kita boleh menetapkan sempadan jejari hanya untuk tiga (satu atau dua) sudut:

Inilah rupanya dalam pelayar web:

Jika anda masih belum keliru, mari teruskan. Hakikatnya ialah jejari untuk setiap sempadan sudut boleh ditentukan bukan dalam satu nilai, seperti yang kita bincangkan di atas, tetapi dalam dua. Iaitu, dua nilai untuk setiap sudut. Dalam kes ini, nilai pertama akan menetapkan jejari untuk sudut secara mendatar, dan nilai kedua akan menetapkan jejari secara menegak. Mari kita mulakan dengan satu sudut dahulu:

Dalam contoh ini, kami hanya mempengaruhi sudut kiri atas elemen:

Jika anda membalikkan nilai, maka elemen akan kelihatan seperti ini:

Nampaknya ia boleh berakhir di sana, tetapi tidak. Ada satu lagi helah. Dalam nilai harta, kita boleh menggunakan garis miring (/) antara nilai. Garis miring boleh membantu kita menggabungkan nilai dengan nilai lain. Secara umum, lebih mudah untuk menunjukkan daripada memberitahu. Mari kita mulakan dengan sesuatu yang mudah. Mari kita andaikan bahawa kita memerlukan jejari mendatar ialah 35 piksel dan jejari menegak ialah 5. Selain itu, nilai ini harus digunakan untuk semua sudut. Kemudian kita boleh menulis seperti ini:

Dan dapatkan keputusan ini:

Sekarang mari kita lihat contoh yang lebih rumit:

DALAM dalam kes ini nilai sebelum tanda slash (/) akan dikaitkan dengan jejari mendatar sudut, dan selepas tanda dengan yang menegak. Dalam kes ini, nilai akan berkaitan antara satu sama lain dengan cara ini:

Jejari sempadan-atas-kiri: 20px 15px; jejari sempadan-atas-kanan: 10px 25px; sempadan-bawah-kanan-jejari: 40px 15px; sempadan-bawah-kiri-radius: 10px 25px;

Dan hasilnya akan seperti ini:

Dan pada akhir artikel, mari kita bercakap tentang sokongan pelayar yang berbeza daripada harta ini.

Membulat sudut dalam pelbagai pelayar web.

Perlu diperhatikan di sini bahawa sifat ini tidak disokong oleh semua versi penyemak imbas. Harta ini disokong dalam IE9+, Firefox 4+, Chrome, Safari 5+ dan Opera.
Tetapi untuk sesetengah versi penyemak imbas yang tidak menyokong sifat ini, terdapat sifat bukan standard yang menambah apa yang dipanggil awalan atau awalan pada harta tersebut.
Chrome sebelum versi 4.0, Safari sebelum versi 5.0, iOS menggunakan sifat bukan standard -webkit-border-bottom-left-radius.
Firefox sebelum versi 4.0 menggunakan sifat bukan standard -moz-border-radius-bottomleft.
Dalam kes ini, kita perlu menduplikasikan sifat menggunakan awalan ini. Sebagai contoh, jika kita mempunyai set harta untuk sempadan kiri bucu atas nilai yang sama dengan lima piksel:

Jejari sempadan-atas-kiri: 5px;

Kemudian harta itu, menduplikasinya menggunakan awalan, akan kelihatan seperti ini:

Webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; sempadan-atas-kiri-radius: 5px;

Saya sangat berharap saya dapat menerangkan segala-galanya dengan jelas dan anda kini memahami cara membuat sudut bulat menggunakan CSS sahaja.
Semoga berjaya!

Bingkai CSS3 melengkapkan keupayaan untuk memformat sempadan elemen dengan sifat yang membenarkan mengelilingi sudut elemen, dan juga menggunakan Imej untuk mereka bentuk sempadan unsur.

Sudut bulat dan bingkai gambar

1. Bucu bulat dengan jejari sempadan

Sokongan penyemak imbas

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Pelayar Android: 4.1
Chrome untuk Android: 44

Harta ini membolehkan anda membundarkan penjuru huruf kecil dan elemen blok. Lengkung bagi setiap sudut ditakrifkan menggunakan satu atau dua jejari yang menentukan bentuknya − bulatan atau elips. Jejari digunakan pada keseluruhan latar belakang, walaupun elemen tidak mempunyai sempadan, kedudukan tepat sekan ditentukan menggunakan sifat klip latar belakang.

Sifat jejari sempadan membolehkan anda membundarkan semua penjuru sekali gus dan menggunakan sifat jejari sempadan-atas-kiri-jejari , jejari sempadan-atas-kanan , jejari sempadan-bawah-kanan , jejari sempadan-bawah-kiri anda boleh bulat setiap sudut secara berasingan .

Jika anda menetapkan dua nilai untuk sifat jejari sempadan, nilai pertama akan membundarkan kiri atas Dan sudut kanan bawah, dan yang kedua - atas kanan Dan dibahagian bawah kiri.

Nilai yang ditentukan melalui / tentukan mendatar Dan jejari menegak. Harta tersebut tidak diwarisi.

Pilihan

Div (lebar: 100px; tinggi: 100px; jidar: 5px pepejal;).r1 (jejari sempadan: 0 0 20px 20px;).r2 (jejari sempadan: 0 10px 20px;).r3 (jejari sempadan: 10px 20px). ; ;) .r4 (jejari sempadan: 10px/20px;) .r5 (jejari sempadan: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (jejari sempadan: 10px 20px 30px 40px/30px) ( jejari sempadan: 50%;).r8 (jejari sempadan-bawah: tiada; jejari sempadan-bawah: tiada; jejari sempadan: 30px/90px;).r9 (jejari-kiri-bawah-sempadan: 100px;).r10 ( sempadan -jejari: 0 100%;).r11 (sempadan-jejari: 0 50% 50% 50%;).r12 (sempadan-atas-kiri-jejari: 100% 20px; sempadan-bawah-kanan-jejari: 100% 20px ;)
nasi. 1. Contoh pelbagai pilihan membulatkan sudut blok

2. Imej sempadan

Sokongan penyemak imbas

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -kit web-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Pelayar Android: 4.4, 4.1 -kit web-
Chrome untuk Android: 42

Harta ini membolehkan anda menetapkan imej sebagai bingkai elemen. Keperluan utama untuk imej ialah ia mestilah simetri. Harta tanah termasuk nilai berikut: (imej sempadan: hirisan sumber lebar pada permulaan ulangan;) .

Dengan bantuan ini imej ringkas Anda boleh mendapatkan bingkai ini untuk elemen.

/* Contoh 1 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* Contoh 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); keping-imej sempadan: 30; ulang-imej sempadan: bulat; )
nasi. 2. Contoh reka bentuk sempadan blok menggunakan imej

Potongan A - B - C - D membentuk sudut bingkai, dan bahagian reka bentuk yang terletak di antara mereka mengisi ruang yang tinggal bingkai mengikut nilai yang diberi sifat-sifat berulang-imej sempadan. Saiz bahagian sudut (dalam contoh ini nombor 30) ditetapkan menggunakan nilai sifat keratan imej sempadan.

2.1. lebar-imej sempadan

Harta ini menentukan lebar imej untuk sempadan elemen. Jika lebar tidak ditentukan, ia lalai kepada 1.

lebar-imej sempadan
Nilai:
panjang	Menetapkan lebar sempadan dalam unit panjang - px / em . Anda boleh menetapkan dari satu hingga empat nilai pada satu masa. Jika satu nilai ditentukan, maka lebar semua sisi bingkai adalah sama, dua nilai menentukan lebar bahagian atas-bawah dan kanan-kiri, dsb.
nombor	Nilai berangka yang mana nilai lebar sempadan didarabkan.
%	Lebar bingkai elemen dikira secara relatif kepada saiz imej. Mendatar relatif kepada lebar, menegak - relatif kepada ketinggian.
auto	Sepadan dengan nilai sempadan-imej-slice.
permulaan
mewarisi

Sintaks

Div (lebar-imej sempadan: 30px;) Rajah. 3. Contoh penetapan lebar bingkai imej menggunakan pelbagai jenis nilai

2.2. sumber-imej sempadan

Harta ini menentukan laluan ke imej yang akan digunakan untuk menghiasi sempadan blok.

Sintaks

Div (sumber-imej-sempadan: url(border.png);)

2.3. unsur-unsur kepingan-imej sempadan

Harta ini menentukan saiz bahagian imej yang digunakan untuk mentakrifkan sempadan elemen dan membahagikan imej kepada sembilan bahagian: empat sudut, empat tepi antara sudut dan bahagian tengah.


Nilai:
nombor	Saiz bahagian bingkai boleh ditetapkan menggunakan satu, dua, tiga atau empat nilai. Satu nilai menetapkan sempadan menjadi saiz yang sama pada setiap sisi elemen. Dua nilai: yang pertama menentukan saiz bahagian atas dan had bawah, kedua - kanan dan kiri. Tiga nilai: yang pertama menentukan saiz sempadan atas, yang kedua - kanan dan kiri, dan yang ketiga - sempadan bawah. Empat nilai: Mentakrifkan saiz sempadan atas, kanan, bawah dan kiri. Nilai angka mewakili bilangan px.
%	Saiz sempadan dikira secara relatif kepada saiz imej. Mendatar relatif kepada lebar, menegak - relatif kepada ketinggian.
isi	Nilai ditunjukkan bersama dengan nombor atau peratusan. Jika dinyatakan, imej tidak terputus oleh pinggir dalam bingkai, tetapi juga memenuhi kawasan di dalam bingkai.
permulaan	Tetapkan sifat ini kepada nilai lalainya.
mewarisi	Mewarisi nilai sifat ini daripada elemen induk.

Sintaks

Div (kepingan-imej-sempadan: 50 20;)
nasi. 4. Contoh menentukan kepingan bingkai imej

2.4. ulang-imej sempadan

Kawalan harta padding imej latar belakang ruang antara sudut bingkai. Boleh ditentukan menggunakan sama ada nilai tunggal atau sepasang nilai.

Sintaks

Div (ulang-imej sempadan: ulang;) Rajah. 5. Contoh mengulang bahagian tengah bingkai imej menggunakan pelbagai jenis nilai

2.5. permulaan-imej sempadan

Harta ini membolehkan anda mengalihkan bingkai imej melepasi sempadan elemen dengan panjang yang ditentukan. Boleh ditentukan menggunakan sama ada satu atau empat nilai.

Sintaks

Div (permulaan-imej-sempadan: 10px;)
nasi. 6. Contoh menganjakkan bingkai imej menggunakan pelbagai jenis nilai

3. Bingkai luar mengimbangi garis luar mengimbangi

Sifat menentukan jarak antara sempadan elemen sempadan dan sempadan luar yang dibuat menggunakan sifat garis besar.

/*Rajah 1:*/ img ( sempadan: 1px merah jambu pepejal; garis besar: 1px kelabu putus-putus; outline-offset: 3px; ) /*Rajah 2:*/ img ( lebar sempadan: 1px 10px; gaya sempadan: pepejal; warna sempadan: merah jambu; garis besar: kelabu putus-putus 1px; mengimbangi garis besar: 3px; ) /*Rajah 3:*/ img ( sempadan: 3px sisipan merah jambu; garis besar: kelabu putus-putus 1px; mengimbangi garis besar: 1px; )

nasi. 7. Contoh menghias imej dengan bingkai luar

4. Bingkai kecerunan

Nilai imej sempadan boleh bukan sahaja imej, tetapi juga isian kecerunan.

Bingkai lut sinar

Salah satu warna adalah lutsinar. Dengan cara ini, anda boleh menetapkan sempadan untuk semua sisi elemen sekaligus atau secara berasingan untuk setiap sisi. Ketebalan sempadan dikawal oleh sifat lebar sempadan.

* (saiz kotak:kotak-sempadan;).balut ( ketinggian: 200px; padding: 25px; latar belakang: #00E4F6; ) .gradient ( tinggi: 150px; lebar: 50%; jidar: 0 auto; jidar: 10px padu lutsinar ; imej sempadan: kecerunan linear(ke kanan, lutsinar 0%, #ADF2F7 100%); kepingan-imej sempadan: 1; )

Sampul surat pos

* (saiz kotak:kotak-sempadan;).balut ( tinggi: 200px; padding: 25px; ) .gradient ( tinggi: 150px; lebar: 50%; jidar: 0 auto; jidar: 10px pepejal lutsinar; imej sempadan: 10 berulang-linear-gradient(45deg, #A7CECC, #A7CECC 10px, 10px telus, 20px telus, #F8463F 20px, #F8463F 30px, 30px telus, 40px telus); )

CTRL+N, atau pilih fungsi "Buat" dalam senarai juntai bawah dari menu "Fail". Seterusnya, daripada senarai yang sama, pilih operasi "Import" atau panggilnya dengan kombinasi kekunci CTRL+I. Seterusnya, tentukan laluan ke fail imej dalam kotak dialog dan klik butang "Import". Milik anda akan dipaparkan pada yang ini.

Dalam bar alat, cari pelancaran "Editor Nod" dan pilih alat "Bentuk". Alat ini juga boleh dipanggil dengan menekan kekunci F10.

Di sebelah kanan sudut anda perlu membulatkan, klik kiri pada sempadan imej. akan muncul nod baharu dalam imej, sebagai tambahan kepada empat sudut. Seterusnya, pilih pilihan Convert Line To Curve dalam panel Node Editor. Tanda bulat akan muncul di sebelah kiri nod yang baru dibuat.

Pada jarak yang sama dari sudut, tambahkan nod baharu pada bahagian serenjang imej. Tanpa menukar alat Shape, klik dua kali pada nod sudut utama, ia akan dipadamkan. Sudut bulat imej akan menjadi ketara dengan serta-merta. Anda boleh menggunakan tanda panduan garis lurus untuk menukar jejari sudut.

sangat dengan cara yang mudah(menggunakan objek vektor) apa-apa pun boleh dilakukan sudut dalam imej segi empat tepat. Tanpa terpaksa kaedah yang diterangkan di atas menyunting nod, lukis segi empat tepat dengan saiz yang sama bersebelahan dengan imej yang diimport dengan Rectangle Tool atau panggil alat dengan kekunci F6.

Dengan alat "Bentuk" yang sudah biasa kepada anda, klik pada segi empat tepat dan seret tetikus ke atas mana-mana nodnya ke arah segi empat tepat. Sudut akan dibulatkan. Jejari kelengkungan boleh dilaraskan dengan alat yang sama.
Tandakan imej anda dengan anak panah Alat Pilih.
Seterusnya, dalam senarai menu utama, cari pelancaran "Kesan" dan pilih pilihan "PowerClip" dan fungsi "Place Inside Container" daripada senarai juntai bawah. Gunakan anak panah lebar untuk menghala ke segi empat tepat yang anda lukis dengan bucu bulat. Ia akan menjadi bingkai di mana imej anda akan diletakkan.

Nota

Sila ambil perhatian bahawa apabila anda mengimport imej ke dalam dokumen Corel Draw fail asal Imej tidak diubah, jadi anda boleh menggunakannya dalam bentuk asalnya jika anda tidak berpuas hati dengan hasil sudut bulat.

Nasihat yang berguna

Menggunakan fungsi PowerClip, anda boleh meletakkan imej dalam pelbagai bingkai bentuk yang paling pelik.

Sumber:

Panduan Rasmi untuk Corel Draw, M. Matthews, K. Matthews, 1997
Bagaimana untuk melicinkan sudut tajam?

Anda perlu

- komputer
- program Adobe Photoshop
- foto

Arahan

Klik kanan pada Lapisan latar belakang, pilih Lapisan Pendua dan klik OK (atau Ctrl+J). Kemudian buat lapisan baru(Ctrl+Shift+N), letakkannya di antara latar belakang dan salinannya seperti yang ditunjukkan dalam tangkapan skrin (anda boleh mengisinya dengan beberapa warna, contohnya putih). Lumpuhkan lapisan terkunci (klik pada "mata" di sebelah kiri) atau padamkannya.

Dalam palet alat, cari butang dengan segi empat tepat (Rectangle Tool) dan tahan dengan butang kiri tetikus. akan muncul menu tambahan di mana diperlukan (Alat Segiempat Bulat). Tetapkan tetapan di bahagian atas sama seperti dalam tangkapan skrin, dan tukar medan Radius mengikut citarasa anda (semakin besar, semakin bulat sudutnya, dan semakin banyak imej akan dipangkas.

Kemudian pilih bahagian foto yang ingin anda gunakan (contohnya, sebagai avatar). Jika anda membuat kesilapan, klik Kunci Esc dan ulangi pemilihan. Selepas serpihan yang diperlukan akan diserlahkan, klik padanya Klik kanan tetikus dan pilih Buat Pilihan... dan klik OK.

Selesai, anda mempunyai lapisan foto dengan sudut bulat. Kini Lapisan 2 (yang berfungsi sebagai latar belakang) boleh diisi dengan sebarang warna atau dibiarkan telus.

Video mengenai topik

Nota

Fail png lutsinar - format yang hebat, walau bagaimanapun, bukan semua perkhidmatan dalam talian ( media sosial, blog, dsb.) menyokong fail png telus. Sekiranya kesan sudut bulat tidak berfungsi, ada jalan keluar lain.

Pilih untuk latar belakang(Lapisan 2) ialah warna yang paling hampir dengan set pada halaman tempat anda meletakkan foto. Kemudian simpan fail dalam format jpg.

Selamat pagi, tengahari, petang atau malam semua. Dmitry Kostin sentiasa bersama anda. Entah bagaimana saya melihat melalui gambar yang berbeza dan kemudian saya menyukai sebahagian daripada mereka. Dan mereka menyukainya kerana mereka mempunyai tepi bulat. Ia serta-merta kelihatan lebih menarik. Tidakkah anda fikir begitu? Dan itulah sebabnya dalam pelajaran hari ini saya ingin memberitahu anda cara membulatkan sudut dalam Photoshop untuk menjadikan foto kelihatan lebih menarik.

Apa yang saya suka tentang Photoshop ialah dalam banyak kes perkara yang sama boleh dilakukan dalam beberapa cara. Jadi di sini. Mari mulakan dengan photoshop kami.

Melicinkan Menggunakan Sempadan

Kaedah ini serupa dengan yang sebelumnya, tetapi masih sangat berbeza. Kami akan melakukan segala-galanya dengan imej yang sama.

Dengan mencipta bentuk

Kaedah ketiga sudah berbeza secara radikal daripada dua sebelumnya. Jadi berehat selama beberapa saat dan teruskan. Saya tidak akan menukar imej dan akan memuatkan kereta ini ke dalam Photoshop sekali lagi.

Adakah anda melihat apa yang anda berakhir dengan? Gambar mempunyai tepi bulat, dan semuanya kerana ia dipaparkan hanya di tempat segi empat tepat bulat yang dilukis. Tetapi kini anda boleh memangkas foto tambahan menggunakan alat "Bingkai", atau anda boleh segera menyimpan gambar dan anda sudah pun mempunyai imej berasingan dengan sudut bulat.

Cuba lakukan segala-galanya sendiri, dan pada masa yang sama beritahu saya kaedah mana yang dibentangkan lebih disukai untuk anda.

Dan dengan cara ini, jika anda mempunyai jurang dalam Photoshop atau anda hanya mahu meneroka sepenuhnya secepat mungkin, maka saya sangat mengesyorkan anda menonton satu kursus photoshop yang bagus untuk pemula. Kursus ini dilakukan dengan baik, segala-galanya diberitahu dan ditunjukkan hanya hebat, dan setiap bahan dibincangkan dengan terperinci.

Baiklah, saya sedang menamatkan pelajaran saya untuk hari ini. Jangan lupa untuk melanggan artikel baharu dan kongsikan ini dengan rakan anda. Saya gembira melihat anda di blog saya. Saya tunggu awak lagi. Selamat tinggal.

Salam sejahtera, Dmitry Kostin

Semua orang telah lama bosan dengan sudut segi empat tepat tradisional dalam reka bentuk laman web. Sudut bulat adalah dalam fesyen, yang dibuat bukan menggunakan imej, tetapi melalui gaya, yang mana sifat jejari sempadan digunakan. Harta ini boleh mempunyai satu, dua, tiga atau empat nilai yang dipisahkan oleh ruang, yang menentukan jejari semua sudut atau setiap satu secara individu.

Dalam jadual 1 diberi kuantiti yang berbeza nilai dan jenis blok yang diperolehi dalam kes ini.

Kod	Penerangan	Lihat
div ( jejari sempadan: 10px; )	Jejari pembulatan untuk semua sudut sekaligus.
div ( jejari sempadan: 0 10px; )	Nilai pertama menetapkan jejari penjuru kiri atas dan kanan bawah, nilai kedua menetapkan jejari untuk bahagian atas kanan dan kiri bawah.
div ( jejari sempadan: 20px 10px 0; )	Nilai pertama menetapkan jejari sudut kiri atas, yang kedua - kedua-dua kanan atas dan kiri bawah, dan nilai ketiga - kanan bawah.
div ( jejari sempadan: 20px 10px 5px 0; )	Menetapkan jejari sudut kiri atas, kanan atas, kanan bawah dan sudut kiri bawah secara berurutan.

Contoh 1 menunjukkan cara membuat blok dengan bucu bulat.

Contoh 1. Sudut bongkah

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Jejari

Me ialah bentuk tambahan bagi kes akusatif I.

Hasilnya contoh ini ditunjukkan dalam Rajah. 1.

nasi. 1. Sekat dengan bucu bulat

Kesan yang menarik boleh diperoleh jika anda menetapkan jejari pembundaran menjadi lebih besar daripada separuh ketinggian dan lebar elemen. Dalam kes ini, anda akan mendapat bulatan. Contoh 2 menunjukkan cara membuat butang bulat dengan gambar.

Contoh 2: Butang bulat

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Butang