Dizains stūriem un rāmjiem, izmantojot CSS. Dizains stūriem un rāmjiem, izmantojot CSS Komentāru rāmis ar stūra css

Vlads Merževičs

Tīmekļa vietnēs trijstūri bieži tiek izmantoti kā daļa no elementu dizaina, piemēram, tie kalpo kā rādītājs uz kādu objektu, novirzot lasītāja uzmanību uz pareizo vietu. Trijstūri pilda arī dekoratīvas funkcijas, padarot blokus, kur tie tiek izmantoti, elegantākus un modernākus. Attēlā 1. attēlā parādīts trijstūra izmantošanas piemērs dizainā.

Rīsi. 1. Trijstūri web dizainā

Jūs nevarat tieši izveidot trīsstūri, izmantojot CSS, tāpēc ir pieejamas divas metodes tā pievienošanai — caur apmali un transformācija .

Izmantojot apmali

Lai gan robežas, kas izveidotas caur pierobežas īpašumu, nav tieši saistītas ar trijstūriem, šim nolūkam apmale ir visbiežāk izmantotā robeža. Ja iestatīsim elementa platumu un augstumu uz nulli, kā arī iestatīsim pietiekami biezu apmali, mēs redzēsim četru trīsstūru kopu (2. att.). Skaidrības labad apmales no visām pusēm ir iestatītas dažādās krāsās.

Rīsi. 2. Apmales pievienošana elementam

Atstājot tikai vēlamo apmali un pārējo padarot caurspīdīgu, iegūsim vēlamās krāsas trīsstūri (3. att.).

Rīsi. 3. Elements ar caurspīdīgām apmalēm

1. piemērā parādīts, kā blokam pievienot trīsstūri, izmantojot pseidoelementu ::after.

Piemērs 1. Bloks ar trīsstūri

Absolūti novietotiem elementiem nav nepieciešams nulles platums un augstums.

Apvienojot robežas, jūs varat iegūt vēl četrus trijstūra veidus, kas apvienojumā ar jau minētajiem dod mums astoņas iespējas. To veids un nepieciešamais kods ir norādīts tabulā. 1.

Tabulā redzams, ka neredzamās apmales aizņem vietu, ņemiet to vērā, pozicionējot elementus. Stils arī jāpapildina ar nulles platumu un augstumu vai jāizmanto pozīcijas īpašība, kā tas tika darīts 1. piemērā.

Trīsstūrim var izveidot citas formas, ja iestatāt dažādus apmales biezumus. Tādējādi kods bloka izveidei, kas parādīts attēlā. 4, parādīts 2. piemērā.

Rīsi. 4. Ass trīsstūris

Piemērs 2. Akūts trīsstūris

Izmantojot apmali, mēs iegūstam vienkrāsainus trīsstūrus, lai izveidotu rāmi, kas parādīts attēlā. 5 jums ir jāizmanto triks un jāuzliek viens elements virs otra ar nelielu nobīdi. Arī šeit mums palīdzēs pseidoelementi :before un :after (3. piemērs).

Rīsi. 5. Rāmis ar stūri

3. piemērs. Trīsstūra pārklājums

Tā kā mēs slāņojam vienu vienkrāsainu elementu virs otra, šī metode ir piemērota tikai vienkrāsainiem aizpildījumiem un nav piemērota gradientiem vai fona attēliem.

Izmantojot transformāciju

Izmantojot transformāciju, mēs varam pagriezt kvadrātveida elementu par 45º un iegūt no tā rombu. Šis vēl nav trijstūris kā tāds, tāpēc mēs atstājam vajadzīgo izvirzīto daļu redzamā vietā, bet pārējo paslēpjam aiz cita elementa (4. piemērs).

3. piemērs. Pārveidošana

Šī piemēra rezultāts ir parādīts attēlā. 6.

Rīsi. 6. Trijstūris ar ēnu

Kā piemēru var ņemt vienu variantu, kur blokam ir izliekti stūri, un tas izskatās pavisam savādāk nekā standarta. Dažiem ir iespēja ievietot dažādas lentes vai instalēt attēlu, kas ir uzstādīts bloka iekšpusē.

