CSS-egenskaber relateret til boksmodeldekoration

Articles

Denne artikel forklarer CSS-egenskaberne relateret til boksmodeldekoration.

Du kan lære, hvordan du skriver egenskaber som kanter og skygger.

YouTube Video

HTML til forhåndsvisning

css-decoration.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Dekoration

`border`-egenskab

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

border-egenskaben bruges i CSS til at sætte rammen på et element. border består af tre dele: bredde, stil og farve, og de kombineres for at sætte elementets ramme.

Grundlæggende struktur af `border`

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

Brug border-width til at angive tykkelsen af kanten. Enheder angives i px, em, % osv.
Angiv typen af kanten med border-style. Du kan angive følgende værdier.
- Stilværdier:
  - none (ingen kant)
  - solid (solid linje)
  - dotted (prikket streg)
  - dashed (stiplede linjer)
  - double (dobbelt streg)
  - groove (rillede linje)
  - ridge (ryggede linje)
  - inset (inderskygge linje)
  - outset (yderskygge linje)

Angiv farven på kanten med border-color. Farver kan angives ved hjælp af farvenavne, rgb(), rgba(), hex osv.

Individuelle indstillinger for hver side

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

Du kan også vælge forskellige stilarter for hver side som dette.

Individuelle indstillinger for bredde, stil og farve

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

Du kan også specificere hver del separat ved at bruge border-width, border-style og border-color.

Kombinerer med `border-radius`

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Ved at bruge border-radius-egenskaben kan du runde grænsernes hjørner.

`border-radius`-egenskab

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

border-radius-egenskaben bruges til at runde hjørnerne på et element. Du kan jævnt runde de fire hjørner på et HTML-element og omdanne rektangler eller kvadrater til et afrundet design.

Forklaring:

border-radius-all-rounded-klassen gør alle hjørner runde med 20 pixels og skaber en jævnt afrundet boks.
border-radius-top-left-rounded-klassen afrunder kun det øverste venstre hjørne med 20 pixels, mens andre hjørner forbliver firkantede.
border-radius-ellipse-corners-klassen skaber elliptiske hjørner, hvilket resulterer i en boks med en horisontalt udstrakt afrundet form.

Formatet for `border-radius`-egenskaben

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;

Værdien af border-radius-egenskaben angives normalt i pixels eller procent. Du kan også angive fra 1 til 4 værdier.
- Ved at angive én værdi bliver alle hjørner ensartet runde.
- Ved at angive to værdier anvendes den første værdi på det øverste venstre og nederste højre hjørne, og den anden værdi på det øverste højre og nederste venstre hjørne.
- Ved at angive fire værdier kan du sætte forskellige radier for hvert hjørne. Værdierne anvendes med uret fra det øverste venstre hjørne.
Du kan også angive individuelt som border-top-left-radius.

1border-radius: 50px / 25px;

border-radius-egenskaben kan også angive vertikale og horisontale radier individuelt for at skabe elliptiske hjørner. I dette tilfælde skal du adskille med /.
- For eksempel gør angivelse af 50px / 25px den horisontale radius 50 pixels og den vertikale radius 25 pixels.

Sammendrag

border-radius er en egenskab, der bruges til at runde hjørnerne på et element.
Du kan angive rundheden af hjørnerne i pixels eller procent, anvende det på alle hjørner, specifikke hjørner eller gøre dem elliptiske.
Det er nyttigt for fleksible designs og tilpasning af brugergrænseflader.

`outline`-egenskab

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

outline-egenskaben er en CSS-egenskab til at definere linjen tegnet omkring et element.

outline ligner border, men adskiller sig på følgende punkter:.

outline påvirker ikke elementets box-model og har derfor ingen indvirkning på elementets layout.
Da outline tegnes uden for elementet, vises den uden for border.
border tegnes inden i elementet, så det kan påvirke elementets størrelse og layout.

I dette eksempel er outline-egenskaben indstillet som følger:.

outline-solid-klassen angiver en 2px tyk solid rød outline.
outline-dashed-klassen angiver en 3px blå stiplet outline.
outline-double-klassen angiver en 4px tyk grøn dobbelt-linje outline.
outline-offset-klassen angiver 10px plads mellem outline og elementet.

Grundlæggende syntaks

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}

`outline-width`

outline-width specificerer tykkelsen af outline'en.
Du kan angive specifikke værdier som thin, medium, thick eller i enheder som px, em.

`outline-style`

outline-style specificerer stilen på outline'en.
Du kan angive stilarter som solid, dotted, dashed, double, groove, ridge, inset, outset, none osv.

`outline-color`

outline-color specificerer farven på outline'en.
Du kan angive enhver farve ved hjælp af navne, HEX, RGB osv.

`outline-offset`

