Sa proseso ng pagdidisenyo ng isang website, maraming baguhang tagabuo ng website ang nagtataka kung paano baguhin ang font, laki at kulay ng mga heading. Oo nga eh mahusay na pagpipilian, kung saan maaari kang magdagdag ng ilang pagiging bago sa disenyo ng site. Ngunit may isa pang pantay na nakakaintriga na tanong: kung paano gumawa ng isang html frame.

Para saan ang isang html frame?

Actually, walang special function elementong ito hindi nagdadala. Ngunit gayon pa man, ang teksto, na nakapaloob sa isang kaakit-akit na disenyo, ay pumukaw ng isang tiyak na interes sa mga mambabasa. Samakatuwid, ang isang frame sa paligid ng teksto ay ligtas na matatawag na isa sa mga paraan upang bigyang-diin ang kahalagahan ng naka-frame na teksto.

Mga tampok ng paglikha ng isang frame sa paligid ng teksto

Siyempre, mga pagkakaiba-iba sa disenyo ng frame gamit ang CSS marami pa, ngunit iyon ay isang ganap na naiibang kuwento. Bilang karagdagan, ang paraang ito ay angkop para sa mas advanced na mga tagabuo ng site. Sa tingin ko ikaw at ako at sa tulong ng pag-edit html code ito ay lalabas nang hindi bababa magandang frame html.

Sa unang yugto, kailangan mong maunawaan na ang isang frame ay maaaring gawin para sa lahat html elemento hindi alintana kung anong uri ng tag ito

,

, , atbp.

Sa turn, mayroong pagkakaiba sa pagitan ng mga built-in na frame at mga elemento ng block.

Ang frame ng built-in na uri ay matatagpuan sa loob ng mga tag, o mas tama, ang html code na responsable para sa pagpapakita nito ay nakapaloob sa pagitan ng ilang partikular na tag. Bilang resulta, nakakakuha kami ng isang html frame sa paligid ng teksto, kung saan kailangan naming magsulat ng ilang mga command upang magtakda ng mga panloob na indent.

Ang mga block frame ay nabuo sa buong lapad ng block, na naghihikayat sa pangangailangang tukuyin ang mga utos na nauugnay sa paglilimita sa lapad.

Siyempre, upang makagawa ng teksto sa isang html frame, kailangan nating bumaling sa mga built-in na istilo. Ang pamamaraang ito ay pinakaangkop para sa pag-highlight ng ilang indibidwal na mga parirala, mga talata sa teksto at mga larawan. Kung kailangan mong i-highlight ang isang partikular na bahagi ng template na ipinapakita sa lahat ng pahina ng site, makatuwirang i-edit ang style.css file ng template.

Paano gumawa ng isang frame sa paligid ng teksto sa html

Sa tingin ko mayroong maraming teorya. Oras na para magsanay. Bilang halimbawa, isasama ko sa isang maliwanag na mapusyaw na berdeng frame na may kulay abong background isa sa mga mahahalagang panukala ng artikulong ito.

Mahalagang punto! Ang mga built-in na istilo ay gumagana nang mahusay at hindi nakakapinsala Ang bisa ng HTML site.

Upang ipatupad ang parehong frame, kailangan mong sumangguni sa tag

IYONG SUGGESTION.

Since in sa halimbawang ito built-in mga istilo ng css, Itinuturing kong pare-parehong mahalaga na ipakilala ka sa bawat isa sa kanila.

1. hangganan– ari-arian na responsable sa pagpapakita ng frame. Upang gawing simple ang gawain, hindi ko tinukoy ang bawat pag-aari nang hiwalay - lapad ng hangganan (kapal ng mga hangganan ng frame), kulay ng hangganan (kulay html framework). Sa halip, pinaikli ko ng kaunti ang html code sa pamamagitan ng pagsulat ng lahat ng mga katangian pagkatapos ng colon.

Para magbago hitsura frame baguhin lamang ang halaga solid. Ang mga sumusunod na hangganan ng frame ay umiiral:

Ridge – kaluwagan.

May tuldok - may tuldok.

Doble - doble.

Dashed - may tuldok.

Solid - solid.

2. padding– isang ari-arian na responsable para sa distansya sa pagitan ng frame at ng bagay na nakapaloob dito.

Kung gusto mo, maaari kang makipaglaro sa mga istilo nang kaunti pa sa pamamagitan ng pagdaragdag sa bilang ng mga utos na nakapaloob sa pagitan ng pambungad at pagsasara ng mga tag