Viss iesniegtais materiāls ir adaptīvā formā zem atšķirīga izšķirtspēja, kas ir paredzēts lielam monitoram vai mazākajam ekrānam. Pēc uzstādīšanas vietā, kur tie galvenokārt tiek novietoti, lai piesaistītu uzmanību, notiks izmaiņas, jo sākotnēji ir tikai struktūra, kas var papildināt galveno stilu.

Pirmais variants:

Ugoinsa_utomatio_npones (
displejs: inline-block;
platums: 295 pikseļi;
pozīcija: relatīvs;
apmale: 1,5 pikseļi ciets #1b629e;
pāreja: viss .3s vieglums;
mala: 5 pikseļi;
kursors:rādītājs;
}
.ugoinsa_utomatio_npones:before, .ugoinsa_utomatio_npones:after (
saturs: "";
z-indekss: -1;
displejs: bloks;
pozīcija: absolūta;
fons: #FFF;
augšā: 50%;
pa kreisi: 50%;
pārveidot: tulkot(-50%, -50%);
animācijas atkārtojumu skaits: 1;
transformācijas izcelsme: 50% 50%;
}
.ugoinsa_utomatio_npones:before (
platums: calc(100% + 4px);
augstums: 75%;
z-indekss: 1;
pāreja: augstums 0,6s;
}
.ugoinsa_utomatio_npones:after (
augstums: calc(100% + 4px);
platums: 85%;
z-indekss: 1;
pāreja: platums 0,7s;
}
.ugoinsa_utomatio_npones:hover:before, .ugoinsa_utomatio_npones:focus:before (
augstums: 50%;
}
.ugoinsa_utomatio_npones:hover:after, .ugoinsa_utomatio_npones:focus:after (
platums: 74%;
}
.sequpok_egulaned_demob (
polsterējums: 29 pikseļi;
z-indekss: 2;
pozīcija: relatīvs;
teksta līdzināšana: centrs;
}

Otrais variants:

Pvobamoko-pagēns (
pozīcija: relatīvs;
displejs: inline-block;
platums: 283 pikseļi;
piemale: 7 pikseļi 0 37 pikseļi 0;
polsterējums: 28px;
krāsa: #f3eaea;
teksta līdzināšana: centrs;
fons: #2b22a0;
fons: lineārs gradients (pa kreisi apakšā, caurspīdīgs 50%, rgba(16, 16, 16, 0,4) 0) bez atkārtošanas 100% 0 / 30 pikseļi 30 pikseļi, lineārs gradients (-135 grādi, rgba (0, 0, 0) , 0) 20 pikseļi, #334ab9 0);
filtrs: drop-shadow(18px 28px rgba(14, 14, 14, 0.1));
}
.pvobamoco-mpagensive::before (
saturs: " ";
pozīcija: absolūta;
augšpusē: 30 pikseļi;
pa labi: 0;
fons: lineārs gradients (uz kreiso apakšu, rgba(0, 0, 0, 0) 50%, rgba(14, 14, 14, 0,1) 0) 100% 0 neatkārtojas;
platums: 28 pikseļi;
augstums: 28px;
pārveidot: pagriezt (180°);
}

Trešā iespēja:

