Добавление круга вокруг округлого изображения

Я создал круглый образ, используя следующий HTMLДобавление круга вокруг округлого изображения

<div class="thumb"> 
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img"> 
</div>

и CSS

.thumb{ 
width: 150px; 
height: 150px; 
overflow: hidden; 
border-radius: 50%; 
}

Я попытался добавить новый круг вокруг округлых изображений, не удался в конце концов. Как я должен это делать? Должен ли я создать новый div и добавить это закругленное изображение внутри него и создать стиль, чтобы сделать его круглым? Я попытался достичь обведенного изображения в этой ссылке google https://www.gmail.com/intl/en/mail/help/about.html, которая находится прямо под слайдером. Вот моя скрипка того, что я получил до сих пор http://jsfiddle.net/adityasingh773/rzsmpmc9/

источник

2015-09-21 Lucky Ali

Я пошел к вашей скрипке в http://jsfiddle.net/rzsmpmc9/ и добавил только еще две строки в конце вашего '.thumb' CSS ...' границы: 7px solid #eee; 'и' box-shadow: 1px 1px 12px 8px #ccc; 'и это довольно близко к странице, которую вы цитируете. Играйте с разметкой px тени, теневой позиции и цветов, и вы сможете получить то, что хотите. Никакой дополнительной разметки не требуется. См. Ответ cvsguimaraes. –

Это не так элегантное решение, потому что это требует дополнительных-HTML, но выглядит довольно хорошо, имхо: (Ждут» t эксперимент с псевдоэлементами, возможно, аналогичный результат может быть достигнут).

<div class="thumb-wrapper"> 
<div class="thumb"> 
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img"> 
</div> 
    </div>

CSS:

.thumb-wrapper { 
    width: 170px; 
    height: 170px; 
    overflow: hidden; 
    border-radius: 50%; 
    background-color:#fefefe; 
    position:relative; 
    box-sizing:border-box; 
    border:1px solid #dedede; 
    -webkit-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1); 
-moz-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1); 
box-shadow: -5px 4px 19px 0px rgba(143,143,143,1); 
} 
.thumb{ 
    width: 150px; 
    height: 150px; 
    overflow: hidden; 
    border-radius: 50%; 
    position:absolute; 
    left:8px; 
    top:9px; 
    box-sizing:border-box; 

}

DEMO: http://jsfiddle.net/rzsmpmc9/5/

источник

2015-09-21 20:18:12 sinisake

Пробовал добавить границу?

<div> 
    <img class="thumb" src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img"> 
</div>

.thumb{ 
    width: 150px; 
    height: 150px; 
    overflow: hidden; 
    border-radius: 50%; 
    border:2px solid white; 
    box-shadow:0 0 0.5em white; 
}

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

источник

2015-09-21 20:04:24 cvsguimaraes

Да, я пробовал это, но это просто создает дополнительную закругленную границу вокруг изображения, и это квадрат не круг –

@ LuckyAli Да, мое первоначальное решение предложило использовать контур, но оно не работает с закругленным углом. Ответ уже обновлен ... – cvsguimaraes

Это то же самое решение, что и indubitablee, но я хотел достичь некоторого заполнения между граничным и округленным изображением. Как мне это сделать? –

вы можете просто добавить рамку к существующему CSS

border: 3px blue solid;

http://jsfiddle.net/rzsmpmc9/2/

источник

2015-09-21 20:06:04 indubitablee

Вы можете достичь такой же стиль, как ссылка, которую вы предоставили, если u'll использовать изображение, которое является наиболее вероятным способом, но если вы играете с box-shadow u, скорее всего, получите то же самое.

box-shadow:2px 2px 4px green, -2px -2px 4px red;

проверка this.

источник

2015-09-21 20:24:16 rockStar

Добавление круга вокруг округлого изображения

ответ

Смежные вопросы