box-shadowとborder-radius

GeckoTang

License: MIT License

Fork
2
Fav
0
View
4099
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 0 lines
  • HTML 1 lines
  • CSS 59 lines
win Chrome 11 devで確認。

★rgba(200,100,0,.3) -100px 100px 0px,
影の色を rgba(200,100,0,.3) で top -100px left 100px の位置に ぼかし0px で配置

★rgba(200,100,0,.5) -100px 100px -20px,
影の色を rgba(200,100,0,.3) で top -100px left 100px の位置に ぼかし具合-20px で配置
と思いきや、ぼかし具合には負の値が入らない為 広がり(paddingみたい)に置き換わり(?)
影の色を rgba(200,100,0,.3) で top -100px left 100px の位置に 広がり具合-20px で配置
(paddingを-20px引くような感じ)
なのでborder-radiusで円にしていると四角くなってしまう

★rgba(200,100,0,.5) -100px 100px 0 -5px,
影の色を rgba(200,100,0,.3) で top -100px left 100px の位置に ぼかし0px 広がり-5px で配置
全部省略しないで書いているので綺麗に縮小できる。

★rgba(200,100,0,.3) -100px 100px 0 20px,
影の色を rgba(200,100,0,.3) で top -100px left 100px の位置に ぼかし0px 広がり20px で配置
全部省略しないで書いているけど
paddingが+20pxされるので角丸っぽい感じになる。


省略せずに書けばいいよ!ってことなんだと思う。


・・・あれ?firefoxで影でないな・・・
  • box-shadowとborder-radius
  • box-shadowとborder-radius
  • YUI 3 CSS Reset

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

GeckoTang

Author

CSSプログラマーです

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by