Keculosubes_aspectsiveb (
pozīcija: relatīvs;
displejs: inline-block;
platums: 295 pikseļi;
polsterējums: 30 pikseļi;
mala: 9 pikseļi;
minimālais augstums: 91 pikseļi;
apmale: 2px ciets #BFE2FF;
teksta līdzināšana: centrs;
}
.malugeke_deculos (
platums: 148 pikseļi;
augstums: 148 pikseļi;
pārplūde: slēpta;
pozīcija: absolūta;
}
.malugeke_deculos::before, .malugeke_deculos::after (
pozīcija: absolūta;
z-indekss: -1;
saturs: "";
displejs: bloks;
apmale: 5px solid #2980b9;
}
.malugeke_deculos span (
pozīcija: absolūta;
displejs: bloks;
platums: 223 pikseļi;
polsterējums: 15 pikseļi 0;
fona krāsa: #337AB7;
box-shadow: 0 5px 10px rgba(12, 12, 12, 0,1);
krāsa: #f3f0f0;
fonts: 700 18px/1 "Lato", sans-serif;
teksta ēna: 0 1px 1px rgba(8, 8, 8, 0,1);
teksta pārveidošana: lielie burti;
teksta līdzināšana: centrs;
}
.malugeke_deculos-top-left (
augšā: -10 pikseļi;
pa kreisi: -10 pikseļi;
}
.malugeke_deculos-top-left::before, .malugeke_deculos-top-left::after (
apmale-kreisā krāsa: caurspīdīga;
}
.malugeke_deculos-top-left::before (
augšā: 0;
pa labi: 0;
}
.malugeke_deculos-top-left::after (
pa kreisi: 0;
apakšā: 0;
}
.malugeke_deculos-top-left span (
pa labi: -25 pikseļi;
augšpusē: 30 pikseļi;
pārveidot: pagriezt (-45grādi);
}
.malugeke_deculos-top-right (
augšā: -10 pikseļi;
pa labi: -10 pikseļi;
}
.malugeke_deculos-top-right::before, .malugeke_deculos-top-right::after (
apmales-top-krāsa: caurspīdīga;
apmale-labā krāsa: caurspīdīga;
}
.malugeke_deculos-top-right::before (
augšā: 0;
pa kreisi: 0;
}
.malugeke_deculos-top-right::after (
pa labi: 0;
apakšā: 0;
}
.malugeke_deculos-top-right span (
pa kreisi: -25 pikseļi;
augšpusē: 30 pikseļi;
pārveidot: pagriezt (45°);
}

Te web izstrādātājs var smuki noformēt, jo šim jau ir pilns rāmis, daži liek ēnas, viss atkarīgs no interneta resursa krāsu paletes un vispār kur atradīsies un kādam nolūkam tādu liks oriģināls rāmis.

CSS3 rāmis papildina iespēju formatēt elementu apmales ar īpašībām, kas ļauj noapaļot stūrus elementu, kā arī izmantot attēlus lai noformētu elementa apmales.

Noapaļoti stūri un attēlu rāmji

1. Stūru noapaļošana ar apmales rādiusu

Pārlūka atbalsts

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 - tīmekļa komplekts-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android pārlūkprogramma: 4.1
Chrome Android ierīcēm: 44

Īpašums ļauj noapaļot mazo burtu stūrus un bloka elementi. Katra leņķa līkne tiek definēta, izmantojot vienu vai divus rādiusus, kas nosaka tā formu − aplis vai elipse. Rādiuss attiecas uz visu fonu, pat ja elementam nav apmales, precīza sekanta pozīcija tiek noteikta, izmantojot fona klipu rekvizītu.

Rekvizīts apmales rādiuss ļauj noapaļot visus stūrus vienlaikus, un, izmantojot rekvizītus border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius var noapaļot katru stūri atsevišķi.

Ja iestatāt divas robežas rādiusa rekvizīta vērtības, pirmā vērtība tiks noapaļota augšā pa kreisi Un apakšējā labajā stūrī, un otrais - augšējā labajā stūrī Un apakšā pa kreisi.

Vērtības, kas norādītas caur / noteikt horizontāli Un vertikālie rādiusi. Īpašums nav mantots.

Iespējas

Div (platums: 100 pikseļi; augstums: 100 pikseļi; apmale: 5 pikseļi ciets;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-radius: 10px 20px) ;) .r4 (border-radius: 10px/20px;) .r5 (border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (border-radius: 10px 20px 4px 3p;) robeža-rādiuss: 50%;).r8 (apmale-augšējā: nav; apmale-apakša: nav; apmale-rādiuss: 30px/90px;).r9 (apmale-apakša-kreisais rādiuss: 100px;).r10 (apmale -rādiuss: 0 100%;).r11 (apmales rādiuss: 0 50% 50% 50%;).r12 (apmale-augšējais-kreisais-rādiuss: 100% 20px; apmale-apakšējais-labais-rādiuss: 100% 20px ;)
Rīsi. 1. Piemēri dažādas iespējas bloku stūru noapaļošana

