Appliquer une ombre interne et externe à un seul élément HTML

Question

Est-il possible d'appliquer 2 box-shadows à un élément HTML en même temps ? J'essaie d'appliquer à la fois une ombre interne (inset) et externe.

Cela donne un effet de flou à l'intérieur de l'élément, puis une ombre extérieure normale.

Par exemple :

box-shadow: inset 5px 5px #000000;
box-shadow: -1px 5px #FF00FF;

Answer 1

Oui.

Vous pouvez simplement faire quelque chose comme :

box-shadow: 0 0 5px #FF00FF, inset 0 0 5px #000000;

Un exemple concret.

Answer 2

Essayez ça :

box-shadow: inset 5px 5px #000000, -1px 5px #FF00FF;