Cum de a rotunji colturi in css si html

Foarte des, web designeri din activitatea lor se schimba forma de forme geometrice, imagini, fotografii, etc. recoltând colțurile rotunjite. Acest lucru dă exhaustivitatea proiect și design frumos.

Există o varietate de moduri de a converti complexitatea implementării unui dreptunghi obișnuit într-un dreptunghi cu colțurile rotunjite. Ne uităm la două dintre modul cel mai simplu și rapid, și să învețe să facă imaginea și cadru în jurul imaginii cu colțuri rotunjite pentru design si web pagini web:

1. colturi rotunjite folosind CSS și codul HTML cu intrarea în style.css stylesheet.

2. colțuri Rotunjirea cu codul HTML fără fișier stil de scriere.

3. Imagini cu colțuri rotunjite. Cadrul în jurul HTML imagine.

1. colturi rotunjite folosind CSS și codul HTML cu intrarea în style.css stylesheet

Luați în considerare prima metodă de obținere a unui dreptunghi cu colțuri rotunjite, folosind CSS și codul HTML cu intrarea în style.css stylesheet.

Ce este CSS

CSS - Cascading Style Sheets este (Cascading Style Sheets - CSS), folosind un cod special. Cu acesta, puteți schimba fonturile. elemente de formă și culoare. în paginile unei aplicatii web pentru elemente de poziție, includ imagini de fundal. CSS3 cea mai recentă versiune a dezvoltării CSS.

Lucrul cu codurile și fișiere ușor și accesibil CSS și HTML. Cel mai important lucru de a face totul foarte încet și cu grijă.

Asigurați-un dreptunghi cu un chenar în CSS

Pentru a portretiza un dreptunghi geometric on-line obișnuit, trebuie să descrie parametrii: lungime, înălțime, de culoare forma, culoarea de fundal a blocului și, dacă este necesar, stiluri de cadru (grosime, culoare, etc.). Pentru această formă următoarea unitate CSS, care descrie stiluri (parametrii) a dreptunghiului:

Codul de culoare este specificat în hexazecimal și poate fi compus din șase caractere (codul său plin) sau trei caractere (cod prescurtat). Pentru a reduce codul de culoare poate fi, în cazul coincidență a primei cifre, în al doilea, al treilea, al patrulea și al cincilea la al șaselea. De exemplu, # BB00CC cod abreviat poate fi scris ca # b0c. Literele A, B, C, D și F un cod de culoare, utilizați numai latină.

Semnificație 3px în atributul border indică lățimea cadrului.

După introducerea unui fișier style.css stiluri putem arăta dreptunghi nostru de oriunde de pe site-ul. Pentru a face acest lucru, plasați eticheta HTML în locul în care ar trebui să vedem un dreptunghi. Eticheta arata ca:

Rețineți că stilurile CSS pentru această cifră se introduc în fișierul doar o singură dată, și HTML-tag-ul poate fi plasat pe un număr nelimitat de ori online.

Ca urmare a emiterii se obține un dreptunghi cu rama.

Cum de a face colturi rotunjite în CSS

Pentru a rotunji colturile folosind atributul border-radius.

Am putea adăuga doar acest atribut. Se afișează în mod normal, rezultatul de rotunjire în versiunile mai noi de browsere, dar mulți utilizatori au încă versiuni mai vechi în cazul în care acest atribut nu funcționează corect. Prin urmare, pentru compatibilitate, vom mai adăuga câteva descrieri ale acestui atribut este direct legat de browsere specifice, în blocul nostru în fișierul style.css, pentru a primi următorul cod:

tag-ul HTML-div ne va da un dreptunghi într-un cadru cu colturi rotunjite:

Cum se introduce text într-un cadru

Pentru cazare într-un dreptunghi de text pe care trebuie să adăugați bloc CSS liniuță de text atribut din marginile umplutură. și HTML-tag-ul va contine textul dorit, cum ar fi „pib9.ru“. Astfel, unitatea de CSS are forma următoare:

și HTML-tag-ul pentru eliberarea textului va arata astfel:

Obținem un dreptunghi cu colțuri rotunjite și textul:

Dacă de la codul pentru a elimina lățimea și înălțimea dreptunghiului descrierile mărime de atribute. puteți obține aceste forme cu colțuri rotunjite:

În acest caz, să ia dimensiunile formă medie: câmpul lungime corespunde cu lățimea și înălțimea modificările ca matriță de umplere conținutului.

Rotunjirea unghiuri selectate

În descrierea stilurilor 10px atribut parametru indică border-radius rază de curbură care poate fi variată prin selectarea celui dorit. Dacă specificați 0, va avea loc rotunjirea. Această proprietate poate profita de atunci când aveți nevoie pentru a face colțuri de rotunjire selectate.

Scrie valorile raza de curbură pentru fiecare unghi indică zero în cazul în care anula rotunjire. De exemplu, anulează rotunjire a treia și a patra colțuri. Codul nostru va arata astfel:

1. colțul din stânga sus.

2. colțul din dreapta sus.

3. colțul din dreapta jos.

4. În colțul din stânga jos.

Astfel, se obține un dreptunghi cu rotunjit selectat numai la colțurile superioare.

Unghiurile numărătoarea inversă fiind în sensul acelor de ceasornic, pornind de la colțul din stânga sus:

2. colțuri Rotunjirea cu codul HTML fără fișier stil de scriere

Luați în considerare a doua metodă de producere a unui dreptunghi cu colțurile rotunjite, folosind codul HTML fără a fișierului de stil de scriere.

HTML colțuri rotunjite

Există o caracteristică mică, ceea ce simplifică și mai mult întregul proces - este un HTML colturi rotunjite. Acesta se află în formarea de cod HTML care sunt scrise același stil ca și codurile în CSS. Acesta utilizează aceleași atribute ca și în blocul CSS și nu este nevoie pentru fișierul style.css unitate de înregistrare. Într-un cuvânt - înlocui complet codul CSS HTML code.

În loc de blocul nostru CSS este un script HTML, care este introdus în locul în care trebuie să se acorde un dreptunghi rotunjit:

Primul mod de a rotunji colturile pot fi folosite atunci când una și aceeași formă, fără a schimba stilurile folosite mai mult decât o dată. A doua metodă este folosită pentru formele, stiluri, care sunt utilizate o singură dată.

3. Imagini cu colțuri rotunjite. Cadrul în jurul imaginii HTML

De asemenea, doresc să vă dau informații utile. De multe ori folosind imagini pentru web design. într-adevăr doresc să le facă chiar mai frumos, schimbarea formei lor, încadrarea cadru frumoase culori si diferite latimi. Acest fapt ridică întrebarea: „Cum de a rotunji colturile imaginii?“.

Este foarte simplu, iar acum vom învăța.

Flip imaginea de pe site-ul, ceea ce face un fundal pentru sine, în tag-ul de fundal div. Obținem următorul cod și imagine:

Adresa URL atributului ( „“) se introduce un link către imaginea ta.

Rotunji colțurile cadrului de imagine cu adaos de

Rotunjirea colțurile imaginilor în CSS și HTML, și se adaugă un cadru se poate face una din cele două moduri, așa cum este descris mai sus.

Folosind prima metodă a acestui articol, imagini de cod pentru stiluri de fișiere și tag-ul HTML div-cod va apărea după cum urmează: