farei semplicemente una cosa del genere
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>rounded border for images with css3 + jquery</title>
<style type="text/css">
body {
background-color:#ccc;
}
.roundedCorners{
border:0;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}
</style>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript">
/*<![CDATA[*/
$(document).ready(function(){
function supportBorderRadius() {
var div=$('<div>');
var bRad=['borderRadius','MozBorderRadius','WebkitBorderRadius'];
for(var k=0;k<3;++k){
if(typeof div.css(bRad[k])!=='undefined') return true
}
return false;
}
if(supportBorderRadius()){
$('img.rounded').each(function(){
var div=$('<div class="roundedCorners"></div>');
div.css({
'width':$(this).width(),
'height':$(this).height(),
'backgroundImage':'url('+$(this).attr('src')+')'
});
$(this).css('opacity',0).wrap(div);
})
}
});
/*]]>*/
</script>
</head>
<body>
</body>
</html>
chi supporta css3 vede arrotondato, gli altri i soliti angoli
ciao
Permessi di invio
Rispondi quotando