outline-offset specificerer afstanden mellem outline'en og elementet.
Du kan angive præcise værdier i enheder som px, em osv.

`box-shadow`-egenskab

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

box-shadow-egenskaben bruges til at tilføje skygger til elementer. Ved at bruge denne egenskab kan du tilføje skygger omkring elementer for at skabe en følelse af dimension og dybde.

Forklaring:

I klassen box-shadow-basic-shadow vises en sløret sort skygge nederst til højre for elementet.
I klassen box-shadow-inset-shadow vises en sløret skygge inden i elementet. Med skyggen, der går indad, kan du opnå et indsunken design.
I klassen box-shadow-multiple-shadow tilføjes to skygger, sort og rød, til elementet. Da de vises på forskellige positioner, opnås der en tredimensionel effekt.

`box-shadow`-egenskabens format

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];

Betydningen af hver værdi

Den første horizontale forskydning er værdien for den vandrette forskydning, der angiver skyggens position i forhold til venstre side af elementet. Ved at angive en positiv værdi placeres skyggen til højre, og en negativ værdi placerer den til venstre.

Den anden vertikale forskydning er værdien for den lodrette forskydning, der angiver skyggens position i forhold til toppen af elementet. Ved at angive en positiv værdi placeres skyggen nedenfor, og en negativ værdi placerer den ovenfor.

Den tredje sløringsradius er værdien for graden af sløring, der angiver skyggens slørhed. Jo større værdi, jo mere spredes skyggen, hvilket resulterer i en mere sløret skygge. Ved at angive en positiv værdi placeres skyggen nedenfor, og en negativ værdi placerer den ovenfor. Dette er valgfrit, og standarden er 0, hvilket betyder, at der ikke er nogen sløring på skyggen.

Den fjerde udbredelsesradius er værdien for udbredelsesområdet, der angiver, hvor meget skyggen spredes. Ved at angive en positiv værdi vil skyggen blive større, mens en negativ værdi vil få den til at krympe. Denne værdi er også valgfri.

Den femte farve er farveværdien, der angiver skyggens farve. Farver kan angives ved hjælp af farvenavne, RGB, HEX, HSL og andre farvemodeller, der er tilgængelige i CSS. Hvis den udelades, anvendes standardtekstens farve for elementet (værdien af color-egenskaben).

Du kan også først angive nøgleordet inset. Ved at angive nøgleordet inset tegnes skyggen inden i elementet i stedet for udenfor. Det er også muligt at angive flere skygger adskilt af kommaer.

Eksempel på `box-shadow`

Grundlæggende skyggeeksempel

1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}

Den vandrette forskydning er 10px, hvilket skaber en skygge 10 pixels til højre.
Den lodrette forskydning er 10px, hvilket skaber en skygge 10 pixels nedad.
Den sløringradius er 5px, hvilket resulterer i en skygge med 5 pixels sløring.
Farven er rgba(0, 0, 0, 0.5), hvilket giver en halvtransparent sort.

Eksempel på indre skygge

1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}

Brug af inset tegner skyggen inden i elementet.

Eksempel på flere skygger

1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}

Du kan også angive flere skygger adskilt af kommaer. I dette eksempel er der anvendt to skygger: en sort skygge og en rød skygge.

Sammendrag

box-shadow er en egenskab, der bruges til at tilføje skygger til elementer for at skabe en følelse af dybde.
Ved at kombinere vandrette og lodrette forskydninger, sløring, spredningsradius og farve kan en række effekter opnås.
Du kan tegne skygger inden i med inset, og du kan også angive flere skygger på én gang.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

Baggrundsrelaterede CSS-egenskaber Liste-relaterede CSS-egenskaber

CSS-egenskaber relateret til boksmodeldekoration

YouTube Video

HTML til forhåndsvisning

Dekoration

border-egenskab

Grundlæggende struktur af border

Individuelle indstillinger for hver side

Individuelle indstillinger for bredde, stil og farve

Kombinerer med border-radius

border-radius-egenskab

Forklaring:

Formatet for border-radius-egenskaben

Sammendrag

outline-egenskab

Grundlæggende syntaks

outline-width

outline-style

outline-color

outline-offset

box-shadow-egenskab

Forklaring:

box-shadow-egenskabens format

Betydningen af hver værdi

Eksempel på box-shadow

Grundlæggende skyggeeksempel

Eksempel på indre skygge

Eksempel på flere skygger

Sammendrag

YouTube Video

`border`-egenskab

Grundlæggende struktur af `border`

Kombinerer med `border-radius`

`border-radius`-egenskab

Formatet for `border-radius`-egenskaben

`outline`-egenskab

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

`box-shadow`-egenskab

`box-shadow`-egenskabens format

Eksempel på `box-shadow`