CTRL+N, o piliin ang function na “Lumikha” sa drop-down na listahan mula sa menu na “File”. Susunod, mula sa parehong listahan, piliin ang "Import" na operasyon o tawagan ito gamit ang CTRL+I key na kumbinasyon. Susunod, tukuyin ang landas sa file ng imahe sa dialog box at i-click ang pindutang "Import". Ang sa iyo ay ipapakita sa isang ito.

Sa toolbar, hanapin ang rollout na "Node Editor" at piliin ang tool na "Hugis". Ang tool na ito ay maaari ding tawagan sa pamamagitan ng pagpindot sa F10 key.

Sa kanan ng sulok kailangan mong bilugan, mag-left-click sa hangganan ng larawan. lalabas bagong node sa larawan, bilang karagdagan sa apat na sulok. Susunod, piliin ang opsyon na Convert Line To Curve sa panel ng Node Editor. Lilitaw ang mga round mark sa kaliwa ng bagong likhang node.

Sa parehong distansya mula sa sulok, magdagdag ng bagong node sa perpendikular na bahagi ng larawan. Nang hindi binabago ang tool na Hugis, i-double click ang pangunahing node ng sulok, tatanggalin ito. Ang bilugan na sulok ng imahe ay agad na magiging kapansin-pansin. Maaari mong gamitin ang mga marka ng gabay sa tuwid na linya upang baguhin ang radius ng sulok.

Sa napakasimpleng paraan (gamit ang vector object) magagawa mo ang lahat mga anggulo sa isang hugis-parihaba na imahe. Nang hindi gumagamit ng paraan sa itaas ng pag-edit ng mga node, gumuhit ng parihaba na may parehong laki sa tabi ng na-import na imahe gamit ang Rectangle Tool o tawagan ang tool gamit ang F6 key.

Gamit ang tool na "Hugis" na pamilyar sa iyo, mag-click sa parihaba at i-drag ang mouse sa alinman sa mga node nito patungo sa parihaba. Ang mga sulok ay bilugan. Ang radius ng curvature ay maaaring iakma gamit ang parehong tool.
Markahan ang iyong larawan gamit ang arrow ng Pick Tool.
Susunod, sa listahan ng pangunahing menu, hanapin ang rollout na "Mga Epekto" at piliin ang opsyong "PowerClip" at ang function na "Place Inside Container" mula sa drop-down na listahan. Gumamit ng malawak na arrow upang ituro ang parihaba na iyong iginuhit gamit ang mga bilugan na sulok. Ito ang magiging frame kung saan ilalagay ang iyong larawan.

Mangyaring tandaan

Pakitandaan na kapag nag-import ka ng isang imahe sa isang dokumento Corel Draw source file Ang imahe ay hindi nabago, kaya maaari mo itong gamitin sa orihinal nitong anyo kung hindi ka nasisiyahan sa resulta ng mga bilugan na sulok.

Kapaki-pakinabang na payo

Gamit ang PowerClip function, maaari kang maglagay ng mga larawan sa iba't ibang mga frame ng pinakakakaibang mga hugis.

Mga Pinagmulan:

• Opisyal na Gabay sa Corel Draw, M. Matthews, K. Matthews, 1997
• Paano magpakinis matutulis na sulok?

Kakailanganin mo

• - kompyuter
• - Programa ng Adobe Photoshop
• - larawan

Mga tagubilin

I-right click sa Layer ng background, piliin ang Duplicate Layer at i-click ang OK (o Ctrl+J). Pagkatapos ay lumikha ng isang bagong layer (Ctrl+Shift+N), ilagay ito sa pagitan ng background at kopya nito tulad ng ipinapakita sa screenshot (maaari mong punan ito ng ilang kulay, halimbawa puti). Huwag paganahin ang naka-lock na layer (i-click ang "mata" sa kaliwa) o tanggalin ito.

