★Border Radius 弧角
☆border-top-left-radius
☆border-top-right-radius
☆border-bottom-right-radius
☆border-bottom-left-radius
★Box Shadow
☆box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
☆offset-x和offset-y可負
★Text Shadow
☆<offset-x> <offset-y> <blur-radius> <spread-radius> <color>
★Box Sizing 看width和height計算到哪裡
☆padding-box border-box
★Multiple Backgrounds
★Color
☆RGBa,HSLa
☆a(alpha)是Opacity的參數
☆H(hue) S(saturation) L(lightness)
☆HSLa較為直覺簡單
★Opacity
☆會影響所有child
★Gradients
☆linear gradients, radial gradients
☆linear-gradient(<angle> to <side-or-corner>,<color-stop>s)
◇<angle> EX:45deg
◇to <side-or-corner> EX:left(90deg)、right(270deg)、top(0deg)、bottom(180deg)
☆radial-gradient(<shape <size> at <position>, <color-stop>s)
◇shape可為circle、ellipsis
◇<size> EX: closest-side、closest-corner、farthest-side、farthest-corner
也可以是長度or百分比
☆border-top-left-radius
☆border-top-right-radius
☆border-bottom-right-radius
☆border-bottom-left-radius
★Box Shadow
☆box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
☆offset-x和offset-y可負
★Text Shadow
☆<offset-x> <offset-y> <blur-radius> <spread-radius> <color>
★Box Sizing 看width和height計算到哪裡
☆padding-box border-box
★Multiple Backgrounds
★Color
☆RGBa,HSLa
☆a(alpha)是Opacity的參數
☆H(hue) S(saturation) L(lightness)
☆HSLa較為直覺簡單
★Opacity
☆會影響所有child
★Gradients
☆linear gradients, radial gradients
☆linear-gradient(<angle> to <side-or-corner>,<color-stop>s)
◇<angle> EX:45deg
◇to <side-or-corner> EX:left(90deg)、right(270deg)、top(0deg)、bottom(180deg)
☆radial-gradient(<shape <size> at <position>, <color-stop>s)
◇shape可為circle、ellipsis
◇<size> EX: closest-side、closest-corner、farthest-side、farthest-corner
也可以是長度or百分比