css片段

容器底部漸變

.div::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 25px;
  background: linear-gradient(rgba(255, 255, 255, 0.001),white);

滾動條（谷歌）

::-webkit-scrollbar {/*滾動條整體樣式*/
        width: 2px;     /*高寬分別對應橫豎滾動條的尺寸*/
        height: 6px;
    }

::-webkit-scrollbar-thumb {/*滾動條裏面小方塊*/
        border-radius: 6px;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #0069d19d;
    }

::-webkit-scrollbar-track {/*滾動條裏面軌道*/
        box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
        border-radius: 6px;
        background: #EDEDED;
}

radio選中

input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

得到焦點（Edge不支持）

元素自身或者它的某個後代匹配:focus僞類

form:focus-within {
  background: #ff8;
  color: black;
}

禁用

input[type="text"]:disabled {
  background: #ccc;
}

懸停位置創建一個陰影

<button class="mouse-cursor"><span>Hover me</span></button>

.mouse-cursor::before {
  --size: 0;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}

.mouse-cursor:hover::before {
  --size: 200px;
}

var btn = document.querySelector('.mouse-cursor')
btn.onmousemove = function(e) {
  var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
  var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
  btn.style.setProperty('--x', x + 'px')
  btn.style.setProperty('--y', y + 'px')
}

動畫下劃線效果

<p class="hover-underline-animation">Hover this text to see the effect!</p>

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

選中樣式

::selection {
  background: red;
  color: #fff;
}