Как сделать границу CSS на изображении?

Как обрезать изображение (600х450) и создать границу с ним с помощью CSS?Как сделать границу CSS на изображении?

Возможно ли это? Что лучше использовать? Создайте некоторый элемент оболочки с радиусом границы?

2015-10-02 Maximus Dredoff

это возможно, с помощью границы радиуса и CSS3 магии. эта ссылка запустит вас на вашем пути - http://www.1stwebdesigner.com/image-styling-coding-tutorials/ – nykc

Что-то вроде [этого] (http://jsfiddle.net/pLvvottd/)? – Phylogenesis

Если вы продемонстрируете некоторые (расследование) усилия, вы можете даже получить некоторую помощь. Я бы определенно тоже изменил тему, поэтому он содержит «границу без прямоугольника». – Pieter21

Я думаю, что это лучшее, что можно сделать с помощью CSS:

CSS:

img { 
    width:400px; 
    height:400px; 
    border-top-left-radius:50% 50px; 
    border-top-right-radius:50% 50px; 
    border-bottom-left-radius:50%; 
    border-bottom-right-radius:50%; 
}

http://jsfiddle.net/andyfurniss/rmc4nuu7/

Затем просто добавить белую рамку и box-shadow.

источник

2015-10-02 14:31:15

* «Тогда просто добавьте белую рамку и коробку-тень» * - почему бы не добавить ее сами, чтобы иметь действительно хорошую демонстрацию? Затем вы можете вставить его в виде фрагмента stackoverflow - тогда это будет еще лучше. – dfsq

Спасибо за помощь, но это выглядит не очень хорошо (http://take.ms/ys1yU) А также мой img более точно http://take.ms/B0I38 –

Да, я думаю, вы всегда будете получать немного кривая с «border-radius», которую я понимаю, не совсем то, что вам нужно. Я не уверен, что вы можете сделать все с чистым CSS. –

<style> 
    #img{ 
     border-bottom-left-radius: 50%; 
     border-bottom-right-radius: 50%; 
     border-top-right-radius: 10%; 
     border-top-right-radius: 10%; 
     width: 600px; 
     height: 450px; 
    } 
</style>

источник

2015-10-02 14:35:17 EJW

некоторое объяснение обычно оценивается – enigma

True! я извиняюсь – EJW

У меня есть обновление @Phylogenesis 'example добавить границы, тени и сделать его отзывчивым.

В дополнение к не установленной фиксированной ширины и hieght, соответствующая часть кода является следующее:

#mask img { 
    margin-left: 50%; 
    transform:translate(-50%, 0); 
    border-bottom-left-radius:100%; 
    border-bottom-right-radius:100%; 
}

источник

2015-10-02 14:43:28

Как сделать границу CSS на изображении?

ответ

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