Sa tool palette, hanapin ang button na may rectangle (Rectangle Tool) at hawakan ito gamit ang kaliwang pindutan ng mouse. lalabas karagdagang menu kung saan kinakailangan (Rounded Rectangle Tool). Itakda ang mga setting sa itaas na bahagi sa kapareho ng sa screenshot, at baguhin ang field ng Radius ayon sa gusto mo (mas malaki ito, mas magiging bilog ang mga sulok, at mas mai-crop ang imahe.

Pagkatapos ay piliin ang bahagi ng larawan na gusto mong gamitin (halimbawa, bilang isang avatar). Kung nagkamali ka, pindutin ang Esc key at ulitin ang pagpili. Pagkatapos kinakailangang fragment ay mai-highlight, i-click ito i-right click mouse at piliin ang Make Selection... at i-click ang OK.

Tapos na, mayroon kang layer ng larawan na may mga bilugan na sulok. Ngayon ang Layer 2 (ang nagsisilbing background) ay maaaring punan ng anumang kulay o iwanang transparent.

Video sa paksa

Mangyaring tandaan

Mga transparent na png file - mahusay na format, gayunpaman, hindi lahat ng online na serbisyo (mga social network, blog, atbp.) ay sumusuporta sa mga transparent na png file. Kung ang epekto ng mga bilugan na sulok ay hindi gumagana, mayroong isa pang paraan.

Pumili ng kulay para sa background (Layer 2) na pinakamalapit sa kulay sa page kung saan mo inilalagay ang larawan. Pagkatapos ay i-save ang file sa jpg na format.

Mga bilugan na sulok sa CSS ay maaaring gawin sa maraming paraan, napakarami, at ang ilan sa mga ito ay maaaring ituring na luma na, dahil ipinakilala ng CSS 3 ang mga bagong katangian na nagbibigay-daan sa iyong pag-ikot sa mga sulok ng mga elemento ng HTML. Gayunpaman, una, hindi sinusuportahan ng mga lumang browser ang mga pag-aari na ito, at pangalawa, ang mga ganitong ideya ay kung minsan ay ipinanganak sa malikhaing utak ng isang taga-disenyo na ang mga lumang pamamaraan lamang ang makakapag-save. Kaya dito titingnan natin ang ilan iba't ibang mga pagpipilian na nagpapahintulot sa iyo na lumikha ng mga bilugan na sulok sa CSS: mula sa pinakasimple hanggang sa medyo kumplikado.

Sa mga halimbawang ito, ang mga sulok sa una ay bilugan mga elemento ng block, gayundin sa ilang mga halimbawa ang mga bloke na ito ay ginagamit bilang mga pantulong na elemento. Ngunit tandaan na madali mong magagawa ang parehong sa mga elemento sa antas ng linya, na nagbibigay sa kanila ng halaga ng block o inline-block kung kinakailangan.

Mga bilugan na sulok sa CSS 3 na walang mga larawan

Gumagamit ang halimbawang ito ng mga katangian mula sa CSS 3 na nagbibigay-daan sa iyo na madaling umikot nang walang tulong ng mga larawan.

HTML at CSS Halimbawa: Rounding Corners na may gamit ang CSS 3 walang mga larawan

Paglalarawan ng halimbawa

1. Sa mga paikot-ikot, ginagamit namin ang CSS 3 property, na nauunawaan ng lahat ng modernong browser.
2. Para sa mga matatanda Mga browser ng Firefox, Gumagamit ang Chrome at Safari ng mga espesyal na katangian na may mga prefix na -moz- at -webkit- , na lumabas bago nila suportahan ang pangunahing property. Sa kasamaang palad, walang katulad na mga analogue para sa lumang Opera at IE. Pakitandaan na kapag gumagawa ng mga kumplikadong curve, maaaring hindi gumana nang tama ang mga property na may mga prefix. Iyon ang dahilan kung bakit sa CSS code sila ay nakalista na mas mataas kaysa sa pangunahing ari-arian, upang ayon sa mga priyoridad ng istilo, ginamit ito ng mga browser na nakakaunawa na ng "puro".

Ang mga property na may mga prefix ay wala sa detalye ng CSS, kaya ang paggamit sa mga ito ay magreresulta sa di-wastong code.

Mga bilugan na sulok sa CSS na walang mga larawan

Ang halimbawang ito ay wala ring mga larawan, ngunit gumagamit ng mga karagdagang bloke. Ang kakanyahan ng pamamaraan ay bago at pagkatapos ng pangunahing nilalaman, maraming mga bloke ang ipinahiwatig, na, habang lumalayo sila dito, unti-unting bumababa ang lapad gamit ang mga lateral na panlabas na margin. Salamat dito, nangyayari ang imitasyon ng mga rounding corner.

Ang pamamaraang ito ay masama dahil ang code ay "nakalat" karagdagang mga bloke, ngunit, sa kasamaang-palad, sa maraming mga halimbawa tulad ng mga bloke ay naroroon. Ang isa pang minus ay kapag malaking radii rounding, kakailanganin mong magdagdag ng higit pang mga bloke kaysa sa ginamit sa halimbawa.

HTML at CSS Halimbawa: Rounding Corners Nang Hindi Gumagamit ng Mga Larawan

Paglalarawan ng halimbawa

1. Sa loob ng block na may class = "block" ipinapahiwatig namin ang isang elemento para sa pangunahing nilalaman ("content_block") sa harap kung saan naglalagay kami ng mga bloke upang gayahin ang pag-ikot ng mga sulok ("b1" , "b2" , "b3" ). Pagkatapos nito ay inilagay namin ang mga ito sa parehong, ngunit sa reverse order.
2. Itinakda namin ang mga bloke ng simulation sa kinakailangang taas at gilid ng gilid (CSS) upang lumikha ng hitsura ng mga sulok. Ni-reset din namin ang kanilang laki ng font (CSS) at itinakda ito sa :hidden - ito ay inilaan para sa mas lumang mga browser na maaaring tumaas ang taas at gawin itong mas malaki kaysa sa tinukoy.
3. Sa halimbawang ito, bilang karagdagan sa pag-ikot sa mga sulok, isang imitasyon ng isang frame ay idinagdag din kung hindi mo ito kailangan, pagkatapos ay alisin lamang ang lahat ng "mga hangganan" mula sa mga elemento, at alisin mula sa "b3" na bloke; kulay ng background.

Ang pinakamadaling paraan upang ipakita ang mga bilugan na sulok sa CSS ay ang paggamit ng larawan bilang background para sa elemento. Sa kasong ito, ang mga sukat ng elemento ay karaniwang tinutukoy na kapareho ng laki ng larawan sa background. Ang kawalan ng pamamaraang ito ay ang nilalaman ng elemento ay hindi dapat lumampas sa saklaw nito, iyon ay, ito ay dapat sa isang tiyak na limitadong sukat.

Halimbawa ng HTML at CSS: Pag-ikot ng mga sulok gamit ang isang larawan

Paglalarawan ng halimbawa

1. Gamit ang CSS property, nagtakda kami ng background na imahe para sa block, na ipinagbabawal namin sa pagkopya nang patayo at pahalang (no-repeat), dahil sa kasong ito ito ay hindi kinakailangan.
2. Upang pigilan ang text sa loob ng block na hawakan ang mga gilid nito, itinakda namin ang padding nito (CSS) sa 5px sa bawat panig.
3. Susunod, kailangan mong itakda ang bloke sa parehong mga sukat tulad ng background. Ang aming larawan sa background ay may mga sukat na 140x32 pixels, ngunit tinukoy namin ang lapad (CSS) at taas (CSS) ng mismong block, na binawasan ng 10px. Kinailangan kong bawasan ito dahil sa parehong mga panloob na padding, na nagpapalawak din ng elemento ng 5px sa bawat direksyon.

Sa nakaraang halimbawa, ang laki ng bloke ay naayos at nakadepende sa laki ng larawan sa background, at ito ay lubhang hindi maginhawa. Ngayon gagawin namin ang lapad ng aming bloke na resizable. Upang gawin ito, gupitin ang tatlong bahagi ng imahe - ang mga gilid at isang piraso ng gitna. Pagkatapos ay inilalagay namin ang dalawang elemento sa loob ng pangunahing bloke na may mga nakapirming laki, na, salamat sa ganap na pagpoposisyon, ay ilalagay sa mga gilid nito. Bigyan natin sila ng parehong mga bahagi sa gilid bilang background, at ang gitnang bahagi para sa pangunahing bloke. Bibigyan tayo nito ng isang bloke na may mga bilugan na sulok at isang variable na lapad.

Ang diskarteng ito ay kadalasang ginagamit upang i-round off ang mga single-line na elemento, gaya ng mga link o mga pamagat ng seksyon/menu.

HTML at CSS Halimbawa: Rounding Corners Gamit ang SideBlocks

Paglalarawan ng halimbawa

1. Sa loob ng block class = "block" inilalagay namin ang dalawang elemento - "left_bok" at "right_bok", kung saan itinakda namin ang mga larawan ng mga bahagi sa gilid bilang background (CSS) at ipinagbabawal ang kanilang pagpaparami (no-repeat). Para sa mismong pangunahing bloke, itinakda namin ang background mula sa gitnang bahagi at pinapayagan itong ma-duplicate lamang nang pahalang (repeat-x).
2. Tinukoy namin ang lapad para sa mga bloke sa gilid na tumutugma sa laki ng background para sa amin ito ay 14x32 pixels. Ngunit para sa pangunahing bloke, tulad ng sa nakaraang halimbawa, itinakda namin ang taas sa 22px upang mabayaran ang vertical padding.
3. Ipoposisyon namin ang aming mga sidewall na may kaugnayan sa "block", kaya tinukoy namin ang :relative para dito, at absolute para sa mga sidewall mismo. Kaya, pagkatapos ay pinindot namin ang mga ito sa kaukulang panig ng magulang gamit ang mga katangian ng CSS , at .
4. Upang maiwasang maitago ang mga nilalaman ng block sa ilalim ng mga side images, itinakda namin ang "block" na magkaroon ng side padding (CSS), na maaaring katumbas o bahagyang mas malaki kaysa sa mga gilid mismo. Nagtatakda din kami ng maliliit na margin sa itaas at ibaba upang ang teksto ay hindi "dumikit" sa mga gilid.

Sa IE6 mayroong isang maliit na bug sa pamamaraang ito:

Kung ang lapad o taas ng "block" ay kakaiba, pagkatapos ay isang hindi kasiya-siyang 1px indentation ay lilitaw sa pagitan ng panloob na gilid ng bloke at ang kanang nakaposisyon na sidebar, na sisira sa buong larawan. Ang bug na ito ay maaaring maayos sa pamamagitan ng paggamit CSS hack na may isang tiyak na expression, ngunit hindi ako magbibigay ng isang halimbawa dito, dahil madalas itong nag-freeze ng browser at mas mahusay na huwag gamitin ito.

Gawin natin ito nang iba. Itakda natin ang "right_bok" na kaliwang margin (CSS) sa 100% upang ito ay lumipat sa kabila ng kanang hangganan ng pangunahing bloke, at pagkatapos ay ibalik ito, ilipat ito sa kaliwa ng isang bilang ng mga pixel na katumbas ng lapad nito. Gumagana nang tama ang IE6 sa mga halaga ng mga pag-aari na ito, kaya wala itong pagpipilian kundi ilagay ang bloke kung saan natin ito kailangan.

Ang pamamaraang ito ng pag-ikot ng mga sulok ay katulad ng nauna, ngunit hindi katulad nito, narito hindi mga elemento ng HTML ang inilalagay sa mga gilid, ngunit ang mga idinagdag sa pangunahing bloke pseudo elemento. Salamat sa diskarteng ito, posible na maalis ang hindi kinakailangang HTML code ng pahina.

HTML at CSS Halimbawa: Rounding Corners Gamit ang Side Pseudo-Elements

Paglalarawan ng halimbawa

1. Gamit ang CSS pseudo-element ipinapahiwatig namin na gusto naming magdagdag ng isang bagay sa simula at dulo ng pangunahing bloke. At, gamit ang CSS property, idinaragdag lang namin ang mga kinakailangang larawan ng mga bilugan na sulok, o sa halip ang mga gilid. Kaya gumawa kami ng dalawang pseudo-element na may mga larawan.
2. Kaya, pagkatapos ay ginagawa namin ang eksaktong parehong bagay tulad ng sa nakaraang halimbawa, nagtatrabaho lamang kami sa mga nilikhang pseudo-element.

Para sa IE6 at IE7, ang mga sumusunod na "saklay" ay ginamit sa halimbawang ito:

1. Tulad ng alam mo, hindi naiintindihan ng IE6 at IE7 ang mga pseudo-element na ginamit dito, kaya ginagawa namin ang sumusunod. Gumagamit kami ng expression, na nagsasama ng dalawang tag sa loob ng pangunahing elemento, at binibigyan namin sila ng parehong mga estilo tulad ng sa nakaraang halimbawa. Tandaan na ang injected code na darating pagkatapos ng unang innerHTML ay idinagdag kaagad pagkatapos ng pambungad na "block" na tag, at pagkatapos ng pangalawang innerHTML ay idinagdag ito bago ang closing tag. Oo, sa aming kaso hindi ito mahalaga, dahil ginagamit ang ganap na pagpoposisyon, ngunit kung minsan ay kapaki-pakinabang na malaman ang tungkol dito.
2. Upang maiwasang makita ng ibang mga browser ang code na ito, isinama namin ito mga komentong may kondisyon. Mas mabuti kung ito ay inilabas nang buo. hiwalay na CSS file, na konektado sa isang tag na sarado na may parehong mga komento.

Mga bilugan na sulok sa CSS gamit ang block wrapping

Ang kakanyahan ng pamamaraang ito ay ang unang mga sulok ng imahe ay pinutol. Pagkatapos ng ilang higit pang mga bloke (ayon sa bilang ng mga sulok) ay inilalagay sa loob ng pangunahing bloke, na nakapugad sa loob ng bawat isa. Ang bawat isa sa kanila ay binibigyan ng isang sulok ng larawan bilang background. Ang mga imahe ay ipinagbabawal na magparami at ang mga coordinate ay ibinibigay upang sila ay kumuha ng mga lugar sa mga sulok ng mga bloke. Ito ay kung paano nakuha ang epekto ng mga bilugan na sulok.

HTML at CSS Halimbawa: Rounding Corners Gamit ang Block Wrap

Paglalarawan ng halimbawa

1. Naglalagay kami ng apat pa sa loob ng pangunahing bloke. Dahil wala sa mga bloke na ito ang may mga margin o hangganan, at ang pinakaloob lamang ang may mga indent, lahat sila ay pantay sa taas at lapad.
2. Gamit ang CSS property, itinatakda namin ang bawat isa sa mga panloob na bloke sa isang sulok bilang isang background, pinagbabawalan ang mga ito sa pagpaparami at iposisyon ang mga ito sa mga sulok ng mga bloke. At dahil transparent ang kulay ng background ng mga elemento, makikita sa page ang lahat ng apat na sulok ng background.
3. Idagdag mo ito sa iyong sarili panlabas na yunit na may isang sulok ng nais na kulay ng background. Handa na ang lahat.

Maaari mong tahasang itakda ang lapad ng bloke sa pamamagitan ng pagtukoy sa nais na pag-aari sa class="block" , ngunit upang baguhin ang taas dapat mong gamitin ang pinakaloob na elemento (para sa amin ito ay "rb").

Mga bilugan na sulok sa CSS gamit ang pagpoposisyon

Dito, din, ang mga sulok ay pinutol para sa background, na ipapakita sa maliliit na bloke. Gamit ang ganap na pagpoposisyon ng CSS, ang mga bloke na ito ay inilalagay sa mga sulok ng pangunahing elemento na ibinigay nais na kulay background.

HTML at CSS Halimbawa: Rounding Corners Gamit ang Positioning

Paglalarawan ng halimbawa

1. Sa loob ng pangunahing elemento (class= "block") inilalagay namin ang apat na tag na may mga klase na "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , na magsisilbing corner blocks.
2. Gamit ang CSS property, ikinonekta namin ang sarili naming larawan sa background sa bawat bloke ng sulok at binibigyan sila ng lapad at taas na katumbas ng laki nito. mga larawan sa background. Kung sakali, ni-reset namin ang laki ng font (CSS) at pinuputol ang labis (CSS).
3. Tinutukoy namin ang kamag-anak na pagpoposisyon para sa pangunahing elemento (CSS:relative), dahil ipoposisyon namin ang mga bloke ng sulok na may kaugnayan dito, at para sa mga sulok mismo - ganap (ganap).
4. Gamit ang mga katangian ng CSS , at , tinutukoy namin ang patayo at pahalang na offset na mga distansya para sa mga bloke ng sulok upang ang mga ito ay matatagpuan sa mga sulok ng pangunahing bloke.

Mayroong ilang mga problema sa pamamaraang ito sa IE6:

1. Kung ang lapad ng "block" ay hindi tahasang tinukoy, kung gayon ang mga sulok sa kaliwa ay hindi mahuhulog sa lugar. Ang dahilan para dito ay ang pagkakaroon ng panloob na padding sa bloke. Ang pinakamadaling paraan upang ayusin ang problema ay alisin ang indentation at ilakip ang pangunahing nilalaman ng "block" (walang mga sulok) sa isang karagdagang block wrapper, at pagkatapos ay tukuyin ang kinakailangang indentation sa wrapper. Ngunit iba ang ginawa ko dito sa pamamagitan ng pagpapagana ng layout gamit ang zoom :1 property, na nagsasabi sa IE6 na ipakita ang elemento sa natural na laki nito. Invalid ang property na ito, kaya kung magpasya kang gamitin ito, inirerekomenda kong gawin mo ang koneksyon sa pamamagitan ng mga komentong may kondisyon.
2. Ang parehong isang-pixel na bug na tinalakay sa itaas. Ngunit narito ang mga puwang ay maaaring mabuo hindi lamang sa pagitan ng mga kanang sulok at kanang bahagi block, ngunit din sa ibaba. At kung aalisin natin ang mga puwang sa kanan, hindi ito gagana sa mga nasa ibaba. Ang solusyon ay ang tahasang tukuyin ang pantay na lapad at taas ng pangunahing elemento. Maaari ka ring magtakda ng mga kakaibang halaga, ngunit pagkatapos ay kakailanganin mong itakda ang mga distansya para sa pababa at kanang offset upang maging hindi zero, ngunit -1px.

Sa pangkalahatan, ang teknolohiya para sa pamamaraang ito ng pag-ikot ng mga sulok sa CSS ay kapareho ng nauna, kaya aalisin dito ang mga detalyadong komento. Ang pagkakaiba lang ay sa halip na magkahiwalay na mga larawan sa sulok sa background, isang karaniwang larawan ng sprite ang ginagamit dito. Salamat dito, ang site ay naglo-load nang mas mabilis, dahil ang isang imahe ay "tumitimbang" mas mababa sa apat at pagho-host may isang apela sa halip na apat.

Ang sprite ay isang larawang pinagsasama-sama ang ilang larawang ginamit bilang background para sa mga elemento ng website. Aling bahagi ng sprite ang magiging background ng isang partikular na elemento ng HTML ay depende sa mga coordinate na tinukoy sa isang espesyal na katangian ng CSS.

HTML at CSS Halimbawa: Rounding Corners Gamit ang Positioning at Sprites

Paglalarawan ng halimbawa

1. Gamit ang CSS property, ikinonekta namin ang isang background na sprite na larawan sa mga bloke ng sulok, na may bilog na hugis na may sukat na 22x22 pixels (11x11 pixels para sa bawat quarter-corner).
2. Gamit ang CSS property, tinutukoy namin ang background offset coordinates. Halimbawa, ang halaga ng -11px 0 ay nangangahulugan na ang background ay ma-offset sa kaliwa ng 11px sa X axis, ngunit hindi ma-offset sa Y axis. Kaya, ang kaliwang kalahati ng sprite ay lumampas sa hangganan ng elemento at ang kanan lamang ang natitira. Ngunit kalahati lang ang nakikita, dahil ang taas nito ay 22px, at ang taas ng sulok na bloke mismo ay 11px lamang. Kaya pala kapag binigay na halaga Ang background ng elemento ay ang kanang bahagi sa itaas ng sprite.

Sa IE6 mayroong parehong mga problema tulad ng sa nakaraang halimbawa.

SA sa halimbawang ito Iikot namin ang mga sulok ng isang elemento na may hangganan, ngunit hindi ito isang tiyak na tampok ng partikular na pamamaraan na ito - madali mong magagamit ang isang rounding na may hangganan sa mga nakaraang halimbawa.

Gagawin namin ang mga roundings sa kanilang sarili gamit ang mga pseudo-element na nilikha mula sa pangunahing bloke, ngunit nang hindi inilalapat ang pagpoposisyon sa kanila.

At isa pa. Sa mga nakaraang halimbawa, ang mga sulok ay pinutol kasama ang background sa loob, at hindi ito palaging kinakailangan, lalo na kung inaasahan na ang background ng isang bloke na may mga bilugan na sulok ay magiging hindi pare-pareho. Samakatuwid, ang background sa loob ng frame dito ay ginawang transparent (pinapayagan nito PNG na format) at nang maputol ang mga sulok, naging transparent din ang loob nito. Kung kinakailangan, maaari ka ring gumamit ng katulad na diskarte sa mga nakaraang halimbawa.

HTML at CSS Halimbawa: Rounding Corners Gamit ang Pseudo-Elements

background , at sa tulong nito ay inilalagay namin ang mga ito sa kanang bahagi at ipinagbabawal ang "pagpaparami". Iyon lang, handa na ang mga kanto.

Dahil tinukoy namin ang padding para sa "block" (CSS), ang mga pseudo-element, at samakatuwid ang mga sulok, ay hindi matatagpuan sa mga sulok ng bloke, ngunit 15px ang layo mula sa mga gilid. Upang ayusin ito, binibigyan namin ang mga pseudo-element na negatibong margin (CSS) sa mga kinakailangang panig upang iposisyon ang mga ito sa itaas ng mga indent. Ngunit ginagawa namin ang mga margin na katumbas ng hindi 15, ngunit 17px, ito ay kinakailangan upang masakop ang frame (CSS), ang lapad nito ay 2px (15+2=17). Ayan na ngayon.

Para sa IE6 at IE7, ginamit namin ang pamilyar na "saklay" na may iniksyon ng HTML code dito, dahil hindi naiintindihan ng mga browser na ito ang mga pseudo-element na ginamit dito:

1. Gamit ang expression, isinasama namin ang dalawang tag sa loob ng pangunahing elemento, na ginagawa rin naming mga bloke. Pagkatapos ay naglalagay kami ng isang tag sa kanila. At pagkatapos ang mga tag na ito ay may parehong mga katangian tulad ng mga pseudo-element. Ang tanging bagay ay idinagdag din namin ang CSS property :relative, kung wala ang frame na nagsasapawan sa mga sulok.

Ang kawalan ng pamamaraang ito ay hindi mo maaaring tahasang itakda ang taas ng isang bloke na may mga bilugan na sulok, dahil kung lumampas ito sa laki ng nilalaman, kung gayon ang mga mas mababang sulok ay hindi pinindot laban sa mga gilid. Maiiwasan ito kung isasama mo pa rin ang pangunahing nilalaman sa isa pang bloke at itatakda ang taas nito.

Isa pang halimbawa ng mga rounding corner na may mga pseudo-element at walang karagdagang block

Ang halimbawang ito ay katulad ng nauna, ngunit dito ginagamit namin ang pagpoposisyon upang ayusin ang mga pseudo-element. Salamat sa diskarteng ito, naging posible na tahasang tukuyin ang taas ng isang bloke na may mga bilugan na sulok.

Halimbawa ng HTML at CSS: Mga rounding corner kung saan maaari mong baguhin ang taas ng block

At muli, para sa IE6 at IE7, nagdaragdag kami ng ilang karagdagang elemento sa loob ng pangunahing bloke gamit ang expression, at isara ang code sa mga kondisyong komento. Sa pagkakataong ito ay hindi na natin susubukan na tularan ang mga pseudo-element, ngunit gagawin itong mas simple.

1. Nagdagdag kami ng apat na tag sa loob ng "block" at inilapat ang pagpoposisyon sa kanila. At pagkatapos ay ipinapakita lang namin sa kanila ang mga sulok ng imahe bilang isang background at ilagay ang mga ito sa mga sulok ng pangunahing elemento. Iyon ay, kumilos kami nang eksakto tulad ng sa isa sa mga pamamaraan na tinalakay sa itaas.
2. Upang maalis ang isang-pixel na bug (na binanggit nang higit sa isang beses sa itaas), magdagdag ng kaliwang margin (CSS) na may 100% na halaga at negatibong offset na katumbas ng -9px sa kanang sulok na mga elemento. Sa pangkalahatan, kung naaalala mo, ang offset na ito ay dapat na katumbas ng lapad ng bloke ng sulok (para sa amin ito ay 11px), ngunit huwag kalimutan ang tungkol sa 2px na hangganan na mayroon kami dito - kailangan naming ilagay ang mga sulok sa ibabaw nito (11px-2px=9px).

Sa pamamagitan ng paraan, sa katunayan, magiging mas madaling tularan ang mga pseudo-element, tulad ng ginawa namin sa nakaraang halimbawa - sa ganitong paraan magkakaroon ng mas kaunting karagdagang code. Ngunit hindi sa IE6, ang browser na ito ay mangangailangan ng ilang higit pang "saklay" at, bilang resulta, ay kailangang magsulat ng dalawang magkahiwalay mga komentong may kondisyon- para sa IE6 at IE7, at ito ay magpapalaki lamang ng code...

Sa Firefox, ang pamamaraang ito ay gumagana nang tama mula sa bersyon 3.6, at sa Opera - mula sa bersyon 10.0, hindi ako nakagawa ng mga saklay para sa kanila, dahil ito ay walang gaanong kaugnayan.

Mayroong maraming mga halimbawa at mga tutorial sa Internet para sa pag-ikot sa mga sulok ng isang bloke o talahanayan, ngunit, bilang isang panuntunan, ang mga tutorial na ito ay batay sa paggamit ng mga imahe o sa paggamit ng mga karagdagang bloke.

Sa tutorial ngayon, ipapakita ko sa iyo kung paano mo magagawa mga round table na sulok gamit lamang ang CSS.

Direktang markup (Ang pangalawang talahanayan ay naiiba sa layout ng mga cell sa nangungunang linya):

Curabitur a ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor vestibulum.	0

Nulla gravida.	Urna augue.	Nunc iaculis bibendum.
		Vestibulum tempo	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. Bilugan ang mga sulok nang direkta sa mesa (tag ng talahanayan).

BContentTables( border:1px solid #CCCCCC; width: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. Alisin ang anumang background mula sa unang linya.

Tr.bCTable_Header (background: wala;)

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- border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; kulay ng background:#00843C;)

4. Gamit ang pseudo-class:last-child at ang combinator > piliin ang huling cell sa unang row. Para dito, bilugan namin ang kanang sulok sa itaas.

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- border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0;

5. Bilugan ang mga ibabang sulok ng huling linya. Huwag kalimutang tanggalin ang background mula sa huling linya; Ang background ng row ay itinakda ng background ng mga cell ng huling hilera.

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. Pagkatapos, sa pamamagitan ng pagkakatulad sa mga puntos na 3-4 in huling linya bilugan ang mga sulok ng una at huling mga cell.

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;

Suporta sa browser

Magandang umaga, hapon, gabi o gabi sa lahat. Si Dmitry Kostin ay kasama mo nang paulit-ulit. Kahit papaano ay nakatingin ako iba't ibang larawan at pagkatapos ay nagustuhan ko ang ilan sa kanila. At nagustuhan nila ang mga ito dahil bilugan ang mga gilid nito. Agad itong mukhang mas kawili-wili. Hindi mo ba iniisip? At iyon ang dahilan kung bakit sa aralin ngayon nais kong sabihin sa iyo kung paano mag-ikot sa mga sulok sa Photoshop upang gawing mas kawili-wili ang larawan.

Ang gusto ko sa Photoshop ay na sa maraming kaso ang parehong bagay ay maaaring gawin sa maraming paraan. Kaya ito ay dito. Magsimula tayo sa ating photoshop.

Smoothing Gamit ang Borders

Ang pamamaraang ito ay katulad ng nauna, ngunit ibang-iba pa rin. Gagawin namin ang lahat na may parehong imahe.

Sa pamamagitan ng paglikha ng isang hugis

Ang ikatlong paraan ay radikal na naiiba mula sa naunang dalawa. Kaya magpahinga ng ilang segundo at magpatuloy. Hindi ko babaguhin ang larawan at ilo-load muli ang kotseng ito sa Photoshop.

Nakikita mo ba kung ano ang natapos mo? Ang larawan ay mayroon na ngayong bilugan na mga gilid, at lahat dahil ito ay ipinapakita lamang kung saan ang aming iginuhit na bilugan na parihaba. Ngunit maaari mo na ngayong i-crop ang karagdagang larawan gamit ang tool na "Frame", o maaari mong i-save kaagad ang larawan at magkakaroon ka na hiwalay na imahe may mga bilugan na sulok.

Subukang gawin ang lahat sa iyong sarili, at sa parehong oras sabihin sa akin kung alin sa mga ipinakita na pamamaraan ang mas kanais-nais sa iyo.

At sa pamamagitan ng paraan, kung mayroon kang mga gaps sa Photoshop o gusto mo lamang itong ganap na matutunan sa pinakamaikling posibleng oras, pagkatapos ay lubos kong inirerekomenda na manood ka ng isa mahusay na kurso sa photoshop para sa mga nagsisimula. Ang kurso ay mahusay na ginawa, ang lahat ay sinabi at ipinapakita lamang mahusay, at ang bawat materyal ay tinalakay sa mahusay na detalye.

Well, tinatapos ko ang aking aralin para sa araw na ito. Huwag kalimutang mag-subscribe para sa mga bagong artikulo at ibahagi ito sa iyong mga kaibigan. Natutuwa akong makita ka sa aking blog. Hinihintay na naman kita. paalam na.

Pinakamahusay na pagbati, Dmitry Kostin

Ang mga bilugan na sulok sa larawan ay mukhang medyo kawili-wili at kaakit-akit. Kadalasan, ang mga ganitong larawan ay ginagamit kapag gumagawa ng mga collage o gumagawa ng mga presentasyon. Pati mga larawan mula sa bilugan na sulok maaaring gamitin bilang mga thumbnail para sa mga post sa site.

Mayroong maraming mga pagpipilian para sa paggamit, ngunit mayroon lamang isang paraan (tama) upang makakuha ng ganoong larawan. Sa tutorial na ito ipapakita ko sa iyo kung paano mag-ikot ng mga sulok sa Photoshop.

Buksan ang larawan sa Photoshop na iyong ie-edit.

Pagkatapos ay lumikha ng isang kopya ng waterfall layer na tinatawag na "Background". Upang makatipid ng oras, gumamit ng mga hotkey CTRL+J.

Ang isang kopya ay nilikha upang iwanang buo ang orihinal na larawan. Kung (biglang) may mali, maaari mong tanggalin ang mga nabigong layer at magsimulang muli.

Sa kasong ito, interesado lamang kami sa isa sa mga setting - ang rounding radius. Ang halaga ng parameter na ito ay depende sa laki at pangangailangan ng larawan.

Itatakda ko ang value sa 30 pixels, para mas makikita ang resulta.

Ngayon ay kailangan mong i-stretch ang resultang figure sa buong canvas. Pagtawag sa function "Libreng Pagbabago" mga hotkey CTRL+T. May lalabas na frame sa hugis, na magagamit mo para ilipat, paikutin, at baguhin ang laki ng bagay.

Interesado kami sa pag-scale. I-stretch ang figure gamit ang mga marker na nakasaad sa screenshot. Pagkatapos makumpleto ang pag-scale, i-click PUMASOK.

Tip: upang sukatin nang tumpak hangga't maaari, iyon ay, nang hindi lalampas sa canvas, kailangan mong paganahin ang tinatawag na "Nagbubuklod" Tingnan ang screenshot, ipinapakita nito kung saan function na ito matatagpuan.

Ang function ay nagiging sanhi ng mga bagay na awtomatikong "Stick" sa mga elemento ng auxiliary at mga hangganan ng canvas.

Tulad ng nakikita mo, isang seleksyon ang nabuo sa paligid ng figure. Pumunta ngayon sa layer ng kopya, at alisin ang visibility mula sa layer na may hugis (tingnan ang screenshot).

Ang waterfall layer ay aktibo na ngayon at handa na para sa pag-edit. Ang pag-edit ay binubuo ng pag-alis ng mga hindi kinakailangang bagay sa mga sulok ng larawan.

Inverting selection gamit ang mga hotkey CTRL+SHIFT+I. Ngayon ang pagpili ay nananatili lamang sa mga sulok.