2. Robeža-attēls

Pārlūka atbalsts

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -tīmekļa komplekts-
Safari: 6.0, 3.0 - tīmekļa komplekts-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8-o-
Android pārlūkprogramma: 4.4, 4.1 - tīmekļa komplekts-
Chrome Android ierīcēm: 42

Rekvizīts ļauj iestatīt attēlu kā elementa apmali. Galvenā prasība attēlam ir, ka tam jābūt simetriskam. Rekvizīts ietver šādas vērtības: (border-image: platuma avota slāņa atkārtojuma sākums;) .

Izmantojot tik vienkāršu attēlu, elementam var iegūt šādus rāmjus.

/* 1. piemērs */ div ( platums: 260 pikseļi; augstums: 100 pikseļi; apmales stils: ciets; apmales attēla platums: 15 pikseļi; border-image-source: url(border_round.png); apmales-image-slice: 30 ; border-image-repeat: stiept png);
Rīsi. 2. Bloku robežu projektēšanas piemērs, izmantojot attēlu

Izgriezumi A - B - C - D veido rāmja stūrus, un starp tiem esošā dizaina daļa aizpilda atlikušo rāmja vietu saskaņā ar dotā vērtība border-image-repeat īpašības. Stūra izmērs (collas šajā piemērā tas ir skaitlis 30) tiek norādīts, izmantojot rekvizīta border-image-slice vērtību.

2.1. robeža-attēla platums

Rekvizīts norāda attēla platumu elementa apmalei. Ja platums nav norādīts, pēc noklusējuma tas ir 1.

Sintakse

Div (border-image-width: 30px;) att. 3. Piemērs attēla rāmja platuma iestatīšanai, izmantojot dažādi veidi vērtības

2.2. robeža-attēla avots

Rekvizīts norāda ceļu uz attēlu, kas tiks izmantots bloka robežu dekorēšanai.

Sintakse

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

2.3. apmales-image-slice elementi

Rekvizīts nosaka attēla daļu izmērus, ko izmanto, lai definētu elementa robežas, un sadala attēlu deviņās daļās: četros stūros, četrās malās starp stūriem un centrālajā daļā.

Sintakse

Div (apmale-image-slice: 50 20;)
Rīsi. 4. Attēla kadra slāņu norādīšanas piemērs

2.4. robeža-attēls-atkārtot

Īpašuma vadīklas polsterējums fona attēlu atstarpe starp rāmja stūriem. Var norādīt, izmantojot vienu vērtību vai vērtību pāri.

Sintakse

Div (border-image-repeat: atkārtot;) Att. 5. Piemērs attēla rāmja centrālās daļas atkārtošanai, izmantojot dažāda veida vērtības

2.5. border-image-outset

Īpašums ļauj pārvietot attēla rāmi ārpus elementa robežām par noteiktu garumu. Var norādīt, izmantojot vienu vai četras vērtības.

Sintakse

Div (apmale-image-outset: 10px;)
Rīsi. 6. Attēla rāmja pārvietošanas piemērs, izmantojot dažāda veida vērtības

3. Gradienta rāmis

Apmales attēla vērtība var būt ne tikai attēls, bet arī gradienta aizpildījums.

Caurspīdīgs rāmis

Caurspīdīgs ir viena no krāsām. Tādā veidā jūs varat iestatīt robežas visām elementa pusēm vienlaikus vai atsevišķi katrai pusei. Robežas biezumu kontrolē robežas platuma rekvizīts.

Pasta aploksne

1. , , - CSS īpašības
2. (Caurspīdīgs) — CSS īpašums. Atbildīgs par diagonāla rāmja izveidi
3. "px" - vērtība pikseļos

