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

webかたつむり

ウェブデザインを勉強中

button のデザインを変える

button要素の見映えを変える

  • 初期設定のまま

f:id:ohta-felica:20160611212643p:plain

  •  buttonのheightは32pxに設定してあります。ここでborder-radius: 16px 。

f:id:ohta-felica:20160611212820p:plain

  •  右下にフレーのシャドウがついています。
  • box-shadow: none; と記述しても消えません。
  • border-style: none; と記述してみました。消えました。

f:id:ohta-felica:20160611213151p:plain

  •  border-style: outset; と記述したら元に戻りました。

f:id:ohta-felica:20160611213458p:plain

  •  outset=初期設定

f:id:ohta-felica:20160611215947p:plain

  • border-style: none; box-shadow: 2px 3px 4px -2px #777777;

f:id:ohta-felica:20160611220546p:plain