読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

CSS3-角を丸くする・影をつける

ボックスの角を丸くする

  • border-radius: 角の丸みの半径;
  • 角ごとに半径を変えた丸みをつける(左上 右上 右下 左下)
角丸の半径の考え方
.sample {
  width: 300px;
  height: 100px;
  background-color: #FFC;
  border: 10px solid #696;
  border-radius: 30px;
}

角丸の半径と枠線の太さが同じ場合
.sample {
  width: 300px;
  height: 100px;
  background-color: #FFC;
  border: 30px solid #696;
  border-radius: 30px;
}

ボックスに影をつける

  • box-shadow: 横方向の距離 縦方向の距離 色;
ボックスにぼかした影をつける
  • box-shadow: 横方向の距離 縦方向の距離 ぼかしの幅 色;

文字に影をつける

  • text-shadow: 横方向の距離 縦方向の距離 色;
文字にぼかした影をつける
  • text-shadow: 横方向の距離 縦方向の距離 ぼかしの幅 色;