Video: How to change form background color in run time in vb.net 2024
CSS3-grense-radius-effekten definerer avrundede hjørner. Og du må bruke nettleserespesifikke prefikser når du definerer en ramme-radius. Her er noen regler for å definere en grense-radius:
-
Du kan ikke bruke en grense-radius til en velger (en CSS-stil) som ikke har en definert høyde eller bredde (minst en eller den andre).
-
Den grunnleggende egenskapen for en grense-radius i CSS3 er grense-radius, etterfulgt av en verdi. For eksempel, radiusradius: 12px; skaper avrundede hjørner på alle fire hjørner av elementet som det blir brukt på. Og "avrundingen" av disse hjørnene vil strekke seg til 12 piksler fra hjørnene.
-
Du kan definere separate radier for hvert hjørne av en kantlinje. For eksempel:
grense øverst til venstre: 1px; border-top-right-radius: 2px; grense bunn-høyre-radius: 3px; Grense nederst-venstre-radius: 4px;
Ta følgende eksempel: en klassestil som definerer både grenser og grenseradier. Følgende CSS-stil lager en. grenser klassen som gjelder både grenser og grense radier til ethvert element som det brukes på:
. grenser {grense: 12px solid grå; Grense øverst til venstre: 48px; Grense-topp-høyre-radius: 24px; Grensebunn-høyre-radius: 12px; Grense bunn-venstre-radius: 6px; utfylling: 12px;}
Resultatet av den forrige koden, som vist i Chrome-nettleseren, viser klassevalgeren (stilen) med en definert ramme og definerte grenseradieregenskaper.
Koden med avrundet hjørne (grense-radius) fungerer fint i moderne versjoner av IE og Chrome, fordi disse nettleserne ikke krever et prefiks for denne effekten. Men for å gjøre grensesnittradius i Mozilla Firefox, må WebKit-nettlesere som Safari (for skrivebord / bærbar og mobil), og noen versjoner av Opera, lage tre eksemplarer av grense-radius-koden med de riktige prefikset, slik:
. grenser {grense: 12px solid grå; Grense øverst til venstre: 48px; Grense-topp-høyre-radius: 24px; Grensebunn-høyre-radius: 12px; Grense bunn-venstre-radius: 6px; -moz-grense-topp-venstre-radius: 48px; -moz-grense-topp-høyre-radius: 24px; -moz-grense-bunn-høyre-radius: 12px; -moz-grense-bunn-venstre-radius: 6px; -webkit-grense-topp-venstre radius: 48px; -webkit-grense-topp-høyre-radius: 24px; -webkit-grense-bunn-høyre-radius: 12px; -webkit-grense-bunn-venstre-radius: 6px; -grense-topp-venstre-radius: 48px; -grense-topp-høyre-radius: 24px; -grense-bunn-høyre-radius: 12px; -grense-bunn-venstre-radius: 6px; polstring: 12px;}
Bare med fire versjoner av CSS-stildefinisjonen vil denne grensen fungere i alle store, nåværende nettlesere.
Folk som ser på siden i eldre nettlesere, må forutse den forbedrede designopplevelsen de ville få hvis de så på siden i en nåværende generasjons nettleser. Men fordi CSS3-effekten ikke er et krav for å vise det faktiske sidens innhold, er det fortsatt tilgjengelig (og i dette eksemplet vises grensen fortsatt).
