CSS skisserer grensradius

Du har kanskje hørt og brukt grenseeiendommen i CSS -styling mens du forbereder HTML -filene for å lage en uthevet grense rundt noen elementer rundt overskrifter, tabeller og avsnitt. Når du legger en grense til et hvilket som helst element, kan du style den på forskjellige måter: lage en solid, prikket og stiplet grense, eller skissere den også. Border-radius-eiendommen lar deg style hjørnene på en grense. Innenfor denne guiden vil vi diskutere forskjellige eksempler for å style grensehjørnene ved å bruke konturen og grensen-radius eiendom.

Eksempel 01:

La oss komme i gang med det mest grunnleggende eksemplet på grenser. I dette eksemplet vil vi demonstrere bruken av grenseegenskaper for å skape en enkel kant rundt et element som brukes i HTML -koden. HTML -koden er startet med doctype “HTML” -merket som vil bli stengt på slutten av HTML -programmet. Etter HTML -taggen har vi brukt "head" -merket og kroppskoden. "Head" -koden vil bruke stilkoden til å designe vår webside.

Innenfor kroppskoden har vi brukt overskriften “H1” som vil være av største størrelse i HTML -overskrifter. Denne overskriften inneholder bare to ord, "Border Radius". Innenfor stilmerket bruker vi H1 -overskriften for å style den litt. Innenfor de krøllete parentesene har vi brukt "grensen" for å skape en grense rundt overskriften. Vi har spesifisert grensebredden som 3 piksler solid, og den vil være rød. Stil- og hodemerket er lukket her. La oss lagre og kjøre dette HTML -skriptet i Visual Studio -koden og gjøre det åpent i Google Chrome.

Etter HTML -kodeutførelsen i Visual Studio -koden, er HTML -nettsiden blitt åpnet i Chrome -nettleseren som vist nedenfor. Denne siden har blitt vist med overskrift 1 “Border Status” med sin røde kant. Denne grensen er av bredde 3 piksler og den er solid rød.

Inntil ennå hadde vi ikke diskutert grensradius i vår illustrasjon ovenfor av HTML -kode. Så vi har brukt totalt 4 overskrifter med forskjellige titler. Siden alle overskriftene er størrelse 1 -overskrifter, må vi skille dem ut med klasser. Vi har spesifisert separate klassenavn for både overskriftene, "A", "B", "C" og "D". Innenfor stilmerket til en hodemerke er klassene definert til å style begge overskriftene separat. Selv om vi har stylet begge overskriftene ganske likt, er det nødvendig å gjøre det separat og ikke blande dem sammen. Vi har skapt en grense rundt den første overskriften med en solid rød farge, og det vil være av bredde 3 piksler.

Den samme "grense" -egenskapen har blitt brukt til de tre andre overskriftene som inneholder klasser "B", "C" og "D". Den eneste endringen er den solide blå fargen, solid grønn farge og solid orkidefarge i stedet for rød farge for resten av overskriftene. Etter å ha lagt den 3 pikselgrensen rundt alle overskriftene, er det på tide å legge en radius til grensen. Vi har brukt grensen-radius-eiendommen for å legge til en grense på 25 piksler til heading 1. Denne enkeltverdien for eiendommen.

Etter dette har vi brukt to verdier for eiendommen “Border-Radius”. Vi har brukt disse verdiene for overskrift tre: den første verdien for øverste venstre hjørne, den andre for øverste høyre og nederst til venstre, og den tredje verdien for nederst til høyre hjørne. Den siste stylingen for Heading 4 inneholder 4 verdier for henholdsvis grensen-radius-eiendommen: topp-venstre, topp til høyre, nederst til venstre og nederst til høyre. La oss lagre og kjøre denne koden.

Med bruk av forskjellige verdier for grense-radius, har vi de endrede overskriftene på nettsiden vist nedenfor. Bruken av grensen-radius-eiendommen med 25 piksler har gjort grense-radius-kurven fra alle sider for overskrift 1. Etter det har bruken av grensen-radius-egenskapen med 2 verdier vist en mer skissert kurve for topp-venstre og nedre høyre hjørner sammenlignet med toppen til høyre og nedre venstre i overskriften 2. Bruken av tre verdier for overskrift tre viser den klare omrissegrenseendringen i toppen til høyre og nedre venstre hjørner sammenlignet med andre sider. Den siste overskriften har vist endringen i alle hjørner.

Eksempel 02:

Det er på tide å skape en oversikt for en grense sammen med kurver i hjørnene. Så vi har brukt totalt 3 overskrifter i "Body" -koden til en HTML -tag. Overskriftene initialiseres med "H1" overskriftskoden. Den største størrelsen som skal produseres på nettsiden. Alle de tre overskriftene er spesifisert med tre forskjellige klasser: A, B og C. Disse klassene vil bli brukt i stilkoden for å style overskriftene annerledes.

Så innenfor stilmerket til en "hode" -merke i HTML -filen har vi spesifisert overskriftene sammen med klassene deres for å style dem separat. Vi har brukt grensen-radius-egenskapen for alle de tre overskriftene mens radius er satt til forskjellige verdier for de tre overskriftene: 10px, 25px og 50px. Polstring og bredde for alle de tre overskriftene er spesifisert med de samme verdiene, henholdsvis 10px og 500px. Vi har brukt høydeegenskapen for de to første overskriftene, 40px hver. Vi har satt bakgrunnseiendommen for første overskrift, grønn fargebakgrunn.

Grenseegenskapen har blitt brukt til 2. og tredje overskrift for å spesifisere grensetykkelsen, 5px. Stilen er solid, og fargen på en grense som skal genereres. Omrissegenskapen for grensene har bare blitt brukt i den tredje overskriften og skaper en 5px tykk prikket disposisjon. La oss lagre og kompilere denne koden for å se endringene.

Utgangen fra denne HTML -koden har vist den første overskriften en liten liten kurve fra hjørnene uten tynn kant og fylt med den grønne bakgrunnsfargen. Den lilla grensen til overskriften 2 er Curvier og Heading 3 inneholder en grense med en prikket blåaktig omriss.

Konklusjon:

Denne guiden demonstrerer bruken av grenser i HTML-koder sammen med deres andre egenskaper som grense-radius og disposisjon. Vi har diskutert HTML-eksemplene for å style kurvene til en grense ved hjelp av en grensestadius-eiendom. Sammen med det har vi sett hvordan vi kan fylle grensene til spesifikke elementer med bakgrunnseiendommen og lage konturer utenfor grensen ved å bruke Outline -egenskapen. Gjennom disse eksemplene var bruken av egenskaper for bredde, høyde og polstring veldig gunstig å bli brukt i koden.