CSS-randen zijn essentiële elementen in websites en vertegenwoordigen de randen van verschillende componenten en elementen. CSS-randen verwijzen naar de lijnen die elementen omringen en hun randen definiëren. Randen kunnen worden opgemaakt, gekleurd en van grootte worden voorzien met behulp van CSS-eigenschappen zoals randstijl, randkleur, randbreedte en randradius. randen kunnen worden opgemaakt met de bovenrand, de rechterrand, de onderrand en de linkerrand.
In dit artikel over randen in CSS leren we over CSS-randen, over stijlopties, praktische gebruiksscenario's en best practices.
Inhoudsopgave
- Grenseigenschappen
- Manieren om randen in CSS te stylen
- Gemeenschappelijke randstijlen
- Voorbeelden van CSS-randstijl
- Praktische gebruikscasussen
- Gebruiksscenario's voor CSS-randen
Grenseigenschappen
CSS biedt verschillende eigenschappen om randen aan te passen:
- rand-stijl : Bepaalt het type rand (bijvoorbeeld effen, gestippeld, gestippeld).
- grensbreedte : stelt de breedte van de rand in (in pixels, punten of andere eenheden).
- rand kleur : specificeert de randkleur.
- grensradius : Creëert afgeronde hoeken voor elementen.
Manieren om randen in CSS te stylen
De CSS-randeigenschap maakt de styling van de rand van een element mogelijk door de breedte, stijl en kleur in te stellen, waardoor aanpasbare visuele grenzen in webontwerp mogelijk zijn.
Piet Davidson
1. Randstijl
- CSS-randbovenstijl Eigenschap
- border-right-stijl eigenschap
- border-bottom-stijl eigenschap
- border-left-style eigenschap
2. Randbreedte
- border-top-width Eigenschap
- border-right-width eigenschap
- border-bottom-width eigenschap
- border-left-width eigenschap
3. Randkleur
- border-top-color Eigenschap
- border-right-color Eigenschap
- border-bottom-color Eigenschap
- border-left-color eigenschap
4. Rand individuele zijden
5. Eigenschap grensradius
Gemeenschappelijke randstijlen
De eigenschap border-style specificeert het type rand. Geen van de andere randeigenschappen werkt zonder de randstijl in te stellen.
Hieronder volgen de soorten randen:
- Gestippeld : Creëert een reeks punten.
- Gestormd : Vormt een stippellijn.
- Stevig : Produceert een doorlopende lijn.
- Dubbele : Geeft twee parallelle lijnen weer.
- Groef En Rand : Creëer 3D-gegroefde en geribbelde effecten.
- Inzet En Begin : 3D-inzet- en beginranden toevoegen.
- Geen : verwijdert de rand.
- Verborgen : verbergt de rand.
Voorbeelden van CSS-randstijl
In dit voorbeeld gaan we de CSS-eigenschap border-style gebruiken.
HTML