webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

border-radius: 50%;

<!doctype html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
html, body, div{
margin: 0;
padding: 0;
line-height:1.0;
font-family: "游ゴシック", YouGothic, sans-serif;
/*reset
---------------------------------------------------*/
}
#wrapper{
width: 1000px;
margin: 30px auto;
background: #FFFFFF;
overflow: hidden;
padding: 30px 0 30px 0;
}
#wrapper .img{
float: left;/*一括指定して流し込み*/
}
.imgA{
width: 450px;/*floatするときはワイドを指定*/
margin:0 40px 0 30px;
}
.imgA img{
border-radius: 50%;/*大元の画像に対して円形の境界*/
}
.imgA a:hover{
opacity: 0.5;
}
.imgB{
border-radius: 50%;/*サイズを指定しないと文字の大きさしかない*/
background:url(bobdylan.jpg) no-repeat left top;
border-radius: 50%;/*背景があるところに円形の境界*/
}
.imgB a{
display: block;
width: 450px;
height: 450px;
}
.imgB a:hover{
background: rgba(255, 255, 255, 0.5);
}

</style>
</head>

<body>
<div id="wrapper">
<div class="img imgA"><a href="#"><img src="bobdylan.jpg" width="450" height="450" alt="bob"></a></div>
<div class="img imgB"><a href="#">imgB</a></div>
</div>
</body>
</html>