округленная граница вокруг img не показывает - PullRequest
Новая
       77

округленная граница вокруг img не показывает

2 голосов
/ 01 октября 2011

enter image description here

, как вы можете видеть, граница отсутствует по углам (красная).если я сделаю его толщиной 4+ пикселя, то это нормально, но мне нужно, чтобы он был толщиной 1 пиксель.почему это проблема?Разве это свойство ведет себя так, как это задумано?

html 

<div class="win" >  
<img class="rounded" src='red.jpg' />
</div>

и css 

.win{width:188px;float:left;margin:0 30px 25px 0;}
.win .rounded {
overflow: hidden;
behavior: url(PIE.htc);
border:1px solid #000;  
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px; /* Safari and Chrome */
border-radius: 7px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}

/ РЕДАКТИРОВАТЬ /

наконец я нашел решение, которое делает именно то, что мне нужно.Я делюсь ссылкой, может быть, у кого-то есть такая же проблема:

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

Ответы [ 3 ]

1 голос
/ 01 октября 2011

Вы должны взглянуть на свойство background-clip css.Попробуйте background-clip: padding-box.Вы также должны добавить -webkit-background-clip и -moz-background-clip для поддержки старых браузеров.

0 голосов
/ 01 октября 2011

Существует проблема с использованием border-radius с изображениями в большинстве / всех браузерах. Есть много статей об этом, но я не обратил на них внимания. Вы должны Google для тех.

0 голосов
/ 01 октября 2011

Если вам нужны хорошие округленные границы, которые будут работать с большим количеством браузеров, вы можете использовать изображение в качестве фона для div с необходимыми css-свойствами.
Пример (только граница, больше ничего):
HTML 

<div class="card" style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;"></div>

CSS 

.card {
    border:1px solid #000;  
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
}
...