Как сделать внутреннюю тень css?

Пользователь

от abel , в категории: HTML/CSS , 3 года назад

Как сделать внутреннюю тень css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от sandrine , 3 года назад

Сделать внутреннюю тень css, можно через свойство box-shadow: inset, пример:


HTML:

1
2
3
<body>
    <div class="square"></div>
</body>


CSS:

1
2
3
4
5
6
.square{
    width: 100px;
    height: 100px;
    background-color: slateblue;
    box-shadow: inset 0px 0px 5px  rgb(255, 255, 255);
}


Пользователь

от dorothea_stoltenberg , 2 года назад

@abel 

Чтобы создать внутреннюю тень (inner shadow) элемента с помощью CSS, вы можете использовать свойство "box-shadow". Например:

1
2
3
.my-element {
  box-shadow: inset 0 0 10px #000000;
}


Это создаст тень с глубиной 10px внутри элемента. Чтобы изменить направление тени, вы можете изменить значения первых двух параметров (horizontal offset и vertical offset). Например, чтобы создать тень, которая смещена на 5px вправо и 10px вниз, вы можете использовать следующий код:

1
2
3
.my-element {
  box-shadow: inset 5px 10px 10px #000000;
}


Чтобы узнать больше о свойстве "box-shadow" и его параметрах, вы можете посмотреть документацию на сайте MDN:


https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow