CSS-egenskaper relatert til dekorering av boksmodellen
Denne artikkelen forklarer CSS-egenskapene relatert til dekorering av boksmodellen.
Du kan lære å skrive egenskaper som kanter og skygger.
YouTube Video
HTML for 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>Dekorasjon
border-egenskap
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-egenskapen brukes i CSS for å angi rammen til et element. border består av tre elementer: bredde, stil og farge, og disse kombineres for å angi elementets ramme.
Grunnleggende struktur for 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;-
Bruk
border-widthfor å angi tykkelsen på rammen. Enheter angis ipx,em,%, osv. -
Angi typen ramme med
border-style. Du kan spesifisere følgende verdier.- Stilverdi-innstillinger:
none(ingen ramme)solid(heltrukket linje)dotted(prikket linje)dashed(stiplet linje)double(dobbel linje)groove(riflet linje)ridge(kantet linje)inset(innfelt skygge-linje)outset(utfelt skygge-linje)
- Stilverdi-innstillinger:
Angi fargen på rammen med border-color. Fargen kan angis ved hjelp av fargenavn, rgb(), rgba(), hex, osv.
Individuelle innstillinger 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å angi forskjellige stiler for hver side slik som dette.
Individuelle innstillinger for bredde, stil og farge
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å spesifisere hver del separat ved å bruke border-width, border-style og border-color.
Kombinasjon med border-radius
1.box-rounded {
2 border: 2px solid #000;
3 border-radius: 10px; /* Round corners by 10px */
4}Ved hjelp av border-radius-egenskapen kan du runde hjørnene på grensen.
border-radius-egenskapen
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-egenskapen brukes til å runde hjørnene på et element. Du kan jevnt runde de fire hjørnene på et HTML-element, og forvandle rektangler eller firkanter til et avrundet design.
Forklaring:
- Klassen
border-radius-all-roundedgjør alle hjørnene runde med 20 piksler, og skaper en jevnt avrundet boks. - Klassen
border-radius-top-left-roundedrunder bare det øverste venstre hjørnet med 20 piksler, mens de andre hjørnene forblir firkantede. - Klassen
border-radius-ellipse-cornerslager elliptiske hjørner, som resulterer i en boks med horisontalt strukket avrundet form.
Formatet på border-radius-egenskapen
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;- Verdien av
border-radius-egenskapen angis vanligvis i piksler eller prosent. Du kan også angi fra 1 til 4 verdier.- Å spesifisere én verdi gjør alle hjørnene jevnt runde.
- Ved å spesifisere to verdier, brukes den første verdien på det øverste venstre og nederste høyre hjørnet, og den andre verdien på det øverste høyre og nederste venstre hjørnet.
- Ved å spesifisere fire verdier kan du angi forskjellige radier for hvert hjørne. Verdiene brukes med klokken fra øverste venstre hjørne.
- Du kan også spesifisere individuelt som
border-top-left-radius.
1border-radius: 50px / 25px;border-radius-egenskapen kan også spesifisere vertikale og horisontale radier individuelt for å gjøre hjørnene elliptiske. I dette tilfellet, skill med/.- For eksempel, å spesifisere
50px / 25pxgjør den horisontale radiusen 50 piksler og den vertikale radiusen 25 piksler.
- For eksempel, å spesifisere
Sammendrag
border-radiuser en egenskap for å runde hjørnene på et element.- Du kan spesifisere hvor runde hjørnene skal være i piksler eller prosent, bruke det på alle hjørner, bestemte hjørner, eller gjøre dem elliptiske.
- Den er nyttig for fleksible design og tilpasning av brukergrensesnitt.
outline-egenskap
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-egenskapen er en CSS-egenskap for å sette en linje rundt et element.
outline ligner på border, men skiller seg i følgende punkter:.
outlinepåvirker ikke boksemodellen til elementet, og endrer derfor ikke layouten til elementet.- Siden
outlinetegnes utenfor elementet, vises det utenforborder. bordertegnes innenfor elementet og kan dermed påvirke størrelsen og layouten til elementet.
I dette eksempelet er outline-egenskapen satt som følger:.
outline-solid-klassen setter en 2px tykk rød, heltrukket kantlinje.outline-dashed-klassen setter en 3px blå, stiplet kantlinje.outline-double-klassen setter en 4px tykk grønn, dobbel kantlinje.outline-offset-klassen setter en 10px avstand mellom kantlinjen og elementet.
Grunnleggende Syntax
1element {
2 outline: outline-width outline-style outline-color;
3 outline-offset: 10px;
4}outline-width
outline-widthspesifiserer tykkelsen på kantlinjen.- Du kan spesifisere verdier som
thin,medium,thickeller i enheter sompx,em.
outline-style
outline-stylespesifiserer stilen på kantlinjen.- Du kan spesifisere stiler som
solid,dotted,dashed,double,groove,ridge,inset,outset,none, osv.
outline-color
outline-colorspesifiserer fargen på kantlinjen.- Du kan spesifisere hvilken som helst farge ved å bruke navn, HEX, RGB, osv.
outline-offset
outline-offsetspesifiserer avstanden mellom kantlinjen og elementet.- Du kan spesifisere eksakte verdier i enheter som
px,em, osv.
box-shadow-egenskap
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-egenskapen brukes til å legge til skygger på elementer. Ved å bruke denne egenskapen kan du lage skygger rundt elementer for å uttrykke en følelse av dimensjonalitet og dybde.
Forklaring:
-
I
box-shadow-basic-shadow-klassen vises en uskarp svart skygge nederst til høyre på elementet. -
I
box-shadow-inset-shadow-klassen vises en uskarp skygge inne i elementet. Med skyggen som går innover kan du oppnå et innfelt design. -
I
box-shadow-multiple-shadow-klassen brukes to skygger, svart og rød, på elementet. Siden de vises på ulike posisjoner, oppnås en tredimensjonal effekt.
box-shadow-egenskapens 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 av hver verdi
Den første horisontale forskyvningen er verdien for den horisontale forskyvningen, som spesifiserer skyggeposisjonen fra venstre side av elementet. En positiv verdi plasserer skyggen til høyre, og en negativ verdi plasserer den til venstre.
Den andre vertikale forskyvningen er verdien for den vertikale forskyvningen, som spesifiserer skyggeposisjonen fra oversiden av elementet. En positiv verdi plasserer skyggen under, og en negativ verdi plasserer den over.
Den tredje uskarphetsradiusen er verdien for mengden uskarphet, som spesifiserer hvor uklar skyggen skal være. Jo større verdien er, desto mer sprer skyggen seg, noe som resulterer i en mer uskarp skygge. En positiv verdi plasserer skyggen under, og en negativ verdi plasserer den over. Dette er valgfritt, og standarden er 0, som betyr ingen uskarphet på skyggen.
Den fjerde spredningsradiusen er verdien for spredningsområdet, som spesifiserer hvor mye skyggen sprer seg. En positiv verdi vil få skyggen til å vokse, mens en negativ verdi vil få den til å krympe. Denne verdien er også valgfri.
Den femte fargen er fargeverdien, som spesifiserer skyggefargen. Farger kan settes ved å bruke fargenavn, RGB, HEX, HSL og andre fargemodeller som er tilgjengelige i CSS. Hvis det utelates, brukes standard tekstfarge for elementet (verdien av color-egenskapen).
Du kan også spesifisere inset-nøkkelordet først. Å spesifisere inset-nøkkelordet tegner skyggen inne i elementet i stedet for utenfor. Det er også mulig å angi flere skygger separert med komma.
Eksempel på box-shadow
Eksempel på grunnleggende skygge
1div {
2 box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}- Den horisontale forskyvningen er
10px, noe som skaper en skygge 10 piksler til høyre. - Den vertikale forskyvningen er
10px, noe som skaper en skygge 10 piksler nedover. - Uskarphetsradiusen er
5px, som resulterer i en skyggeuskarphet på 5 piksler. - Fargen er
rgba(0, 0, 0, 0.5), noe som resulterer i en semi-transparent svart.
Eksempel på indre skygge
1div {
2 box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}- Ved å bruke
insettrekkes skyggen inni 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å angi flere skygger adskilt med komma. I dette eksemplet er to skygger brukt: en svart skygge og en rød skygge.
Sammendrag
box-shadower en egenskap som brukes til å legge til skygger på elementer for å skape en følelse av dybde.- Ved å kombinere horisontale og vertikale forskyvninger, uskarphet, spredningsradius og farge kan ulike effekter oppnås.
- Du kan tegne skygger inni med
inset, og du kan også sette flere skygger på en gang.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.