Mga ari-arian ng CSS na may kinalaman sa dekorasyon ng box model

Articles

Ang artikulong ito ay nagpapaliwanag ng mga ari-arian ng CSS na may kinalaman sa dekorasyon ng box model.

Maaari kang matutong magsulat ng mga ari-arian tulad ng borders at shadows.

YouTube Video

HTML para sa Preview

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>

Dekorasyon

Ari-arian ng `border`

 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}

Ang ari-arian ng border ay ginagamit sa CSS upang itakda ang balangkas ng isang element. Ang border ay binubuo ng tatlong elemento: width, style, at color, at pinagsama-sama ito upang itakda ang balangkas ng isang elemento.

Pangunahing Estruktura ng `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;

Gamitin ang border-width upang tukuyin ang kapal ng border. Ang mga yunit ay tinutukoy gamit ang px, em, %, at iba pa.
Tukuyin ang uri ng border gamit ang border-style. Maaari mong tukuyin ang mga sumusunod na halaga.
- Mga Halaga ng Estilo:
  - none (walang border)
  - solid (buong linya)
  - dotted (tuldok-tuldok na linya)
  - dashed (putol-putol na linya)
  - double (dobleng linya)
  - groove (linyang may uka)
  - ridge (linyang may gulod)
  - inset (linyang may aninong nasa loob)
  - outset (linyang may aninong nasa labas)

Tukuyin ang kulay ng border gamit ang border-color. Ang kulay ay maaaring tukuyin gamit ang mga pangalan ng kulay, rgb(), rgba(), hex, at iba pa.

Indibidwal na Mga Setting para sa Bawat Gilid

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}

Maaari mo ring itakda ang iba't ibang estilo para sa bawat gilid tulad nito.

Indibidwal na Mga Setting para sa Lapad, Estilo, at Kulay

 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}

Maaari mo ring tukuyin ang bawat aspeto nang hiwalay gamit ang border-width, border-style, at border-color.

Pinagsama sa `border-radius`

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

Gamit ang ari-arian na border-radius, maaari mong paikotin ang mga sulok ng hangganan.

Ari-arian na `border-radius`

 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}

Ginagamit ang ari-arian na border-radius upang paikotin ang mga sulok ng isang elemento. Maaari mong maayos na kurbahin ang apat na sulok ng isang HTML elemento, binabago ang mga rektanggulo o parisukat sa isang bilugan na disenyo.

Paliwanag:

Ang klase ng border-radius-all-rounded ay ginagawang bilugan ang lahat ng sulok sa 20 pixels, na nagresulta sa isang maayos na bilugan na kahon.
Ang klase ng border-radius-top-left-rounded ay ginagawang bilugan lamang ang itaas-kaliwang sulok sa 20 pixels, habang ang ibang mga sulok ay nananatiling parisukat.
Ang klase ng border-radius-ellipse-corners ay lumilikha ng mga elliptical na sulok, nagreresulta sa isang kahon na may pahalang na nakaunat na bilugan na hugis.

Ang format ng ari-arian na `border-radius`

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;

Ang halaga ng ari-arian na border-radius ay karaniwang tinutukoy sa mga pixels o porsyento. Bukod dito, maaari kang magtakda ng 1 hanggang 4 na halaga.
- Ang pagtukoy ng isang halaga ay ginagawang pantay-pantay na bilugan ang lahat ng sulok.
- Ang pagtukoy ng dalawang halaga ay ginagamit ang unang halaga sa itaas-kaliwa at ibaba-kanan na sulok, at ang pangalawang halaga sa itaas-kanan at ibaba-kaliwa na sulok.
- Sa pamamagitan ng pagtukoy ng apat na halaga, maaari kang magtakda ng iba't ibang radius para sa bawat sulok. Ang mga halaga ay iniaaplay paikutin mula sa itaas-kaliwa.
Maaari mo ring tukuyin nang indibidwal tulad ng border-top-left-radius.

1border-radius: 50px / 25px;

Ang ari-arian na border-radius ay maaari ring magtukoy ng patayo at pahalang na radius nang indibidwal upang gawing elliptical ang mga sulok. Sa kasong ito, ihiwalay gamit ang /.
- Halimbawa, ang pagtukoy ng 50px / 25px ay ginagawang 50 pixels ang pahalang na radius at 25 pixels ang patayong radius.

Buod

border-radius ay isang ari-arian upang paikotin ang mga sulok ng isang elemento.
Maaari mong tukuyin ang bilugan ng mga sulok sa pixels o porsyento, ilapat ito sa lahat ng sulok, tukoy na mga sulok, o gawing elliptical.
Ito ay kapaki-pakinabang para sa mga flexible na disenyo at pag-customize ng mga user interface.

Katangian ng `outline`

 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}

Ang katangian ng outline ay isang CSS property na nagtatakda ng linya na iginuhit sa paligid ng isang elemento.

Ang outline ay katulad ng border, ngunit may pagkakaiba sa mga sumusunod na punto:.

Ang outline ay hindi nakakaapekto sa box model ng elemento, kaya walang epekto sa layout ng elemento.
Dahil ang outline ay iginuhit sa labas ng elemento, ito ay lumalabas sa labas ng border.
Ang border ay iginuhit sa loob ng elemento, kaya maaaring maapektuhan nito ang sukat at layout ng elemento.

Sa halimbawa na ito, ang katangian ng outline ay itinatakda bilang mga sumusunod:.

Ang class na outline-solid ay nagtatakda ng 2px na makapal na solidong pulang outline.
Ang class na outline-dashed ay nagtatakda ng 3px na bughaw na dashed na outline.
Ang class na outline-double ay nagtatakda ng 4px na makapal na berdeng double-line na outline.
Ang class na outline-offset ay nagtatakda ng 10px na agwat sa pagitan ng outline at ng elemento.

Pangunahing Syntax

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

`outline-width`

Tinutukoy ng outline-width ang kapal ng outline.
Maaari kang magtakda ng mga partikular na halaga tulad ng thin, medium, thick, o sa mga unit tulad ng px, em.

`outline-style`

Tinutukoy ng outline-style ang istilo ng outline.
Maaari kang magtakda ng mga istilo tulad ng solid, dotted, dashed, double, groove, ridge, inset, outset, none, at iba pa.

`outline-color`

Tinutukoy ng outline-color ang kulay ng outline.
Maaari mong gamitin ang anumang kulay gamit ang mga pangalan, HEX, RGB, at iba pa.

`outline-offset`

Tinutukoy ng outline-offset ang distansya sa pagitan ng outline at ng elemento.
Maaari kang magtakda ng eksaktong halaga sa mga unit tulad ng px, em, at iba pa.

Katangian ng `box-shadow`

 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}

Ang katangian ng box-shadow ay ginagamit upang magdagdag ng anino sa mga elemento. Sa paggamit ng property na ito, maaari kang lumikha ng mga anino sa paligid ng mga elemento upang maipakita ang pakiramdam ng dimensionality at lalim.

Paliwanag:

Sa klase ng box-shadow-basic-shadow, isang malabong itim na anino ang ipinapakita sa ibabang kanan ng elemento.
Sa klase ng box-shadow-inset-shadow, isang malabong anino ang ipinapakita sa loob ng elemento. Sa pagpasok ng anino sa loob, maaari kang makamit ang isang nakalubog na disenyo.
Sa klase ng box-shadow-multiple-shadow, dalawang anino, itim at pula, ang inilalapat sa elemento. Dahil sila ay ipinapakita sa iba't ibang posisyon, isang tatlong-dimensional na epekto ang nakamit.

Format ng Property ng `box-shadow`

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];

Kahulugan ng bawat halaga

Ang unang horizontal offset ay ang halaga ng pahalang na offset, na tumutukoy sa posisyon ng anino mula sa kaliwang bahagi ng elemento. Ang pagtukoy ng positibong halaga ay inilalagay ang anino sa kanan, at ang negatibong halaga ay inilalagay ito sa kaliwa.

Ang pangalawang vertical offset ay ang halaga ng patayong offset, na tumutukoy sa posisyon ng anino mula sa itaas na bahagi ng elemento. Ang pagtukoy ng positibong halaga ay inilalagay ang anino sa ibaba, at ang negatibong halaga ay inilalagay ito sa itaas.

Ang pangatlong blur radius ay ang halaga para sa dami ng paglabo, na tumutukoy sa kalabuan ng anino. Kapag mas malaki ang halaga, mas lumalawak ang anino, na nagreresulta sa mas malabong anino. Ang pagtukoy ng positibong halaga ay inilalagay ang anino sa ibaba, at ang negatibong halaga ay inilalagay ito sa itaas. Ito ay opsyonal, at ang default ay 0, na nangangahulugang walang kalabuan sa anino.

Ang pang-apat na spread radius ay ang halaga ng saklaw ng pagpapalawak, na tumutukoy kung gaano kalawak ang paglaganap ng anino. Ang pagtukoy ng positibong halaga ay magpapalaki ng anino, habang ang negatibong halaga ay magpapaliit dito. Ang halagang ito ay opsyonal din.

Ang ikalimang color ay ang halaga ng kulay, na tumutukoy sa kulay ng anino. Maaaring itakda ang mga kulay gamit ang mga pangalan ng kulay, RGB, HEX, HSL, at iba pang color models na magagamit sa CSS. Kapag hindi tinukoy, ang default na kulay ng teksto ng elemento (halaga ng property na color) ang inilalapat.

Maaari mo ring unahin ang pagtukoy ng keyword na inset. Ang pagtukoy ng keyword na inset ay naglalagay ng anino sa loob ng elemento sa halip na sa labas. Posible rin na itakda ang maraming anino na pinaghihiwalay ng mga kuwit.

Halimbawa ng `box-shadow`

Pangunahing halimbawa ng anino

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

Ang pahalang na offset ay 10px, na lumilikha ng anino 10 pixel patungo sa kanan.
Ang patayong offset ay 10px, na lumilikha ng anino 10 pixel pababa.
Ang blur radius ay 5px, na nagreresulta sa aninong may 5-pixel blur.
Ang kulay ay rgba(0, 0, 0, 0.5), na nagreresulta sa bahagyang transparent na itim.

Halimbawa ng panloob na anino

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

Ang paggamit ng inset ay naglalarawan ng anino sa loob ng elemento.

Halimbawa ng maraming anino

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

Maaari ka ring magtakda ng maraming anino na pinaghihiwalay ng mga kuwit. Sa halimbawang ito, dalawang anino ang inilapat: isang itim na anino at isang pulang anino.

Buod

Ang box-shadow ay isang katangian na ginagamit upang magdagdag ng mga anino sa mga elemento para makalikha ng pakiramdam ng lalim.
Sa pamamagitan ng pagsasama-sama ng pahalang at patayong offset, blur, spread radius, at kulay, maaaring makamit ang iba't ibang epekto.
Maaari kang gumuhit ng mga anino sa loob gamit ang inset, at maaari ka ring magtakda ng maraming anino nang sabay-sabay.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Katangian ng CSS na Kaugnay sa Background Mga property ng CSS na may kaugnayan sa listahan

Mga ari-arian ng CSS na may kinalaman sa dekorasyon ng box model

YouTube Video

HTML para sa Preview

Dekorasyon

Ari-arian ng border

Pangunahing Estruktura ng border

Indibidwal na Mga Setting para sa Bawat Gilid

Indibidwal na Mga Setting para sa Lapad, Estilo, at Kulay

Pinagsama sa border-radius

Ari-arian na border-radius

Paliwanag:

Ang format ng ari-arian na border-radius

Buod

Katangian ng outline

Pangunahing Syntax

outline-width

outline-style

outline-color

outline-offset

Katangian ng box-shadow

Paliwanag:

Format ng Property ng box-shadow

Kahulugan ng bawat halaga

Halimbawa ng box-shadow

Pangunahing halimbawa ng anino

Halimbawa ng panloob na anino

Halimbawa ng maraming anino

Buod

YouTube Video

Ari-arian ng `border`

Pangunahing Estruktura ng `border`

Pinagsama sa `border-radius`

Ari-arian na `border-radius`

Ang format ng ari-arian na `border-radius`

Katangian ng `outline`

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

Katangian ng `box-shadow`

Format ng Property ng `box-shadow`

Halimbawa ng `box-shadow`