CSS常用/特殊样式归纳汇总<持续更新>

常用样式

gap -> 每个元素之间隔开距离

display: flex | grid； // 仅适用flex/grid
flex-wrap: wrap;/*允许换行*/    
justify-content: center;/*水平居中*/
flex-direction: column;/*竖直排列*/
gap: 20px;
align-content: start; /*上下不会平铺*/

user-select -> 文字不可选择

user-select: none;

:focus-within -> 伪类 ：表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上

form:focus-within { 
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3); 
    background-color: beige; 
}

:hover .class -> 与:focus-within类似,表示父级获取焦点,子级做出样式更改(class/id/不能用选择器)

form:hover .class { 
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3); 
}

内阴影效果

box-shadow: inset 8px 8px 6px #d9dce6, inset -5px -5px 15px #f5f9fd, 
inset -5px -5px 15px #f5f9fd, inset 7px 7px 6px #d9dce6;

文字超出长度省略

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

IMG与span不对齐时 / display: inline-block;块状元素与文字不对齐

vertical-align: text-top;

自定义滚动条

/*滚动条优化*/
::-webkit-scrollbar-track-piece {
    background-color: none;
    -webkit-border-radius: 0
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: #b8b8b8;
    -webkit-border-radius: 6px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5
}

::-webkit-scrollbar-thumb:hover {
    height: 50px;
    background-color: #878987;
    -webkit-border-radius: 6px
}

特殊样式

:empty -> 用css判断数据是否为空

.container:empty::after { 
    content: "暂无数据"; 
}

毛玻璃半透明效果

background: rgba(255, 255, 255, .4);
backdrop-filter: blur(30px);

background-clip: text -> 实现文字镂空叠加背景图

background: url(./b56afe2066d.jpg) center center no-repeat;
background-size: 100% 100%;
-webkit-background-clip: text;
color: transparent;

虚化透视文字效果:类似element导航栏

background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);
-webkit-backdrop-filter: saturate(50%) blur(4px);
box-shadow: 0px 0px 9px 0px rgba(68,175,233,0.25);

底部边框一端渐变

border-right: 2px solid;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 2 2 2 2;

右侧边框两端渐变

border-right: 2px solid;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 2 2 2 2;