0

Есть картинка, у которой нужно скруглить углы, но при этом оставить тень. Сейчас подложка под картинкой со скругленными углами и с тенью, но на белом фоне и по размерам выходит за края изображения. Однако, если свойству box-shadow назначить прозрачный цвет, то сама тень исчезнет - как можно решить задачу?

.owl-item {
  box-shadow: 0 22px 87px rgba(0, 0, 0, 0.3);
  opacity: 0.3;
  border-radius: 30px;
}
<div class="owl-item active center">
  <div class="item">
    <img src="http://placehold.it/350x150">
  </div>
</div>

3
  • я так и не понял, что конкретно вам нужно ? Уточните, пожалуйста
    – alexoander
    17 ноя 2016 в 8:25
  • изменение html-конструкции допускается?
    – Игорь
    17 ноя 2016 в 8:46
  • @alexoander внизу еже есть правильные ответы, даже 2 Игорь нет, зачем - уже решили
    – Вася
    17 ноя 2016 в 9:02

2 ответа 2

2

.owl-item img{
 border-radius: 30px;
  box-shadow: 0 22px 87px rgba(0, 0, 0, 0.3);
}
<div class="owl-item active center">
  <div class="item">
    <img src="http://placehold.it/350x150">
  </div>
</div>

4
  • так у вас же белый фон подложки никуда не исчез и не изменился в размерах
    – Вася
    17 ноя 2016 в 8:17
  • так а что вам надо, дать тень картинке и скруглить??? вопрос значит не правильно задан
    – Karalahti
    17 ноя 2016 в 8:19
  • Посмотрите сейчас, так вам надо было?
    – Karalahti
    17 ноя 2016 в 8:26
  • да, только opacity вы зачем-то убрали
    – Вася
    17 ноя 2016 в 9:01
2

   .owl-item img {
border-radius: 30px;
box-shadow: 0 12px 17px rgba(0, 0, 0, 0.3);
opacity: 0.3;
}
<div class="owl-item active center">
  <div class="item">
    <img src="http://placehold.it/350x150">
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.