CSS-egenskaper relaterade till boxmodellens dekoration
Den här artikeln förklarar CSS-egenskaperna relaterade till boxmodellens dekoration.
Du kan lära dig att skriva egenskaper som ramar och skuggor.
YouTube Video
HTML för förhandsgranskning
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-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 används i CSS för att ange ramen för ett element. border består av tre element: bredd, stil och färg, och de kombineras för att ange elementets ram.
Grundläggande struktur för 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;-
Använd
border-widthför att ange tjockleken på ramen. Enheter anges ipx,em,%, etc. -
Ange typen av ram med
border-style. Du kan ange följande värden.- Stilvärden:
none(ingen ram)solid(heldragen linje)dotted(prickad linje)dashed(streckad linje)double(dubbel linje)groove(spårad linje)ridge(åsad linje)inset(infälld skugglinje)outset(framträdande skugglinje)
- Stilvärden:
Ange färgen på ramen med border-color. Färg kan anges med färgnamn, rgb(), rgba(), hex, etc.
Individuella inställningar för varje sida
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 också ställa in olika stilar för varje sida så här.
Individuella inställningar för bredd, stil och färg
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 också specificera varje aspekt separat med hjälp av border-width, border-style och border-color.
Kombinera med border-radius
1.box-rounded {
2 border: 2px solid #000;
3 border-radius: 10px; /* Round corners by 10px */
4}Med hjälp av border-radius-egenskapen kan du runda hörnen på gränsen.
border-radius-egenskap
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 används för att runda hörnen på ett element. Du kan mjukt runda de fyra hörnen på ett HTML-element och omvandla rektanglar eller kvadrater till en rundad design.
Förklaring:
border-radius-all-rounded-klassen gör alla hörn runda med 20 pixlar, vilket resulterar i en mjukt rundad ruta.border-radius-top-left-rounded-klassen rundar bara det övre vänstra hörnet med 20 pixlar, medan andra hörn förblir fyrkantiga.border-radius-ellipse-corners-klassen skapar elliptiska hörn, vilket resulterar i en ruta med horisontell rundad 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;- Värdet för
border-radius-egenskapen anges vanligtvis i pixlar eller procent. Du kan också ställa in från 1 till 4 värden.- Att ange ett värde gör alla hörn jämnt runda.
- Att ange två värden applicerar det första värdet på det övre vänstra och nedre högra hörnet, och det andra värdet på det övre högra och nedre vänstra hörnet.
- Genom att ange fyra värden kan du ställa in olika radier för varje hörn. Värdena tillämpas medurs från det övre vänstra hörnet.
- Du kan också specificera individuellt, som
border-top-left-radius.
1border-radius: 50px / 25px;border-radius-egenskapen kan också specificera vertikala och horisontella radier individuellt för att göra hörnen elliptiska. I detta fall separerar du med/.- Till exempel, att specificera
50px / 25pxgör den horisontella radien 50 pixlar och den vertikala radien 25 pixlar.
- Till exempel, att specificera
Sammanfattning
border-radiusär en egenskap för att runda hörnen på ett element.- Du kan specificera hörnens rundhet i pixlar eller procent, applicera det på alla hörn, specifika hörn eller göra dem elliptiska.
- Det är användbart för flexibla designer och anpassning av användargränssnitt.
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 är en CSS-egenskap för att ställa in linjen som dras runt ett element.
outline liknar border, men skiljer sig på följande punkter:.
outlinepåverkar inte elementets boxmodell, så den påverkar inte elementets layout.- Eftersom
outlineritas utanför elementet, visas den utanförborder. borderritas inuti elementet, så den kan påverka elementets storlek och layout.
I detta exempel är outline-egenskapen inställd enligt följande:.
- Klassen
outline-solidställer in en 2px tjock solid röd outline. - Klassen
outline-dashedställer in en 3px blå streckad outline. - Klassen
outline-doubleställer in en 4px tjock grön dubbel-linje outline. - Klassen
outline-offsetställer in ett 10px avstånd mellan outline och elementet.
Grundläggande syntax
1element {
2 outline: outline-width outline-style outline-color;
3 outline-offset: 10px;
4}outline-width
outline-widthspecificerar tjockleken på outline.- Du kan specificera värden som
thin,medium,thick, eller i enheter sompx,em.
outline-style
outline-stylespecificerar stilen på outline.- Du kan specificera stilar som
solid,dotted,dashed,double,groove,ridge,inset,outset,none, etc.
outline-color
outline-colorspecificerar färgen på outline.- Du kan specificera vilken färg som helst med hjälp av namn, HEX, RGB, etc.
outline-offset
outline-offsetspecificerar avståndet mellan outline och elementet.- Du kan specificera exakta värden i enheter som
px,em, etc.
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 används för att lägga till skuggor till element. Genom att använda denna egenskap kan du skapa skuggor runt element för att uttrycka en känsla av dimension och djup.
Förklaring:
-
I klassen
box-shadow-basic-shadowvisas en suddig svart skugga längst ned till höger om elementet. -
I klassen
box-shadow-inset-shadowvisas en suddig skugga inuti elementet. Med skuggan inåt kan du uppnå en nedsänkt design. -
I klassen
box-shadow-multiple-shadowappliceras två skuggor, svart och röd, på elementet. Eftersom de visas på olika positioner uppnås en tredimensionell 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];Betydelsen av varje värde
Den första horisontella förskjutningen är värdet för den horisontella förskjutningen och specificerar skuggans position från elementets vänstra sida. En positivt värde placerar skuggan till höger, medan ett negativt värde placerar den till vänster.
Den andra vertikala förskjutningen är värdet för den vertikala förskjutningen och specificerar skuggans position från elementets övre sida. Ett positivt värde placerar skuggan nedanför, medan ett negativt värde placerar den ovanför.
Den tredje suddningsradien är värdet för mängden suddighet och specificerar hur suddig skuggan är. Ju högre värdet är, desto mer sprids skuggan, vilket resulterar i en mer suddig skugga. Ett positivt värde placerar skuggan nedanför, medan ett negativt värde placerar den ovanför. Detta är valfritt, och standardvärdet är 0, vilket innebär att skuggan inte är suddig.
Den fjärde spridningsradien är värdet för spridningsområdet och specificerar hur mycket skuggan sprids. Ett positivt värde gör skuggan större, medan ett negativt värde får den att krympa. Detta värde är också valfritt.
Den femte färgen är färgvärdet och specificerar skuggans färg. Färger kan anges med färgnamn, RGB, HEX, HSL och andra färgmodeller som finns i CSS. Om det utelämnas används elementets standardfärg för text (värdet på color-egenskapen).
Du kan också ange nyckelordet inset först. Genom att ange nyckelordet inset ritas skuggan inuti elementet i stället för utanför. Det är också möjligt att ange flera skuggor separerade med kommatecken.
Exempel på box-shadow
Grundläggande exempel på skugga
1div {
2 box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}- Den horisontella förskjutningen är
10px, vilket skapar en skugga 10 pixlar till höger. - Den vertikala förskjutningen är
10px, vilket skapar en skugga 10 pixlar nedåt. - Radien för oskärpa är
5px, vilket resulterar i en skuggoskärpa på 5 pixlar. - Färgen är
rgba(0, 0, 0, 0.5), vilket resulterar i en halvtransparent svart.
Exempel på inre skugga
1div {
2 box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}- Genom att använda
insetritar du skuggan inuti elementet.
Exempel på flera skuggor
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 också ange flera skuggor separerade med kommatecken. I detta exempel tillämpas två skuggor: en svart skugga och en röd skugga.
Sammanfattning
box-shadowär en egenskap som används för att lägga till skuggor till element och skapa en känsla av djup.- Genom att kombinera horisontella och vertikala förskjutningar, oskärpa, spridningsradie och färg kan en mängd olika effekter uppnås.
- Du kan rita skuggor inuti med
inset, och du kan också ange flera skuggor på en gång.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.