CSS

July 8, 2020

問題

  display: flex;
  flex-direction: column;

撐開到最大螢幕高度：min-height: 100vh;
CSS selector: &:nth-child(odd), &:nth-child(n + 3)
overflow-x: hidden; overflow 可以設定你的 scroll bar 要發生在哪裡
Flip an Image (or SVG)
transform: scaleX(-1);
https://css-tricks.com/snippets/css/flip-an-image/
scroll-snap-type
https://css-tricks.com/practical-css-scroll-snapping/
margin-right: auto 推到底的意思
svg 填色，選底下的 path 來填色

  path {
    fill: #c0cbcf;
  }

Dark mode
filter: invert(1) hue-rotate(180deg);
https://dev.to/dip15739/dark-mode-with-only-1-css-property-17fl
Disable scroll (modal 底下那層)

useEffect(() => {
  document.body.style.overflow = 'hidden';
  return () => {
    document.body.style.overflow = null;
  };
}, []);

可以用 CSS 解決的，就不要用到 JS

* {
  -webkit-tap-highlight-color: transparent;
}

(Learned by Add tap highlight color override style by project)

transition: border-color 0.5s;

  transition-property: all;
  transition-duration: 0.3s;

box-shadow
You can set multiple effects separated by commas.
pointer-events
可以加 pointer-events: none; 讓下層的 div 可以被 hover
https://www.oxxostudio.tw/articles/201409/pointer-events.html
cursor
default / pointer
http://developer.mozilla.org/en-US/docs/Web/CSS/cursor