Šajā rakstā mēs ar jums runāsim par rāmju izveidi, bet ne parasto kvadrātveida, bet noapaļotu. Viņiem ir vairāk skaists skats nekā parastie kvadrātveida rāmji bez noapaļošanas.

Īpašums radošu ideju telpas paplašināšana, palielinot iespējamo dizaina elementu skaitu. Un kombinācijā ar kadru stila maiņu, izmantojot rekvizītu vērtības , varat izveidot īpašu rāmi, kādu neatradīsiet nekur citur.

Šajā rakstā mēs sīkāk aplūkosim apaļo rāmju izveidi un daudz ko citu. CSS ir tāda lieta kā trīsstūrveida rāmji, bet vairāk par to tālāk.

Rāmju noapaļošana, izmantojot

Šis CSS rekvizīts ļauj noapaļot elementa robežas. Daži izstrādātāji to izmanto, neradot redzamas apmales, lai izveidotu izkārtojumus uz noapaļota "korpusa" konteinera.

Izmantojot standarta rādiusus, varat izveidot noapaļotas formas, piemēram, apli vai ovālu.

Lai izsekotu savam darbam no šī īpašuma, pietiek ar īpašuma iestatīšanu . Lai gan tā nosaukumā ir vārds "robeža", tas nav tieši saistīts ar rāmju izveidi. Tas noapaļo tīmekļa elementa robežas, nevis tā apmali.

Pats īpašums ir saīsinājums četriem rekvizītiem: , , Un . Katrs no tiem norāda izliekuma rādiusu katram no četriem stūriem.

Vienkāršs īpašums var izmantot vienu vai 4 vērtības. Darbojas tāpat kā ar īpašumu vai .

Noapaļošanu var attiecināt uz visiem HTML elementi, bet ne visos gadījumos. Dažas pārlūkprogrammas to nepieņem, ielādējot kadrus, kuriem ir īpašums , ar vērtību "sabrukt".

Lai noteiktu izliekuma rādiusu, varat izmantot dažādas vērtības, taču visbiežāk vērtība tiek norādīta pikseļos. Tas ir tāpēc, ka tie ir vispiemērotākie maza izmēra elementu aprakstīšanai.

Papildus parastajai noapaļošanai varat izmantot papildu rādiusu, piemēram, lai izveidotu elipsi.

Lai to izdarītu, vērtības jāsadala ar daļu.

Īpašums - piemēri:

Tagad mēs parādīsim pāris noapaļotas apmales izveides piemērus. Lai tos izpētītu sīkāk, lejupielādējiet mūsu avotus.

Trīsstūru veidošana, izmantojot

Lai izveidotu trīsstūrus, jums jāizmanto īpašums . Bet šeit tā izmantošana nedaudz atšķirsies no parasto kadru veidošanas.

Vispirms iestatiet trīsstūra elementa platumu un augstumu uz nulli.

Pēc tam pierakstiet dažus rekvizītus. Pirmais ir galvenais, rāmja īpašums. Tas ir izveidots gandrīz tāpat kā parasti. Iestatiet platumu, līnijas veidu un ievadiet vērtību "caurspīdīgs". Tas ir atbildīgs par trīsstūra izveidi.

Lai izveidotu taisnu trijstūra malu, šai pusei ir jāizveido atsevišķa rāmja līnija.

Secinājums

Tagad jūs zināt visu par īpašumu , kas ļaus izveidot unikālus dizaina elementus. Turklāt trijstūri, kas izveidoti ar "apmali", veido lieliskus dekoratīvus elementus, kurus var ievietot jebkurā tīmekļa lapā.

Sākumā tas var šķist ļoti grūti, bet, ja jūs praktizēsit, tas būs vieglāk, nekā jūs domājat. Lejupielādējiet mūsu avotus un izpētiet to kodu, lai labāk izprastu, kā īpašums darbojas. Vēlam veiksmi mācībās!

Ap to izveidot dažādas skaistas lietas, un pirmā tik skaista lieta būs rāmis.

Vispirms apskatīsim vienkāršākos ietvarus. Lai tos izveidotu, CSS izmanto border rekvizītu, kam var iestatīt šādas vērtības:

