容器底部渐变
.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;
}