Sebelum kemunculan CSS3, untuk menambah elemen halaman web seperti borang atau butang, sudut bulat, adalah perlu untuk menggunakan beberapa imej dan banyak penanda tambahan. Nasib baik, kini bulat sudut CSS menjadikannya sangat mudah untuk dibuat. Ini juga boleh dilakukan menggunakan sifat jejari sempadan.

Anda boleh menggunakan sifat CSS3 ini untuk penyemak imbas berikut:

• Chrome 6+;
• Firefox 4+;
• Safari 5+;
• IE9+ ;
• Opera 10.5+;
• Android 2.1+;
• iOS 3.1+.

Jejari sudut sempadan dalam CSS

Kami akan bekerjasama dengan kelas "kotak maklumat". Ini boleh menjadi kawasan halaman web anda dengan Maklumat perhubungan dan anda mahu dengan menggunakan CSS mengelilingi sudut.

Tulis kod HTML elemen yang ingin anda bulatkan:

Kotak maklumat ( -webkit-border-radius: 20px; border-radius: 20px; background-color: #000000; (

Nota:

Kami telah menambahkan kedua-dua versi vendor harta dan versi biasa. Kami juga menambah warna latar belakang. Untuk jejari sudut bingkai dipaparkan dengan betul, latar belakang elemen mestilah berbeza daripada latar belakang kawasan di mana elemen diletakkan. Jika tidak, anda perlu menambah gaya sempadan, lebar dan warna.

Sebelum membuat penjuru bulat CSS, satu perkara yang perlu diberi perhatian ialah dalam contoh yang diberikan, keempat-empat penjuru bingkai akan mempunyai jejari yang sama (20px).

Sudut yang tidak sama

Anda juga boleh membuat panel dengan sudut bulat yang berbeza antara satu sama lain. Ini boleh dilakukan dengan menambah untuk sifat CSS berbilang nilai. Dengan pintasan CSS anda boleh menentukannya pada satu baris. Urutan pemberian nilai ialah: kiri atas, kanan atas, kanan bawah, kiri bawah:

Kotak maklumat ( -webkit-border-radius: 20px 60px 40px 30px; jejari sempadan: 20px 60px 40px 30px; warna latar belakang: #000000; (

Cara membuat bulatan

Kesan lain yang boleh anda buat dengan harta ini ialah imej bulat. Jika anda mempunyai imej yang berbentuk segi empat sama sempurna, anda boleh menggunakan CSS untuk membulatkan penjuru imej, dan kemudian bingkai itu akan "memotong" tepi imej dan mencipta bulatan yang sempurna.

Katakan anda mempunyai imej segi empat sama dalam penanda HTML anda yang mempunyai kelas "bio-pic". Anda boleh membuat imej ini bulat dengan kod CSS berikut:

img.bio-pic ( -webkit-border-radius: 50%; border-radius: 50%; (

Dalam kes ini, tidak perlu menetapkan warna latar belakang atau warna sempadan kerana anda menambah gaya ini pada imej, kesan sudut bulat akan berfungsi kerana imej akan berbeza daripada warna latar belakang yang diletakkan.

Terjemahan artikel "Sudut Bulat dengan Jejari Sempadan CSS3" telah disediakan oleh pasukan projek yang mesra.

baik buruk

Dalam pelajaran sebelumnya, kami belajar cara menetapkan sempadan untuk elemen. Kami juga melihat sifat seperti warna sempadan dan gaya sempadan , yang anda boleh menyesuaikan warna dan gaya sempadan. Walau bagaimanapun, semua bingkai kami keluar dengan sudut tepat. Sekarang kami akan menunjukkan kepada anda cara membuat sudut bulat dalam CSS untuk sempadan.

Cara Membulat Sudut: Harta jejari sempadan CSS3

Pembundaran sudut dalam CSS boleh dilakukan untuk mana-mana elemen pada halaman HTML. Untuk melakukan ini, anda perlu menggunakan sifat jejari sempadan padanya dengan nilai yang sesuai. Selalunya nilai dinyatakan dalam piksel, tetapi unit lain juga boleh digunakan, seperti em atau peratusan (dalam kes kedua, pengiraan adalah relatif kepada lebar blok).

Kesan daripada harta ini hanya akan ketara jika elemen yang digayakan mempunyai latar belakang dan/atau jidar berwarna. Sebagai contoh:

BorderElement (warna latar belakang: #EEDDFF; sempadan: 6px pepejal #7922CC; jejari sempadan: 25px; )

Gaya yang diterangkan di atas akan menghasilkan hasil berikut pada elemen 200x200 piksel:

Anda juga boleh membuat tepi bulat hanya untuk sudut atas atau bawah elemen, atau berikan setiap sudut jejari pembulatan yang berbeza - banyak ruang untuk imaginasi! Contoh:

BorderElement (warna latar belakang: #EEDDFF; sempadan: 6px pepejal #7922CC; jejari sempadan: 25px; ) .borderElement1 (warna latar belakang: #FFE8DB; sempadan: 6px pepejal #FF5A00; jejari sempadan: 15px 100px 15px 100px; )

Tetapi bukan itu sahaja: bukannya sudut bulat yang ringkas, anda boleh menentukan pembundaran elips. Untuk melakukan ini, anda perlu menentukan dua nilai yang dipisahkan oleh garis miring (untuk separuh paksi mendatar dan menegak elips). Mari kita berikan contoh pada blok 150x450 piksel:

BorderElement (warna latar belakang: #EEDDFF; sempadan: 6px pepejal #7922CC; jejari sempadan: 280px/100px; )

Anda boleh mencampurkan nilai (iaitu menggunakan kedua-dua bulat biasa dan elips dalam gaya yang sama), dan anda juga boleh menambah gaya peribadi untuk setiap sudut menggunakan sifat yang sesuai:

• sempadan-atas-kiri-radius - untuk sudut kiri atas;
• jejari sempadan-atas-kanan - untuk sudut kanan atas;
• sempadan-bawah-kiri-radius - untuk sudut kiri bawah;
• jejari sempadan-bawah-kanan - untuk sudut kanan bawah.

Prinsip membulatkan sudut

Imej di bawah menunjukkan cara pembundaran sudut dikira dalam CSS. Jadi, jika nilai tunggal ditentukan untuk sudut - contohnya, 20px - ini bermakna pembundaran akan berlaku di sepanjang bulatan dengan jejari 20 piksel. Dalam kes di mana dua nilai ditentukan dipisahkan dengan garis miring, contohnya, 30px/20px , sudut akan dibundarkan di sepanjang elips. Nilai pertama dalam kes ini ialah panjang separuh paksi mendatar elips - 30px, dan nilai kedua ialah panjang separuh paksi menegak - 20px:

Harta benda jejari sempadan CSS disokong oleh semua orang versi moden pelayar.

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.

Pandangan Penerangan Kod

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 div ( latar belakang: #007E3E; /* Warna latar belakang */ warna: #fff; /* Warna teks */ padding: 10px; /* Margin di sekeliling teks */ jejari sempadan: 5px; /* Sudut */ ) Saya - bentuk tambahan bagi kes akusatif daripada 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 butang ( latar belakang: #f2f6f8; /* Warna latar belakang */ sempadan: 1px pepejal #7a7b7e; /* Pilihan sempadan */ lebar: 60px; /* Lebar butang */ tinggi: 60px; /* Tinggi */ jejari sempadan: 30px;)

Hasil daripada contoh ini ditunjukkan dalam Rajah. 2.

nasi. 2. Butang bulat

DALAM penyemak imbas Opera fillet to digunakan secara salah jika sempadan tidak ditentukan melalui harta sempadan.

Sifat jejari sempadan boleh digabungkan dengan sifat lain, contohnya, menambah bayang pada elemen. Dalam contoh 3, satu set bulatan dibuat, salah satu daripadanya diserlahkan menggunakan box-shadow . Set ini boleh digunakan untuk menavigasi halaman atau foto.

Contoh 3. Bercahaya

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Badan bercahaya ( latar belakang: #608DA2; /* Latar belakang halaman web */ ) ul (gaya senarai: tiada; /* Alih keluar penanda */ ) li ( paparan: blok sebaris; /* Elemen blok sebaris */ sempadan: pepejal 2px #fff; /* Outline parameter */ margin-right: 5px; /* Right margin */ background: #000; /* Black background */ width: 10px; height: 10px; /* Width and height */ border -radius : 10px; /* Buat bulatan */ ) li.active ( latar belakang: #b00; /* Latar belakang merah */ box-shadow: 0 0 4px 2px #fff; /* Glow parameters */ )

Hasil daripada contoh ini ditunjukkan dalam Rajah. 3.

nasi. 3. Bercahaya di sekeliling bulatan

DENGAN menggunakan jejari sempadan Anda boleh membuat bukan sahaja bulatan, tetapi juga elips, serta pembulatan elips pada blok. Untuk melakukan ini, anda perlu menulis bukan satu nilai, tetapi dua, dipisahkan dengan garis miring. Menulis 20px/10px bermakna jejari mendatar fillet ialah 20 piksel dan jejari menegak ialah 10 piksel. Contoh 4 menunjukkan cara membuat sudut elips untuk menambah kapsyen gaya buku komik pada foto.

Contoh 4: Elips

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Sudut elips div ( kedudukan: relatif; ) rentang ( kedudukan: mutlak; /* Kedudukan mutlak*/ latar belakang: rgba(255,255,255,0.9); /* Putih latar belakang lut sinar*/ ) .bulb1 ( lebar: 10px; tinggi: 10px; /* Lebar dan tinggi */ kiri: 65px; atas: 85px; /* Kedudukan */ jejari sempadan: 10px; /* Tukarkannya menjadi bulatan */ ) .bulb2 ( lebar: 20px; tinggi: 14px; /* Lebar dan tinggi */ kiri: 45px; atas: 60px; /* Kedudukan */ jejari sempadan: 10px/6px; /* Tukar kepada elips */ ) .bulb3 ( kiri: 10px; atas: 15px; /* Kedudukan */ padding: 5px 10px; border-radius: 60px/15px; /* Mencipta elips */ ) Anda adalah guru anda sendiri

Hasil daripada contoh ini ditunjukkan dalam Rajah. 4.

nasi. 4. Menggunakan bucu elips

Anda juga boleh menukar rupa sudut pada imej dengan menambahkan sifat jejari sempadan pada pemilih img, seperti ditunjukkan dalam Contoh 5.

Contoh 5: Imej

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Badan imej ( latar belakang: #4b5457; ) img ( jejari sempadan: 10px; )

Semua pelayar moden piawaian sokongan penanda hiperteks Penggayaan HTML5 dan CCS3. Dan jika tapak anda (templat) menyokong piawaian moden, maka anda boleh membuat perubahan pada reka bentuk, seperti sudut pembulatan, bayang-bayang, isian kecerunan, tanpa menggunakan bantuan editor grafik.

Juruweb menggunakannya di mana-mana sahaja sudut bulat dalam blok dan bingkai di laman web. Dalam artikel ini saya akan memberitahu anda bagaimana untuk membulatkan sudut gambar dan gambar di tapak tanpa menggunakan program pihak ketiga, hanya menggunakan CSS.

Agar contoh yang diberikan dalam artikel dapat dipaparkan dengan betul pada skrin anda, anda mesti menggunakan sepenuhnya versi terkini pelayar, FireFox, Chrome dan yang dibuat berdasarkannya: Yandex.Browser, Amigo dan sebagainya.

Bucu pembulatan blok DIV

Menurut piawaian CSS3, untuk DIV mempunyai bucu bulat, ia perlu digayakan jejari sempadan, contohnya seperti ini:

Jejari sempadan: 10px;

Untuk kejelasan, mari kita lukis dua blok dengan sudut lurus dan bulat:

Sekat dengan sudut tepat

Sekat dengan sudut bulat

Membulat sudut gambar

Dengan analogi dengan contoh di atas, anda boleh membulatkan sudut imej di tapak, contohnya gambar. Untuk kejelasan, mari bulatkan sudut untuk foto dari halaman

Berikut ialah imej tanpa pemprosesan CSS

Dan kini dengan sudut bulat:

Jejari sempadan: 10px;

Untuk menjadikannya benar-benar "cantik", mari tambahkan sedikit tepi dari awal...

Jejari sempadan: 10px; sempadan: 5px #ccc pepejal;

dan kemudian bayang-bayang:

Jejari sempadan: 10px; sempadan: 5px #ccc pepejal; bayang-kotak: 0 0 10px #444;

Pilihan di bawah (sudut bulat dengan bayang tanpa sempadan) kelihatan sangat serupa dengan pad tetikus:

Jejari sempadan: 10px; bayang-kotak: 0 0 10px #444;

Dan akhirnya, ejekan sepenuhnya terhadap imej itu

Jejari sempadan: 50%; sempadan: 5px #cfc pepejal; bayang-kotak: 0 0 10px #444;

Jika anda membuka imej dalam tetingkap baharu, anda akan melihat bahawa ia (imej) tidak berubah, dan semua sudut, bayang-bayang dan sebagainya hanyalah hasil pemprosesan CSS gaya oleh penyemak imbas anda.

Penyimpangan lirik yang kecil

Gaya sempadan meningkatkan saiz imej dengan jumlah sempadan. Jika nilai ditentukan sempadan: 5px, maka imej akhir akan menjadi lebih lebar dan tinggi sebanyak 10 piksel. Perlu diingat ini, dalam beberapa kes susun atur tapak mungkin tidak berfungsi.

Satu gaya bayangan kotak tidak menjejaskan saiz gambar, bayang-bayang seolah-olah bergerak unsur jiran. Apabila menggunakannya, susun atur tapak tidak terjejas.

Cara Membundarkan Sudut Imej dalam WordPress

Dalam semua contoh di atas, saya menulis gaya terus dalam teg kod html. Sebagai contoh, yang terakhir kelihatan seperti ini:

Ini bagus apabila anda perlu menyusun semula satu gambar atau gambar. Bagaimana jika anda ingin mengubah segala-galanya? Nah, anda tidak akan memanjat ke seluruh tapak anda untuk mengedit paparan setiap satu. Dalam kebanyakan kes Tag WordPress IMG mentakrifkan beberapa kelas gaya. Satu dengan nama unik fail imej, satu lagi mengikut saiz, dan satu lagi mengikut penjajaran. Anda boleh menambah salah satu daripada mereka dengan parameter di atas.

Sebagai contoh, untuk semua imej yang penjajaran tidak dinyatakan, dalam fail style.css milik anda Tema WordPress tulis yang berikut:

Alignnone ( jejari sempadan: 10px; sempadan: 5px #cfc pepejal; bayang kotak: 0 0 10px #444; )

Sama ada yang paling kaedah keras untuk semua orang yang mempunyai gambar di tapak. Mari kita takrifkan semula gaya untuk semua tag IMG:

Img ( jejari sempadan: 10px; sempadan: 5px #cfc pepejal; bayangan kotak: 0 0 10px #444; )

Pilihan terakhir sesuai bukan sahaja untuk WordPress, tetapi untuk mana-mana CMS. Dan walaupun untuk mudah HTML halaman dalam kes apabila, apabila memaparkan imej, teg IMG tiada kelas gaya diberikan. Tetapi sila berhati-hati. Jika anda mengatasi pilihan paparan teg IMG awak akan berubah penampilan SEMUA gambar di tapak!

Daripada kesimpulan

Semua contoh dalam artikel adalah bersyarat dan hanya bertujuan untuk menunjukkan beberapa Ciri CSS pada pemprosesan imej dan tunjukkan betapa mudahnya.

Cuti semakin hampir - Hari Wanita Antarabangsa. Mari kita sediakan lebih awal. Anda boleh mengucapkan tahniah kepada gadis dan wanita dengan cara yang asal dengan menggunakan perkhidmatan poskad yang dibincangkan di bawah.

Anda boleh menggunakan perkhidmatan yang sama yang kami gunakan. Perkhidmatan poskad sedia dibuat Buat poskad untuk 8 Mac dalam talian

Ambil kesempatan perkhidmatan berikut untuk mencipta kad hampir dari awal.

Canva - dikenali ramai editor foto berfungsi. Di sini anda akan menemui banyak templat. Pendaftaran diperlukan.

Printclick Jika anda mempunyai perniagaan anda sendiri, maka anda boleh memesan sekumpulan poskad dengan logo dan kenalan syarikat anda. Anda boleh menggunakan penjana poskad princlick. Promosi hebat dan murah.

Crello ialah editor yang memerlukan pendaftaran. Jangan takut dalam Bahasa Inggeris, dalam tetapan anda boleh bertukar kepada bahasa Rusia.

Poskad dalam talian adalah untuk mereka yang mempunyai imaginasi yang berkembang dengan baik, kerana anda perlu mencipta poskad dari awal.

Mumotiki - sediakan gambar yang cantik, dan anda boleh menambah teks ucapan tahniah di sini. Dengan cara ini, jika anda hanya perlu menambah teks pada gambar, maka anda boleh menyemaknya.

Saya harap dengan menggunakan salah satu penjana ini, anda akan dapat mengucapkan tahniah kepada wanita anda pada 8 Mac!

Pengarang: Ivanova Natalya 2019-02-17

Kandungan artikel:

Google Plus Platform Google Plus tidak memenuhi harapan pembangun dan akan dialih keluar sepenuhnya pada 2 April 2019. Album yang dikaitkan dengannya akan hilang bersama-sama dengannya. Foto Google, akan menjadi kebenaran yang tidak boleh diakses di tapak dengan akaun Google Plus. Sudah pada 4 Februari ia menjadi fungsi tidak tersedia mencipta profil, saluran dan halaman Google Plus. Jika akaun anda menyimpan kandungan berharga, maka anda boleh memuat turun salinan sandaran.
Perubahan ini akan mempengaruhi blogger yang menjalankan blog mereka di Blogspot. Beberapa widget G+, ulasan G+ dan profil Google+. Ini dinyatakan dalam pemberitahuan di kawasan pentadbir Blogger:
Selepas pengumuman berhenti kerja API Google+, yang dijadualkan pada Mac 2019, pada 4 Februari, beberapa perubahan akan dibuat pada penyepaduan Blogger dengan Google+.
Widget Google+. Reka bentuk blog tidak akan menyokong Butang +1, Pengikut Google+ dan widget Lencana Google+ lagi. Semua contoh widget ini akan dialih keluar daripada blog anda.
butang +1. Butang +1 dan G+ akan dialih keluar, begitu juga dengan pautan "Terbitkan ke Google+" di bawah catatan blog dan dalam bar navigasi.
Sila ambil perhatian bahawa jika anda menggunakan templat tersuai, yang mempunyai ciri Google+, ia mungkin perlu diubah. Sila hubungi orang yang memberi anda templat ini untuk mendapatkan cadangan.
Komen Google+. Sokongan komen akan dihentikan daripada menggunakan Google+, dan untuk semua blog yang menggunakan ciri ini akan dipulihkan komen standard Blogger. Malangnya, ulasan yang disiarkan melalui Google+ tidak boleh dipindahkan ke Blogger, jadi ulasan itu tidak akan dipaparkan pada blog anda lagi. Penyingkiran Komen Google Plus Malangnya, ulasan yang diterbitkan dalam sistem akan dipadamkan secara kekal. Anda hanya boleh menggunakan alat yang sama https://takeout.google.com untuk menyatakan ulasan sandaran daripada Google+ ke komputer anda. Cuma tiada pemuat but untuknya dan anda hanya boleh memulihkan komen secara manual dengan cara yang agak bengkok. Ada baiknya saya menepati masa. Bagaimana untuk menggantikan profil Google Plus dengan profil Blogger Jika anda blog di Blogspot, maka dinasihatkan untuk kini kembali dari profil Google Plus ke profil Blogger (bagi mereka yang bertukar kepada Google Plus di satu kali). Saya mengesyorkan melakukan ini sekarang untuk mengelakkan situasi yang tidak dijangka yang mungkin berlaku apabila memadam akaun Google Tambahan pula. Bagaimana untuk mendapatkan kembali profil Blogger anda. Ini mudah dilakukan dalam tetapan pentadbir Blogger:
Tetapan -> Tetapan Tersuai-> Profil Pengguna - di sini pilih Blogger

Simpan perubahan anda.

Sahkan peralihan kepada dan masukkan nama atau nama panggilan anda.

Jangan lupa untuk memuat naik avatar pada profil Blogger anda.

Bagaimana untuk memadam profil Google Plus Jika anda memutuskan untuk membuang profil G+ anda sekali dan untuk semua, kemudian pergi ke halaman Google Plus anda -> Tetapan -> tatal ke bahagian bawah halaman -> padam akaun Google Plus:

Pengarang: Ivanova Natalya

Hari ini saya akan memberitahu anda apa itu CSS3, dengan apa ia digunakan, tempat untuk mencarinya, dan cara menulisnya dengan betul. Saya memberi amaran kepada anda, saya akan memberitahu dari diri saya sendiri, dipermudahkan untuk orang awam, seperti yang saya lihat + contoh. Jadi, mari kita mulakan dari jauh.
CSS ialah gaya di mana sifat sesuatu objek ditulis. Jadi mereka ada dalam setiap orang enjin sedia ada, jika anda tidak menemuinya, maka sama ada anda mencari di tempat yang salah, atau ia benar-benar tidak wujud ( tapak bengkok). Di manakah mereka biasanya ditemui? Biasanya ini adalah punca tapak, nama fail style.css, walaupun, pada dasarnya, nama itu tidak sepenting sambungan .css jika fail dengan sambungan sedemikian adalah fail gaya.
Lihat juga di blog saya.

Di mana hendak mencari mereka? Laluan ke fail ditetapkan dalam templat antara