---
id: 61b0a44a6b865738ba49b9fb
title: Hatua ya 86
challengeType: 0
dashedName: step-86
---

# --description--

Jambo la mwisho utakalofanya ni kuongeza kivuli kidogo kwa kila alama ili kuzifanya zionekane kuwa za kweli zaidi.

Sifa ya `box-shadow` hukuwezesha kuweka kivuli kimoja au zaidi kuzunguka kipengele. Hapa kuna sintaksia:

```css
box-shadow: offsetX offsetY color;
```

Hivi ndivyo thamani za `offsetX` na `offsetY` hufanya kazi:

* `offsetX` na `offsetY` zinakubali thamani za nambari katika `px` na vitengo vingine vya CSS
* thamani chanya ya `offsetX` husogeza kivuli kulia na thamani hasi kukisogeza kushoto
* thamani chanya ya `offsetY` husogeza kivuli kulia na thamani hasi kukisogeza kushoto
* ikiwa unataka thamani ya sifuri (`0`) kwa `offsetX` yoyote au zote mbili na `offsetY`, huhitaji kuongeza kitengo. Kila kivinjari kinaelewa kuwa sifuri inamaanisha hakuna mabadiliko.

Urefu na upana wa kivuli huamuliwa na urefu na upana wa kipengele ambacho kinatumika. Unaweza pia kutumia thamani ya hiari ya `spreadRadius` ili kueneza ufikiaji wa kivuli. Zaidi juu ya hilo baadaye.

Anza kwa kuongeza kivuli rahisi kwenye alama nyekundu.

Katika sheria ya CSS ya `.red`, ongeza sifa ya `box-shadow` yenye thamani `5px` kwa `offsetX`, `5px` kwa `offsetY`, na `red` kwa `color`.

# --hints--

Sheria yako ya CSS ya `.red` inapaswa kuwa na sifa ya mkato ya `box-shadow` yenye thamani ya `5px 5px red`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker blue">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap, .sleeve {
  display: inline-block;
}

--fcc-editable-region--
.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}
--fcc-editable-region--

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

```
