text-shadowが効かない

Question

前提・実現したいこと

<id="section-home-about">内にある<p>タグの文字をtext-shadowで黒色縁取りをしたいです。
検索モードで確認したら、text-shadowと表示されてcssが効かないです。
原因がわからないので、教えていただきたいです。

リセットcssでdestyle.cssも読み込んでいます。
https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css

該当のソースコード

    <div id="section-home-about">
      <div class="home-profile">
        <div class="home-profile-container">
          <div class="home-profile-title">
            <img src="#" alt="#">
          </div>
          <!-- home-profile-title -->
          <div class="home-profile-name">
            <p>ハヤシテツヤ Tetsuya Hayashi</p>
          </div>
          <!-- home-profile-name -->
          <div class="home-profile-data">
            <p>〒135-0016 東京都江東区東陽三丁目1-10 インペリアルビル301</p>
            <p>Imperial building 301, 3-1-10, Toyo, Kotoku, Tokyo, 135-0016, Japan</p>
            <p>tel:[phone]</p>
            <p>mail:[e-mail]</p>
            <p>[Facebook] [twitter]</p>
          </div>
          <div class="home-profile-p">
            <p>ウェブ、グラフィックのデザイン作成の活動をしております。<br>
              ご感想、お仕事のご依頼は<a href="#section-home-contact">お問い合わせフォーム</a>
              または<a href="mailto:[e-mail]">メール</a>よりお気軽にお送りください。
            </p>
          </div>
          <div class="home-profile-p">
            <p>We have been acting with the main business lines of web designs, graphic design productions.<br>
              If you have some opinion or work to request, please feel free to contact us by the inquiry form or email.</p>
          </div>
        </div>
        <!-- home-profile-container -->
      </div>
      <!-- home-profile -->
    </div>
    <!-- section-home-about -->

/* header */

header {
  position: fixed;
  top: 0;
  left: 70%;
  z-index: 1;
}

.nav ul {
  width: 400px;
  margin-left: auto;
  display: flex;
  margin-right: 10px;
}

.nav ul li {
  list-style-type: none;
  margin-right: 30px;
}

.nav a {
  color: #FFF;
  font-family: 'Courier New', Courier, monospace;
  font-weight: normal;
  font-size: large;
}

/* main */
.main-cover {
  background-image: url(../img/main-pic.jpg);
  background-size: cover;
  height: 100vh;
  width: 100%;
}

#work ul {
  margin-left: 0;
  width: 100%;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

#work img {
  height: 320px;
  width: 315px;
}

/* home-profile */
#section-home-about p {
  color: #FFF;
  text-shadow: black 1px 1px 0,black -1px 1px 0,
    black -1px 1px 0,black 1px -1px 0,
    black 0px 1px 0,black 0 -1px 0,
    black -1px 0 0,black 1px 0 0,
}

.home-profile {
  background-image: url(../img/tyo-ku_bg.jpg);
  padding: 0;
  background-attachment: fixed;
  background-size: cover;
}

.home-profile-container {
  margin: 0 auto;
  padding: 150px;
}

補足情報（FW/ツールのバージョンなど）

macOS

Answer 1

最後に余計なコンマがあるからではないでしょうか。

#section-home-about p {
  color: #FFF;
  text-shadow: black 1px 1px 0,black -1px 1px 0,
    black -1px 1px 0,black 1px -1px 0,
    black 0px 1px 0,black 0 -1px 0,
    black -1px 0 0,black 1px 0 0, /* ←このカンマが余計 */
}

Comments

[tetsuya7724]

行けました。ありがとうございます。

Answer 2

最後の,を；に変えると効くようになるかも。

text-shadow: black 1px 1px 0,black -1px 1px 0,
    black -1px 1px 0,black 1px -1px 0,
    black 0px 1px 0,black 0 -1px 0,
    black -1px 0 0,black 1px 0 0;

Comments

[tetsuya7724]

行けました。ありがとうございます。