ambil perhatian bahawa gaya CSS untuk angka tertentu dimasukkan ke dalam fail sekali, dan tag HTML boleh diletakkan di tapak tanpa had kali.
Hasil daripada output kami mendapat yang berikut segi empat tepat dengan bingkai.
Cara Membuat Sudut Bulat dalam CSS
Atribut digunakan untuk membulat sudut jejari sempadan.
Kita boleh menambah hanya atribut ini. Ia biasanya memaparkan hasil pembundaran dalam versi baharu penyemak imbas, tetapi ramai pengguna masih mempunyai versi lama yang atribut ini tidak berfungsi dengan betul. Oleh itu, untuk keserasian, kami akan menambah beberapa lagi perihalan atribut ini, terikat terus pada penyemak imbas tertentu, pada blok kami dalam fail Style.css, menghasilkan kod berikut:
HTML tag div akan memberi kita segi empat tepat dalam bingkai dengan bulatdan sudut:
dan teg HTML untuk memaparkan teks akan kelihatan seperti ini:
|
pib9.ru
|
Kita mendapatkan segi empat tepat bulat dan teks: 
Jika anda mengalih keluar atribut perihalan saiz segi empat tepat daripada kod lebar Dan ketinggian, maka anda boleh mendapatkan bentuk berikut dengan sudut bulat:
1. Tiada teks
Dalam kes ini, borang mengambil dimensi persekitaran: panjang sepadan dengan lebar medan, dan ketinggian berubah apabila borang diisi dengan kandungan.
Bulat sudut yang dipilih
Dalam perihalan gaya, parameter 10px dalam atribut jejari sempadan menunjukkan jejari kelengkungan, yang boleh diubah dengan memilih yang anda perlukan. Jika ditetapkan kepada 0, pembundaran tidak akan berlaku. Harta ini boleh digunakan apabila anda perlu mengelilingi sudut yang dipilih.
Mari kita tulis nilai jejari pembundaran untuk setiap sudut, menunjukkan sifar di mana kita membatalkan pembundaran. Sebagai contoh, mari batalkan pembundaran di penjuru ketiga dan keempat. Kod kami akan kelihatan seperti ini:
1. Kiri bucu atas.
2. Sudut kanan atas.
3. Sudut kanan bawah.
4. Sudut kiri bawah.
Ini menghasilkan segi empat tepat dengan lengkung yang dipilih hanya di sudut atas.
Sudut dikira mengikut arah jam, bermula dari sudut kiri atas: 
2. Membundarkan sudut menggunakan kod HTML tanpa menulis pada fail gaya
Pertimbangkan kaedah kedua untuk mendapatkan segi empat tepat dengan bucu bulat dengan menggunakan HTML kod tanpa menulis ke fail gaya.
HTML sudut bulat
Terdapat satu ciri kecil yang memudahkan keseluruhan proses - ini HTML sudut bulat. Ia terdiri daripada penjanaan kod HTML, yang mengandungi gaya yang sama seperti dalam Kod CSS. Ini menggunakan atribut yang sama seperti dalam blok CSS dan menghapuskan keperluan untuk menulis blok ke fail Style.css. Dalam satu perkataan, kami menggantikan sepenuhnya kod CSS dengan kod HTML.
Daripada blok CSS kami, kami dapat skrip HTML, yang kami masukkan ke tempat di mana segi empat tepat dengan sudut bulat sepatutnya muncul:
Kaedah pertama membulatkan sudut boleh digunakan apabila bentuk yang sama digunakan lebih daripada sekali tanpa mengubah gaya. Kaedah kedua digunakan untuk borang yang gayanya digunakan sekali.
3. Gambar dengan bucu bulat. Bingkai di sekeliling imej HTML
Saya juga ingin memberi anda informasi berguna. Sering menggunakan gambar untuk reka bentuk laman web, Saya benar-benar ingin menjadikannya lebih cantik dengan menukar bentuknya, membingkainya dengan bingkai warna yang cantik dan lebar yang berbeza. Ini menimbulkan persoalan: “ Cara membulatkan sudut gambar?”.
Ini dilakukan dengan sangat mudah, dan sekarang kita akan belajar bagaimana untuk melakukannya.
Mari letakkan imej di tapak, menjadikannya latar belakangnya sendiri sebagai latar belakang tag div. Kami mendapat kod dan imej berikut:
Membundarkan sudut gambar dengan menambah bingkai
Membundarkan sudut imej dalam CSS dan HTML serta menambah sempadan boleh dilakukan dalam salah satu daripada dua cara yang diterangkan di atas.
Menggunakan kaedah pertama dalam artikel ini, kod imej untuk fail helaian gaya dan teg div HTML akan kelihatan seperti ini:
Sila ambil perhatian bahawa beberapa atribut boleh dimasukkan ke dalam fail gaya, dan beberapa ke dalam tag div. Dalam kes kami, lebar dan ketinggian dimensi imej dimasukkan ke dalam kod HTML.
Kod HTML kaedah kedua, tanpa menggunakan fail gaya yang diterangkan dalam artikel ini, kelihatan seperti ini:
Hasil daripada kod setiap dua kaedah, kami mendapat hasil yang sama - gambar dengan sudut bulat:
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? 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 lebihan foto menggunakan alat "Bingkai", atau anda boleh segera menyimpan gambar dan anda sudah pun mempunyai imej berasingan dengan sudut bulat.
Cuba lakukan semuanya 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
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. Pemegang 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 di sebelah 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 berubah, jadi anda boleh menggunakannya dalam bentuk asalnya jika anda tidak berpuas hati dengan hasil sudut bulat.
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) warna yang paling hampir dengan set pada halaman tempat anda meletakkan foto. Kemudian simpan fail dalam format jpg.
Salam, Kawan. Artikel ini cukup dikhaskan topik popular di kalangan juruweb baru - bulat sudut CSS . Soalan-soalan yang akan saya cuba jawab akan melibatkan bagaimana untuk melakukannya sudut bulat elemen tapak hanya menggunakan CSS tanpa menggunakan sebarang imej.
DALAM kaedah ini terdapat kebaikan dan keburukan. Kelebihannya, sudah tentu, tidak perlu mencipta 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 unsur 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 ada elemen blok dipenuhi 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 semua empat penjuru elemen sekaligus, di samping itu, 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 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 anggap bahawa kita memerlukan jejari mendatar ialah 35 piksel dan jejari menegak ialah 5. Selain itu, nilai-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 menjadi seperti ini:
Dan pada akhir artikel, mari kita bercakap tentang sokongan pelayar yang berbeza daripada harta ini.
Membulat sudut dalam pelbagai pelayar web.
Perlu diingat 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 menetapkan harta untuk sempadan sudut kiri atas kepada nilai 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; jejari sempadan-atas-kiri: 5px;
Saya sangat berharap saya dapat menerangkan segala-galanya dengan jelas dan anda kini memahami cara membuat sudut bulat menggunakan CSS sahaja.
Semoga berjaya!
Terdapat banyak contoh dan tutorial di Internet untuk membulatkan sudut blok atau meja, tetapi, sebagai peraturan, tutorial ini berdasarkan penggunaan imej atau penggunaan blok tambahan.
Dalam tutorial hari ini saya akan menunjukkan kepada anda bagaimana anda boleh sudut meja bulat hanya menggunakan CSS.
Penanda langsung (Jadual kedua berbeza dalam susun atur sel dalam baris atas):
| Nulla gravida. | Urna augue. | Nunc iaculis bibendum. | |
| Vestibulum tempor | Laoreet eros semper ut. | ||
| Vivamus quis nisi lacus. | Cras id felis eu purus tempor dictum in at lorem. | facilisis iaculis magna diam id quam. eleifend. | Pellentesque cursus, nunc ut facilisis hendrerit |
1. Bulat sudut terus di meja (tag meja).
BContentTables( border:1px pepejal #CCCCCC; lebar:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; ; margin:0.7em auto ;
2. Alih keluar sebarang latar belakang daripada baris pertama.
Tr.bCTable_Header (latar belakang: tiada;)
3. Menggunakan pseudo-class:first-child dan combinator > pilih sel pertama dalam jadual. Bundarkan sudut kiri atas sel pertama. Latar belakang baris pertama terdiri daripada latar belakang sel baris ini.
Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- jejari sempadan:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; warna latar belakang:#00843C;)
4. Menggunakan pseudo-class: last-child dan combinator > pilih sel terakhir dalam baris pertama. Untuk itu, kita bulatkan sudut kanan atas.
Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- jejari sempadan:0 10px 0 0; -o-jejari-sempadan:0 10px 0 0;
5. Bulat sudut bawah baris terakhir. Jangan lupa untuk mengalih keluar latar belakang dari baris terakhir; Latar belakang baris ditetapkan oleh latar belakang sel baris terakhir.
BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px;
6. Kemudian, dengan analogi dengan mata 3-4 inci baris terakhir bulat sudut sel pertama dan terakhir.
BContentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; bContentTables tr:last-child td:last-child (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- radius:0 0 10px 0; -o-border-radius:0 0 10px 0;