Ari-arian margin. Sa ganitong paraan, maaari mong i-indent ang mga elemento na nasa labas ng frame.

Para magbago background Ito ay sapat na upang irehistro ang pag-aari ng background-color, na tumutukoy sa code ng nais na kulay pagkatapos ng colon.

Frame sa paligid html mga larawan Ginagawa ito sa parehong paraan, kaya hindi ka dapat magkaroon ng anumang mga problema dito. Ang tanging bagay na kailangang malaman ng isang baguhan ay upang maipakita ito, ang mga katangian ay dapat na nakasulat sa isang solong tag .

Upang buod, maaari nating sabihin na upang makagawa ng isang frame sa paligid ng isang larawan o teksto, sapat na upang buksan ang pagpapakita ng html code ng artikulo at magsulat ng mga espesyal na katangian dito sa pagitan ng ilang mga tag.

Salamat sa iyong pansin at makita ka sa lalong madaling panahon sa mga pahina ng Stimylrosta.

Natagpuan sa teksto pagkakamali sa gramatika? Mangyaring iulat ito sa administrator: piliin ang teksto at pindutin ang kumbinasyon ng hotkey Ctrl+Enter

Vlad Merzhevich

Gamit ang CSS, maaari kang magdagdag ng hangganan sa isang elemento sa maraming paraan. Talaga, siyempre, ito ay ginagamit ari-arian sa hangganan, bilang ang pinaka-unibersal, pati na rin ang balangkas at, nakakagulat, box-shadow , ang pangunahing gawain kung saan ay lumikha ng isang anino. Susunod, isasaalang-alang natin ang mga pamamaraang ito at ang kanilang mga pagkakaiba sa kanilang sarili.

balangkas na ari-arian

Ang pinakasimpleng katangian para sa paglikha ng mga frame. Ito ay may parehong mga parameter tulad ng border , ngunit malaki ang pagkakaiba sa ilang detalye:

• ang balangkas ay ipinapakita sa paligid ng elemento (hangganan sa loob);
• ang balangkas ay hindi nakakaapekto sa mga sukat ng elemento (ang hangganan ay idinagdag sa lapad at taas ng elemento);
• ang balangkas ay maaari lamang itakda sa paligid ng buong elemento, ngunit hindi sa mga indibidwal na panig (maaaring gamitin ang hangganan para sa anumang panig o nang sabay-sabay);
• ang outline ay hindi apektado ng fillet radius na tinukoy ng border-radius property (ang hangganan ay apektado).

Ang tanong ay lumitaw - sa anong mga kaso kinakailangan ang balangkas, kapag ang papel nito, sa kabila ng mga nakalistang pagkakaiba, ay ganap na kinuha ng hangganan? Walang maraming mga sitwasyon, ngunit nangyayari ang mga ito:

• paglikha ng mga kumplikadong multi-kulay na mga frame;
• pagdaragdag ng frame sa isang elemento kapag ini-hover mo ang mouse sa ibabaw nito;
• pagtatago ng hangganan na awtomatikong idinaragdag ng browser sa ilang elemento kapag tumatanggap ng focus;
• para sa outline, maaari mong itakda ang distansya mula sa gilid ng elemento hanggang sa frame gamit ang outline-offset property, upang lumikha ng isang .

Maraming kulay na mga frame

Kailangan mong maunawaan na hindi pinapalitan ng outline ang hangganan at madaling umiral kasama nito, tulad ng ipinapakita sa halimbawa 1.

Halimbawa 1: Paglikha ng Frame

Sa halimbawang ito, ang isang itim na frame ay idinagdag sa paligid ng elemento, na pinaghihiwalay mula sa background ng isang puting hangganan (Larawan 1).

kanin. 1. Frame sa paligid ng elemento

Frame kapag gumagamit ng:hover

Kapag nagdaragdag ng isang frame sa pamamagitan ng hangganan, ang lapad ng elemento ay tumataas, na medyo kapansin-pansin kapag pinagsama ang hangganan at ang :hover pseudo-class. Mayroong dalawang paraan upang "manalo" ito. Ang pinakasimpleng bagay ay palitan ang hangganan ng outline , na, tulad ng alam natin, ay hindi nakakaapekto sa laki ng elemento (halimbawa 2).

Halimbawa 2: Frame sa Hover