ciets – ciets rāmis;

punktēts – punktēts rāmis;

dotted – punktēts rāmis;

dubultā – dubulto līniju rāmis;

rieva – rāmis ar ēnu;

grēda - ar reljefu;

Ir vēl divi rekvizīti, kas nepieciešami, lai izveidotu vienkāršus kadrus

widht – rāmja biezums;

krāsa – rāmja krāsa;

Saskaņā ar saīsināšanas paņēmienu vērtības tiek rakstītas vienā rindā, atdalītas ar atstarpēm.

p(
apmale : 2px solid #ffff00 ;
}

polsterējums – iekšējais (rāmja atkāpe no satura);

margin — ārējā (rāmja mala no ārējiem objektiem);

Norādes norādītas arī ievilkumiem (no kuras puses un cik atkāpties). Šie rekvizīti tiek izmantoti, ja saturs ir jānovieto ārpus kadra centra vai pats rāmis ir kaut kādā veidā nobīdīts.

top – augšējais ievilkums;

pa labi – labā atkāpe;

apakšējā – apakšējā ievilkums;

pa kreisi – kreisais ievilkums

Šo rekvizītu vērtības tiek rakstītas saīsinātā versijā viena pēc otras (polsterējums: 10 pikseļi 30 pikseļi 15 pikseļi 20 pikseļi), un vispirms tiek iestatīta augstākā vērtība, bet pēc tam pārējā vērtība pulksteņrādītāja virzienā.

Ja iestatāt tikai vienu vērtību, tas nozīmēs, ka atkāpe no visām pusēm būs vienāda.

p(
apmale : 2px solid #ffff00 ;

piemale: 20 pikseļi;
}

Ja kadra centrā ir jāievieto teksts vai attēls, atlasītājam “p” varat pievienot rekvizītu text-align: center;

Tālāk apskatīsim, kā augums un rāmja platums. Rāmja augstumu pārlūkprogramma iestata automātiski, un tas tiek izvēlēts tā, lai saturs tajā ietilptu, ņemot vērā norādītās atkāpes. Bet platumu noteiksim paši.

To nosaka platuma rekvizīts, un tā vērtība norāda vēlamo izmēru pikseļos vai citus tīmeklī pieņemtus garuma mērus.

p(
apmale : 2px solid #ffff00 ;
polsterējums: 10px 20px 10px 20px;
piemale: 20 pikseļi;
platums: 400 pikseļi;
}

Starp citu, atcerieties, ka, iestatot platumu, pārlūkprogramma šo vērtību saprot tikai kā satura platumu. Pēc tam šai vērtībai tiek pievienots norādītais polsterējums un apmales biezums un lapā tiek parādīts galīgais izmērs.

Pēdējā lieta, kas jādara, ir novietot rāmi uz lapas. Tas tiek darīts, izmantojot jau esošo maržas rekvizītu.

Un, ja jums vienkārši jānovieto rāmja bloks lapas centrā, vērtība auto tiek pievienota piemales rekvizītam.

p(
apmale : 2px solid #ffff00 ;
polsterējums: 10px 20px 10px 20px;
piemale: 20px auto;
platums: 400 pikseļi;
}

Pirmajā piemērā izveidosim html dokuments, un izveidojiet stingrus rāmjus pamatteksta blokam (dokumenta pamattekstam) un vienai rindkopai.

Turpmākajos piemēros mainīsies tikai CSS (kas ir ietverts stila tagā).

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Если поиграть с дробным значением border-radius , можно сделать эллипс любого вида.

Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.

И последнее, что мы сегодня сделаем — рамка с изменяющимся цветом. Изменяться он будет при наведении курсора.

Реализуется эта опция при помощи псевдокласса :hover .

p {
border-radius : 10px ;
box-shadow : 0 0 0 4px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}
p:hover {
border-radius : 10px ;
box-shadow : 0 0 0 4px #00ff62 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

В спокойном состоянии:

При наведении курсора:

Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.

Желаю творческих успехов.

Перемена

На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться?..