border, box-shadow, border-radius og border-image - CSS

Lær at lav kant, skygge, afrundede hjørner og kant med billede på elementerne på en hjemmeside med CSS

Introduktion

Denne side handler om noget med CSS.

border bruges til at give en kant til noget.
box-shadow bruges til at give skygge til noget, enten under indholdet eller inden i.
radius bruges til at give afrundet kanter til noget i stedet for en almindelig firkant med spidse kanter.

border

3px solid
3px dashed
3px dotted
3px double
3px groove
3px ridge
3px inset
3px outset
10px solid
10px dashed
10px dotted
10px double
10px groove
10px ridge
10px inset
10px outset
Resultatet ovenfor er skabt af følgende kode

box-shadow

1px 1px 1px 0px
5px 5px 1px 0px
15px 15px 5px 0px
0px 10px 1px -5px
0px 0px 1px 5px
0px 0px 5px 5px
0px 0px 20px 5px
inset 1px 1px 1px 0px
inset 5px 5px 1px 0px
inset 15px 15px 5px 0px
inset 0px 10px 1px -5px
inset 0px 0px 1px 5px
inset 0px 0px 5px 5px
inset 0px 0px 20px 5px
Resultatet ovenfor er skabt af følgende kode


mis
Resultatet ovenfor er skabt af følgende kode


Syntaks :

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

border-radius

CSS koden border-radius er nu understøttet i både Firefox, Opera, Safari, Chrome, Internet Explorer.
Hurra for det.

border-radius
border-top-left-radius : radius [, radius]
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
værdi : radius
Resultatet ovenfor er skabt af følgende kode


border-radius: 5px
border-radius: 20px
border-radius: 0 50px 20px 0
border-radius: 5px 80px
border-radius: 30px 0
border-radius: 7px 20px 50px 0
border-top-left-radius: 10px
border-top-left-radius: 80px 25px
border-bottom-left-radius: 60px
border-bottom-right-radius: 2500px 200px
border-bottom-right-radius: 125px 50px; border-right: 15px solid black;
border-radius: 125px; border-left: 15px solid red; border-right: 15px solid blue;
border-radius: 125px; border-left: 15px solid red; border-right: 15px solid blue; box-shadow: inset 6px 0px 1px 2px yellow, inset -6px 0px 1px 2px yellow, 0px 6px 2px -3px rgba(0, 255, 0, 0.5);
Resultatet ovenfor er skabt af følgende kode

border-image

border-image bruges til at vise et billede som kant i stedet for border-style.
billede som egner sig til border-image
billede som egner sig til border-image


border-image
border-image
Resultatet ovenfor er skabt af følgende kode

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.