Webサイト制作科 | 受講記録 | 苦楽中道

2014年01月27日開講の求職者支援訓練（フェリカTA_Webサイト制作科）における受講メモと習熟度記録

画像も表示

border-radiusの設定

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSS3 角丸</title>
<style>
#radius1, #radius2, #radius3, #radius4 {
  border: 4px solid #F90;
  width: 200px;
  height: 100px;
  margin: 30px 50px;
}
#radius1 {
  border-radius: 20px;
}
#radius2 {
  border-radius: 10px 15px 20px 25px;
}
#radius3 {
  border-top-left-radius: 10px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 25px;
}
#radius4 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
</head>
<body>
<divid="radius1"></div>
<divid="radius2"></div>
<divid="radius3"></div>
<divid="radius4"></div>
</body>
</html>