CSS рамка будет окружать div, но тень блока не будет

Question

Я настраиваю и таблицу Ant Design с s css и хочу добавить тень окна при наведении курсора на ячейку заголовка таблицы. В следующем коде элемент окружен с каждой из четырех сторон элемента зеленой рамкой размером 1 пиксель solid, но тень блока всегда появляется только на левой стороне элемента, за его пределами:

  .ant-table-thead>tr>th:hover {
    box-shadow: 0 0 6px green !important;
    border: solid 1px green !important;
    transition: 0.5s;
    background: #E8F8F5;
    cursor: grab;
  }

Вот как это выглядит:

введите описание изображения здесь

Как я могу добавить тень блока на каждую сторону элемента, внутри и снаружи? Я пытался заставить его работать, но мне чего-то не хватает. TIA.

Answer 1

Попробуйте использовать смещение. Например:

box-shadow: 2px 2px 6px green

Это должно помочь.

Кроме того, я бы не рекомендовал использовать !important в вашем CSS, так как это может вызвать проблемы.