Ang balangkas ay hindi palaging angkop, kung dahil lamang sa pag-ikot ng mga sulok ay hindi nakakaapekto dito. Ang pangalawang paraan ay angkop dito - magdagdag ng isang invisible na frame o isang frame na tumutugma sa kulay ng background, at pagkatapos ay baguhin ang mga parameter nito kapag nag-hover (halimbawa 3). Pagkatapos ay walang paglilipat ng elemento ang magaganap, dahil ang frame sa simula ay umiiral na. Ngunit lagi naming tandaan na ang lapad ng elemento ay binubuo ng mga halaga ng lapad, hangganan sa kaliwa at hangganan sa kanan. Ang sitwasyon ay katulad ng taas.

Halimbawa 3: Frame sa Hover

Border sa paligid ng mga field ng form

Sa ilang browser (Chrome, Safari, pinakabagong bersyon Opera) isang maliit na icon ang ipinapakita sa paligid ng mga field ng form kapag nakatanggap sila ng focus. kulay na frame(Larawan 2). Para alisin ito, idagdag lang ito sa outline property sa mga istilo walang halaga, tulad ng ipinapakita sa halimbawa 4.

kanin. 2. Frame sa paligid ng mga margin

Halimbawa 4. Pag-alis ng frame

Mga frame sa pamamagitan ng box-shadow

Bagama't ang box-shadow property ay nilayon upang magdagdag ng anino sa paligid ng isang elemento, maaari rin itong gamitin upang lumikha ng mga hangganan na hindi maaaring gawin gamit ang border o outline . Ito ay lahat salamat sa katotohanan na ang bilang ng mga anino ay maaaring walang limitasyon, ang mga parameter na kung saan ay nakalista na pinaghihiwalay ng mga kuwit.

Upang makakuha ng isang frame, ang unang tatlong mga parameter ay dapat na itakda sa zero; Ang ikaapat na parameter sa sa kasong ito ay responsable para sa kapal ng hangganan, at ang ikalima ay nagtatakda ng kulay ng hangganan. Para sa pangalawang frame, ang ikaapat na parameter ay katumbas ng kabuuan ng mga kapal ng dalawang frame.

Ipinapakita ng Halimbawa 4 kung paano magdagdag ng dalawang frame at isang border sa kanan gamit ang isang box-shadow property.

Halimbawa 4: Paggamit ng box-shadow

Ang resulta ng halimbawang ito ay ipinapakita sa Fig. 3.

kanin. 3. Mga frame na ginawa ng box-shadow property

CSS3 frame nagpapalawak ng kakayahang mag-format ng mga hangganan ng elemento na may mga katangiang nagbibigay-daan ikot sa mga sulok elemento, at gamitin din mga larawan upang idisenyo ang mga hangganan ng elemento.

Mga bilugan na sulok at picture frame

1. Rounding corners na may border-radius

Suporta sa browser

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

Binibigyang-daan ka ng property na bilugan ang mga sulok ng inline at block na mga elemento. Ang curve para sa bawat anggulo ay tinukoy gamit ang isa o dalawang radii na tumutukoy sa hugis nito − bilog o ellipse. Ang radius ay nalalapat sa buong background, kahit na ang elemento ay walang hangganan, ang eksaktong posisyon ng secant ay tinutukoy gamit ang background-clip property.

Binibigyang-daan ka ng border-radius property na bilugin ang lahat ng sulok nang sabay-sabay, at gamit ang border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius na katangian mo maaaring paikutin ang bawat sulok nang hiwalay.

Kung magtatakda ka ng dalawang value para sa border-radius property, ang unang value ay ipapaikot ang kaliwang itaas At kanang sulok sa ibaba, at ang pangalawa - kanang itaas At kaliwang ibaba.

Mga halaga na tinukoy sa pamamagitan ng / matukoy pahalang At patayong radii. Ang ari-arian ay hindi minana.

Mga pagpipilian

Div (lapad: 100px; taas: 100px; border: 5px solid;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-radius: 10px 20px). ;) .r4 (border-radius: 10px/20px;). border-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 (border -radius: 0 100%;).r11 (border-radius: 0 50% 50% 50%;).r12 (border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px ;)
kanin. 1. Mga halimbawa iba't ibang mga pagpipilian mga rounding block corners

2. Border-image

Suporta sa browser

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome para sa Android: 42

Binibigyang-daan ka ng property na magtakda ng larawan bilang frame ng elemento. Ang pangunahing kinakailangan para sa imahe ay dapat itong simetriko. Kasama sa ari-arian sumusunod na mga halaga: (border-image: width source slice repeat outset;) .

Sa tulong nito simpleng imahe Makukuha mo ang mga frame na ito para sa isang elemento.

