Stap 3: Decoreren met CSS
Op dit punt, is de lader niets meer dan alleen de afbeelding die we geplaatst ziet. Nu, zullen wij sommige charme aan toevoegen met behulp van CSS. Binnen de stijltags in de head tag, zullen we type in de CSS-aangiften voor de div, img en body -tag.
body { font-family: sans-serif; background-color: #ededed; overflow: hidden; } div { box-shadow: 5px 5px 100px black; border-radius: 360px; width: 250px; height: 250px; background-color: white; position: relative; margin-top: 150px; border: 50px solid white; z-index: 2; } img { margin-left: -15px; margin-top: 15px; } Zorg ervoor dat u overloop: verborgen in hebt getypt. Anders, de lange reeks cijfers van Pi zal leiden tot een horizontale schuifbalk moet worden gemaakt. overloop: verborgen betekent in feite dat de extra inhoud die niet in het scherm past zal worden afgekapt.
De box-shadow ons in staat stelt om een schaduw aan het div- element toevoegen. Hier, de schaduw wordt 5 pixels lang en breed en verdwijnt op een afstand van 100 pixels.
De eigenschap border-radius geeft een afgeronde rand aan onze div- element. Aangezien de hoogte en breedte gelijk hier zijn, vormen de grenzen een perfecte cirkel.
Eigenschap margin-top verlaagt de div bij 150 pixels. Ook het toevoegen van een effen witte rand 50 pixels breed aan de container. Tot slot, plaats de container één eenheid hoger met behulp van de eigenschap z-index . (De standaardwaarde is 1.)
Het is wellicht moet de eigenschap margin gebruiken naar het midden van de afbeelding binnen de container. Ik vond - 15px en 15px comfortabel. Deze waarde varieert met de afbeelding die u gebruikt.
