Блог

Главная - Вопросы по программированию - Есть ли способ использовать box-shadow для создания круглой границы вставки?

Есть ли способ использовать box-shadow для создания круглой границы вставки?

#html #css

#HTML #css

Вопрос:

Мне нужна внутренняя граница для эффекта на этих изображениях. Я посмотрел, как это сделать, и никакие учебные пособия мне не помогают. Я нашел тот, который выглядел правильно, но, похоже, не работает.

Я применил это к div, id и даже к самому изображению.

 #img{
    box-shadow:
        inset 0 10px 0 rgba(255,255,255,.5), /* Top */
        inset -10px 0 0 rgba(255,255,255,.5), /* Right */
        inset 0 -10px 0 rgba(255,255,255,.5), /* Bottom */
        inset 10px 0 0 rgba(255,255,255,.5), /* Left */
        inset -7.5px 7.5px 0 rgba(255,255,255,.5), /* Top Right */
        inset -7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Right */
        inset 7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Left */
        inset 7.5px 7.5px 0 rgba(255,255,255,.5); /* Top Left */
    -moz-box-shadow:
        inset 0 10px 0 rgba(255,255,255,.5), /* Top */
        inset -10px 0 0 rgba(255,255,255,.5), /* Right */
        inset 0 -10px 0 rgba(255,255,255,.5), /* Bottom */
        inset 10px 0 0 rgba(255,255,255,.5), /* Left */
        inset -7.5px 7.5px 0 rgba(255,255,255,.5), /* Top Right */
        inset -7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Right */
        inset 7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Left */
        inset 7.5px 7.5px 0 rgba(255,255,255,.5); /* Top Left */
    -webkit-box-shadow:
        inset 0 10px 0 rgba(255,255,255,.5), /* Top */
        inset -10px 0 0 rgba(255,255,255,.5), /* Right */
        inset 0 -10px 0 rgba(255,255,255,.5), /* Bottom */
        inset 10px 0 0 rgba(255,255,255,.5), /* Left */
        inset -7.5px 7.5px 0 rgba(255,255,255,.5), /* Top Right */
        inset -7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Right */
        inset 7.5px -7.5px 0 rgba(255,255,255,.5), /* Bottom Left */
        inset 7.5px 7.5px 0 rgba(255,255,255,.5); /* Top Left */
}

Предполагается, что это будет полный круг вставки вокруг изображения. Я даже не уверен, какое количество пикселей использовать, но я даже не могу заставить его работать, чтобы увидеть, что он делает.
!(https://imgur.com/a/c5fTMJN )

Ответ №1:

Самый простой способ добиться этого — сделать изображение фоновым изображением div. Сначала вам нужно удалить <img> из вашего html, затем добавить это в css и убедиться, что имя класса совпадает с тем, которое вы используете в html:

 div .round-image {
      border-radius: 100%;
      background: url(2.jpg);
      box-shadow: inset 0 0 0 10px #ffffff96;
}

Вы могли бы изменить цветовой код (# ….) на любой прозрачный цвет, если хотите, вы можете найти rgba (прозрачные) генераторы цветов онлайн или поиграть с инструментом выбора цвета и прозрачности inspector tool в вашем браузере.

Мой тест выглядит следующим образом, неважно, что это прямоугольное изображение, поэтому оно не стало круглым:https://gyazo.com/8e9c3deb54d5f784534c6d952a028400

Ваш div должен быть квадратным, одинаковой высоты и ширины, чтобы стать идеально круглым с радиусом границы 100%.

Ответ №2:

Я думаю, вы должны дать нам свое описание структуры html и всего связанного с css. Пока вы даете описание ваших html-страниц и структуры css, вы можете обнаружить что-то неправильное или неподходящий способ подготовки статической веб-страницы.

Это может быть одним из применений разделения задач (SoC) в информатике. Попробуйте разделить ваши разные разделы и описать это, вы обнаружите проблемы.

Это пример работы.

 <body>
    <div class="roundedCorner">
    </div>
</body>

.roundedCorner
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 10px -10px 5px  rgba(0,0,0,0.6);
    -moz-box-shadow: 10px -10px 5px  rgba(0,0,0,0.6);
    -webkit-box-shadow: 10px -10px 5px  rgba(0,0,0,0.6);
    -o-box-shadow: 10px -10px 5px  rgba(0,0,0,0.6);
    border-radius:25px;
}

Комментарии:

1. Извините за это. Вот HTML: <div class=»img» id=»img»> <img src=»2.jpg «alt =»Backpack» height =»175px»> </div> И вот весь связанный с этим CSS, который я не включил: .products img{ выравнивание элементов по центру; отображение: встроенное; поле: 0 авто; высота: 100%; ширина: авто; } .img{ отображение: блок; поле: 0 авто; выравнивание текста по центру; ширина: 175 пикселей; высота: 175 пикселей; позиция: относительная; переполнение : скрытый; радиус границы: 50%; }

2. Я предполагаю, что предоставленный вами HTML-код не требует пояснений

3. Прошу прощения. Я новичок на этом сайте. Я не уверен, как добавить код, как вы хотели.

4. Сначала не использовать img как class или img. Эти узлы являются примечаниями по умолчанию, а не настраиваемой меткой

5. Хорошо, я изменил название на overlay, и это все равно не сработало.