/* Halimbawa 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; ) /* Halimbawa 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30;
kanin. 2. Isang halimbawa ng pagdidisenyo ng mga hangganan ng bloke gamit ang isang imahe

Ang mga cut A - B - C - D ay bumubuo sa mga sulok ng frame, at ang bahagi ng disenyo na matatagpuan sa pagitan ng mga ito ay pumupuno sa natitirang espasyo ng frame alinsunod sa binigay na halaga border-image-repeat properties. Ang laki ng bahagi ng sulok (sa halimbawang ito ang numero 30) ay itinakda gamit ang halaga ng border-image-slice property.

2.1. hangganan-larawan-lapad

Tinutukoy ng property ang lapad ng larawan para sa hangganan ng elemento. Kung ang lapad ay hindi tinukoy, ito ay magiging default sa 1.

hangganan-larawan-lapad
Mga halaga:
haba	Itinatakda ang lapad ng hangganan sa mga yunit ng haba - px / em . Maaari kang magtakda ng isa hanggang apat na halaga sa isang pagkakataon. Kung ang isang halaga ay tinukoy, kung gayon ang lapad ng lahat ng panig ng frame ay pareho, ang dalawang halaga ay tumutukoy sa lapad ng tuktok-ibaba at kanan-kaliwa, atbp.
numero	Ang numeric na halaga kung saan pinaparami ang halaga ng lapad ng hangganan.
%	Ang lapad ng hangganan ng elemento ay kinakalkula kaugnay sa laki ng larawan. Pahalang na may kaugnayan sa lapad, patayo - may kaugnayan sa taas.
sasakyan	Tumutugma sa halaga ng border-image-slice.
inisyal
magmana

Syntax

Div (border-image-width: 30px;) Fig. 3. Isang halimbawa ng pagtatakda ng lapad ng isang frame ng larawan gamit iba't ibang uri mga halaga

2.2. border-image-source

Tinutukoy ng property ang landas patungo sa larawan na gagamitin para palamutihan ang mga hangganan ng block.

Syntax

Div (border-image-source: url(border.png);)

2.3. mga elemento ng border-image-slice

Tinutukoy ng property ang laki ng mga bahagi ng larawan na ginamit upang tukuyin ang mga hangganan ng elemento at hinahati ang larawan sa siyam na bahagi: apat na sulok, apat na gilid sa pagitan ng mga sulok, at isang gitnang bahagi.

Mga halaga:
numero	Ang laki ng mga bahagi ng frame ay maaaring itakda gamit ang isa, dalawa, tatlo o apat na halaga. Itinatakda ng isang halaga ang mga hangganan na magkapareho ang laki sa bawat panig ng elemento. Dalawang halaga: tinutukoy ng una ang laki ng tuktok at mababang limitasyon, ang pangalawa - kanan at kaliwa. Tatlong halaga: tinutukoy ng una ang laki ng hangganan sa itaas, ang pangalawa - ang kanan at kaliwa, at ang pangatlo - ang hangganan sa ibaba. Apat na halaga: Tinutukoy ang mga sukat ng itaas, kanan, ibaba, at kaliwang mga hangganan. Ang numerong halaga ay kumakatawan sa bilang ng px .
%	Ang mga laki ng hangganan ay kinakalkula kaugnay ng laki ng larawan. Pahalang na may kaugnayan sa lapad, patayo - may kaugnayan sa taas.
punan	Ang halaga ay ipinahiwatig kasama ng isang numero o porsyento. Kung tinukoy, ang imahe ay hindi pinuputol ng panloob na gilid ng frame, ngunit pinupuno din ang lugar sa loob ng frame.
inisyal	Itinatakda ang property na ito sa default na value nito.
magmana	Inherits ang value ng property na ito mula sa parent element.

Syntax

Div (border-image-slice: 50 20;)
kanin. 4. Isang halimbawa ng pagtukoy ng mga hiwa ng frame ng larawan

2.4. border-image-repeat

Kinokontrol ng property na ito kung paano pinupuno ng larawan sa background ang espasyo sa pagitan ng mga sulok ng frame. Maaaring tukuyin gamit ang alinman sa isang halaga o isang pares ng mga halaga.

Syntax

Div (border-image-repeat: repeat;) Fig. 5. Halimbawa ng pag-uulit sa gitnang bahagi ng isang frame ng larawan gamit ang iba't ibang uri ng mga halaga

2.5. border-image-outset

Binibigyang-daan ka ng property na ilipat ang frame ng larawan sa kabila ng mga hangganan ng elemento sa pamamagitan ng isang tinukoy na haba. Maaaring tukuyin gamit ang alinman sa isa o apat na halaga.

Syntax

Div (border-image-outset: 10px;)
kanin. 6. Isang halimbawa ng paglilipat ng isang frame ng larawan gamit ang iba't ibang uri ng mga halaga

3. Outer frame offset outline-offset

Tinutukoy ng property ang distansya sa pagitan ng border ng elemento ng border at ng panlabas na border na ginawa gamit ang outline property.

/*Figure 1:*/ img ( border: 1px solid pink; outline: 1px dashed gray; outline-offset: 3px; ) /*Figure 2:*/ img ( border-width: 1px 10px; border-style: solid; kulay ng hangganan: pink na outline: 1px na guhit na kulay abo;
kanin. 7. Isang halimbawa ng dekorasyon ng isang imahe na may panlabas na frame

4. Gradient na frame

Ang halaga ng border-image ay maaaring hindi lamang isang imahe, kundi pati na rin isang gradient fill.

Translucent na frame

Ang isa sa mga kulay ay transparent. Sa ganitong paraan, maaari kang magtakda ng mga hangganan para sa lahat ng panig ng isang elemento nang sabay-sabay o hiwalay para sa bawat panig. Ang kapal ng hangganan ay kinokontrol ng property na lapad ng hangganan.

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; background: #00E4F6; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent ; border-image: linear-gradient(sa kanan, transparent 0%, #ADF2F7 100%);

Postal na sobre

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; ) .gradient ( height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px )

