box shadow上だけに適応させたい

Question

boxshadowのスタイル　0px -1px 24px #e1e6ed;を上だけに適応させてあげたいです。
どう指定したらいいのでしょう？？
ご教授お願いしたいです。よろしくお願いします。

import React, { FunctionComponent } from 'react';
import styled from 'styled-components';

const Div = styled.div`
  padding: 16px 0;
  height: 50px;
  box-shadow: 0px -1px 22px #e1e6ed;
`;

type Props = {
  onClick: () => void;
  disabled: boolean;
};

export const Sarch:FC<Props> = ({ onClick, disabled }) => {
  return (
    <Div>
      <p>検索</p>
      <button disabled={disabled} onClick={onClick}>
        検索ボタン
      </button>
    </Div>
  );

Answer 1

こんにちは。

上だけ、というと、こんな感じですか？

box-shadow: 0px -22px 22px -22px #e1e6ed;

負の値が指定された場合、影は縮小されます。

box-shadow - CSS: カスケーディングスタイルシート | MDN