Isang nakakatuwang application ng CSS3 box-shadow property ang gumawa dobleng frame sa paligid ng elemento. napaka kawili-wiling epekto para sa disenyo ng pahina, Ngunit gagana lamang ito sa mga bagong bersyon ng mga browser na sumusuporta sa box-shadow .

Gayunpaman, mayroong ilang iba pang mga paraan upang lumikha ng epekto na ito. Bukod dito, ang malinaw na paggamit larawan sa background ay napakalayo sa ideal.

SA ang araling ito Limang pamamaraan ang ipinakita para sa paglikha ng double border sa paligid ng isang elemento. Bukod dito, isa lamang sa kanila ang nangangailangan ng isang imahe, at lahat ng iba ay gumagamit malinis na code CSS na may mahusay na suporta sa mga browser.

Paraan 1: hangganan at balangkas

Gumagana lang ang paraang ito sa mga browser na sumusuporta sa outline property (lahat maliban sa IE6/7). Idagdag mo ang parehong mga katangian ng border at outline sa elemento.

Isa ( border: solid 6px #fff; outline: solid 6px #888; )

Ang dahilan kung bakit gumagana ang pamamaraang ito ay iyon balangkas na balangkas ay palaging ipinapakita sa labas ng parihaba. Ang isyu sa outline property ay nangyayari kapag gumagamit ng mga lumulutang na elemento, dahil ang hangganan ay nag-o-overlap sa mga katabing elemento.

Paraan 2: Pseudo Element

Ang pamamaraang ito ay nangangailangan ganap na pagpoposisyon balangkas:

Dalawa ( border: solid 6px #fff; position: relative; z-index: 1; ) .two:before ( content: ""; display: block; position: absolute; top: -12px; left: -12px; border: solid 6px #888; padding-bottom: 12px;

Ang mga pangunahing punto ay ang pagtatakda ng z-index na ari-arian (upang ang pseudo na elemento ay mag-overlap sa nilalaman), pagpoposisyon, at ang min-height na halaga. Ang huling ari-arian ay nagpapanatili ng pagkalastiko ng frame.

Paraan 3: Anino

Karamihan pinakamahusay na paraan, dahil isang linya lang ng code ang kailangan sa mga setting ng box-shadow property.

Tatlo ( box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; )

Dalawang anino ang ginagamit para lumabas ang double frame. Pinaghihiwalay sila ng mga kuwit. Ang blur ay nakatakda sa 0. Dahil ang pangalawang anino ay pumapatong sa una, mayroon itong dalawang beses sa mas malawak na lapad. Pangunahing Punto- ang paggamit ng mga opaque na kulay, na lumilikha ng malinaw na hangganan sa pagitan ng mga frame.

Tulad ng outline property, box-shadow ay walang epekto sa mga kalapit na elemento at maaaring mag-overlap sa kanila. Samakatuwid, kinakailangan upang magtakda ng isang patlang para sa paghubog ng hitsura ng komposisyon.

Naturally, ang suporta para sa box-shadow property ay limitado sa mga mas bagong browser.

Paraan 4: Karagdagang elemento ng div

SA ang pamamaraang ito ginamit panlabas na elemento